VUE3-watchEffect

VUE3-watchEffect

特性

• 一开始就先执行一次
• 函数体中使用到了某个数据，这个使用到的数据只要发生变化，watchEffect中的回调函数一定会执行一次。
  注：这个数据需要为响应式数据

// 使用watchEffect这个组合式的API。
// 作用：也是用来监视
// watchEffect函数中直接跟一个回调函数即可。
// 这个回调函数什么时候执行？一开始就先执行一次，然后函数体中使用到了某个数据
// 这个使用到的数据只要发生变化，watchEffect中的回调函数一定会执行一次。
watchEffect(() => {
    
    
  // 我这个回调函数当中使用到了data.counter1和data.counter3
  // 这个回调函数的执行实际是：只要counter1发生变化，或者counter3发生变化，这个回调函数都会执行
  const a = data.counter1
  const b = data.counter3
  console.log(a, b);
})

代码

<template>
  <div>计算器1：{
   
   {data.counter1}}</div>
  <button @click="data.counter1++">点我加1</button>
  <div>计算器3：{
   
   {data.counter3}}</div>
  <button @click="data.counter3++">点我加1</button>
</template>

<script>
  import {
      
      
    reactive,
    watchEffect
  } from 'vue'
  export default {
      
      
    setup() {
      
      
      // data
      let data = reactive({
      
      
        counter1: 1,
        counter2: 100,
        counter3: 1000
      })

      // 使用watchEffect这个组合式的API。
      // 作用：也是用来监视
      // watchEffect函数中直接跟一个回调函数即可。
      // 这个回调函数什么时候执行？一开始就先执行一次，然后函数体中使用到了某个数据
      // 这个使用到的数据只要发生变化，watchEffect中的回调函数一定会执行一次。
      watchEffect(() => {
      
      
        // 我这个回调函数当中使用到了data.counter1和data.counter3
        // 这个回调函数的执行实际是：只要counter1发生变化，或者counter3发生变化，这个回调函数都会执行
        const a = data.counter1
        const b = data.counter3
        console.log(a, b);
      })
      return {
      
      
        data
      }
    }
  }
</script>

涉及内容

VUE3、watchEffect