美文网首页Vue
vue3 watch 和 watchEffect的使用

vue3 watch 和 watchEffect的使用

作者: 邢走在云端 | 来源:发表于2021-06-20 21:47 被阅读0次

    本文章仅供个人学习记录所用

    监听 ref 类型

    第一个参数是响应式对象,第二个参数是回调函数

    const a = ref(0)  
    watch(a, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    

    监听 reactive 类型

    首先采用 ref 的那种方式,我们会发现报错

    const data = reactive({
      count: 0
    })
    
    watch(data.count, (newVal, oldVal) => { // 错误写法
      console.log(newVal, oldVal)
    })
    
    错误信息错误信息

    [Vue warn]: Invalid watch source: 0** A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. **

    所以我们根据上述的报错信息,将这个参数改成一个 function的形式即可

    const data = reactive({
      count: 0
    })
    
    watch(() => data.count, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    

    同时监听多个

    watch 第一个参数可以使用数组的形式

    watch([a, () => data.count], (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    

    watchEffect的使用

    // watchEffect 监听
    watchEffect(() => {
      console.log(a.value, data.count) // ref  类型的需要加.value
    })
    

    🆚watch和watchEffect的特性对比

    watch的特性

    • 首次加载不会监听,只会被监听数据发生变化时才监听到。(惰性)
    • 可以拿到新的值以前的值
    • 可以同时监听多个数据的变化

    watchEffect的特性

    • 首次加载就会监听
    • 只能拿到最新的值
    • 不需要指定监听的数据,组件初始化的时候就会执行一次用以收集依赖,而后收集到的依赖发生变化,这个回调才会再次执行

    高级用法

    他们的高级用法等后面应用的时候单独再记录下

    完整案例代码体验

    <template>
      <div>
        <h1>count :{{ count }}</h1> 
        <h1>a :{{ a }}</h1>
        <button @click="increase">新增</button>
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref, reactive, toRefs, watch, watchEffect } from 'vue';
    export default defineComponent({
      name: 'HelloWorld',
      setup() {
        let a = ref(0)
        const data = reactive({
          count: 0,
          increase: () => { data.count ++; a.value += 2 } // 这是改变两个类型数据的方法
        })
        // watch 监听
        watch([a, () => data.count], (newVal, oldVal) => {
          console.log(newVal, oldVal)
        })
        // watchEffect 监听
        watchEffect(() => {
          console.log(a.value, data.count) // ref  类型的需要加.value
        })
        const refData = toRefs(data)
        return {
          ...refData,
          a
        }
      }
    });
    </script>
    

    相关文章

      网友评论

        本文标题:vue3 watch 和 watchEffect的使用

        本文链接:https://www.haomeiwen.com/subject/mnzsyltx.html