Combination of the API

1 the computed function

role

Generate new responsive data from existing data, similar to the vue2 option

steps

1. Import computed functions. 2. Run the setup function, pass in a function, define calculation rules in the function, and return result 3. Place the results of a computed function call into the REtur value object of setup

format

import { computed }

const computedName = computed (() = >{
  return. })Copy the code

The instance

<template>
  <p>Name: {{name}}, the company: {{company}}, a monthly salary: {{salary}}, salary of {{total}}</p>
  <button @click="double">Double a month</button>
</template>
<script>
import { ref, computed } from 'vue'
export default {
  name: 'App',
  setup () {
    // Define a responsive object
    const company = ref('DiDi')
    const name = ref('wang')
    const salary = ref(18000)
    const double = () = > {
      salary.value *= 2
    }
    const total = computed(() = > 12 * salary.value)
    
    return {  
      name, 
      company,
      total,
      salary,
      double
    }
  }
}
</script>
Copy the code

2 Computed complete usage

format

const computedName = computed({
  get () {
    // Automatically called when the value is obtained
  },
  set (val) {
    // When the setting value is called automatically, val is passed in automatically}})Copy the code

The instance

<template>
  <div class="container">Monthly salary :{{STu}}, annual salary :{{total}}<input v-model="total"/>
    <button @click="double">Double a month</button>
  </div>
</template>
<script>
Reactive: a second way to declare reactive data besides ref

import { reactive, computed } from 'vue'
export default {
  setup () {
  
    const stu = reactive({ // Complex data
      name: 'baidu'.salary: 18000.address: '- in Beijing? '
    })
    const double = () = > {
      stu.salary *= 2
      console.log(stu.salary)
    }
    // Define the computed properties: normal: only get is used
    // const total = computed(() => {
    // return stu.salary * 12
    // })

    // Use get + set
    const total = computed({
      get() { return stu.salary * 12 },
      set(val) { 
        // Set the value of the calculated property, which is automatically called and passed in val
        console.log('The value to be set... ', val)
        stu.salary = val/12}})return { double, stu, total}
  }
}
</script>
Copy the code

summary

1. For a computed function, the return value is the computed property value 2. For a computed incoming object, GET gets the value of a computed property, and set listens for computed property changes

3 watch function

role

Callback logic based on changes in reactive data is exactly the same as watch in VUe2

steps

1. Import the watch function. 2. Execute the Watch function in the setup function and enable listening for reactive data

Listening for individual data

<template>
  {{ age }}
  <button @click="age++">change age</button>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  setup() {
    const age = ref(18)
    watch(() = > {
      // Return the responsive data you want to listen on
      return age
    }, (newVal, oldVal) = > {
      // Callback function after data change
      console.log('Age has changed')})return {
      age
    }
  }
}
</script> 
Copy the code

Listening for multiple data

<template>
   {{salary}}-{{age}}
  <button @click="age++">age++</button>
  <button @click="salary+=100">salary++</button>
 
</template>
<script>
import {ref, watch} from 'vue'
export default {
  setup(){
    let salary = ref(1800)
    let age = ref(20)
    
    watch([salary, age],(newVal, oldVal) = >{
      console.log('STu has changed', newVal, oldVal,newVal === oldVal)
    }, {immediate:true.deep:true})

    return {salary,age}
  }
}
</script>
Copy the code

Immediate execution? Deep surveillance?

// Object to listen for responsive data
// Array, where each element is responsive data
// Function that returns the responsive data you want to listen for changesWatch (data array | | the get function,( newVal,oldVal ) = >{}, {// By default, the callback is executed only when the monitored data changes. If you need to execute the callback immediately, you need to configure immediate
  immediate:true|false
  // By default, properties inside an object are not listened for. If you want all properties below the object to be heard, you need to enable the deep configuration
  deep: true|false}})Copy the code

Listening for complex data

If the first parameter of watch is the response data, it will listen to the changes of all the attributes under it by default, which will consume a lot

<template> name :{{stu.name}}, company :{{stu.pany}} salary {{stu.money. Salary}} < button@click ="stu.company ='didi'"</button> </template><script>
import { reactive, toRefs, watch } from 'vue'
export default {
  setup() {
    const stu = reactive({
      name: 'wang'.company:'JD'.money: {
        salary: 1800
      }
    })
    watch(stu, () = > {
      // Callback function after data change
      console.log('StU has changed')})return { stu }
  }
}
</script> 
Copy the code

So if you use Watch to be as specific as possible about which properties you want to listen for, you avoid the performance problems of using deep, for example, when you only want to perform a callback when the SALARY of the STU object’s money property changes

<template> name :{{stu.name}}, company :{{stu.pany}} salary {{stu.money. Salary}} < button@click ="stu.money.salary*=2"> double</button> </template><script>
import { reactive, watch } from 'vue'
export default {
  setup() {
    const stu = reactive({
      name: 'wang'.company:'JD'.money: {
        salary: 1800
      }
    })
    watch(() = > {
      return stu.money.salary
    }, () = > {
      // Callback function after data change
      console.log('Stu. money. Salary has changed')}, {deep: true
    })
    return {
      stu
    }
  }
}
</script> 
Copy the code