vue3的watch的场景

axzzy

已于 2022-08-04 13:55:50 修改

阅读量177

点赞数

分类专栏： vue 文章标签：前端

于 2022-08-04 13:43:31 首次发布

本文链接：https://blog.csdn.net/axzzy/article/details/126157921

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue3中watch的使用，包括监听单个和多个基本数据类型、对象以及对象属性的变化。强调了深度监听（deep）、立即执行（immediate）和flush选项的作用，特别指出监听reactive对象时的注意事项，推荐使用监听对象属性的方式来避免潜在问题。

摘要由CSDN通过智能技术生成

watch(source, callback, options)
source: 可以支持 string,Object,Function,Array; 用于指定要侦听的响应式变量
callback: 执行的回调函数
options：支持 deep、immediate 和 flush 选项。
         flush (当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。
默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
如果想在侦听器回调中能访问被 Vue 更新之后的DOM，你需要指明 flush: 'post' 选项：)

方式一:监听单个基本数据类型(ref)，
（ref定义的基本类型使用watch监听时候不需要.value）

   watch(sum, (newVal, oldValue) => {
        console.log(newVal, oldValue);
   });
  
ref为对象或则数组请加 {deep:true}
 如果不使用第三个参数deep:true， 是无法监听到数据变化的。
可以立即执行回调函数呢？其实使用也很简单， 给第三个参数中设置immediate: true即可

方式二:监多个基本数据类型(ref)

   watch([sum, tips], (newVal, oldValue) => {
      console.log(newVal, oldValue);// [121, 'a']，[78, 'b']监听结果新的值和旧的值都是数组
    });

方式三:监听对象(reactive)，不建议使用

    这种监听方式，在vue3存在问题：（不建议直接监听reactive整个对象）
     1.reactive和ref响应式使用proxy代理无法正确监听并获取对象旧的值（拿到的都是新值）
     2.强制开启深度监听,设置false关闭无效(deep配置无效)

    watch(state,(newVal, oldValue) => {
        console.log(newVal, oldValue);  //{name: '老王', age: 23},{name: '老王', age: 23}
      },
      { deep: false }
    );

方式四:监听对象中某一个属性变化（reactive)，强烈建议使用此方式监听reactive响应对象数据（无坑）

     watch(() => state.count, (newVal, oldValue) => {
          console.log(newVal, oldValue);
       }
     );

方式五:监听对象中某几个属性（reactive)，建议使用

    watch([() => obj.test, () => obj.year], (newVal, oldValue) => {
       console.log(newVal, oldValue);   //得到的是对象
       }