【深入vue2/3 选项api】watch 监听的使用与解释

vue2和vue3的 watch:{} 没变化，以下都适用。

类型：{ [key: string]: string | Function | Object | Array}

本章内容：概念、监听基本数据类型、引用数据类型、监听的4种写法、监听的5种模式。

概念：

1. 一个对象，键是要侦听的响应式 property——包含了 data 或 computed property，而值是对应的回调函数。值也可以是方法名，或者包含额外选项的对象。
2. 缓冲回调：缓冲回调不仅可以提高性能，还有助于保证数据的一致性。在执行数据更新的代码完成之前，侦听器不会被触发。简单来说，同步修改数据时，修完操作执行完毕后才会触发回调。注意是同步！所以异步操作的时候，要注意多次触发watch的问题。（所有同步操作为1次，异步操作有几次就触发多少次监听！！）

重点内容：监听的数据类型 、监听对象的几种形式、深度监听deep 、监听模式flush

watch:{}的6个使用方式

export default {
  data(){
    return {
      watch:{
        data1:{
          name1:'name1',
          name2:'name2',
        },
        data2:'data2的数据'
      },
      direct:'',
      watchData:{
        d1:'watch - d1',
        d2:{
          d21:'watchData.d2.d21'
        },
        immediateData:'immediate数据',
      },
    }
  },
  methods:{
    changeData(){
      this.watch.data1.name1 = 'name1(修改后)'
      this.watch.data1.name2 = 'name2(修改后 1)'
      this.watch.data1.name2 = 'name2(修改后 2)'
      this.watch.data2 = '同步'
      setTimeout(() => {
        this.watch.data2 = '异步修改data2'
      }, 0);
    },
    strFn(){}
  },
  watch:{
    watch:{
      handler(n,o){
        // 缓冲回调特性
        // 只会打印2次~
        console.log(n,o);
      },deep:true
    },

    //使用方式1： 直接监听，适用于基本数据类型
    direct(newVal,oldVal){
      console.log(newVal,oldVal);
    },

    //使用方式2： 监听嵌套对象内的某个属性
    // 注意点：根据这属性的值是否引用类型，注意是否加deep
    'watchData.d2.d21':{
        handler(newval,oldval){
            console.log(newval,oldval);
        }
    },

    //使用方式3： 键值对，key是监听对象，value是实例的方法，这里直接引用作为监听回调
    'watchData.d1':'strFn',

    //使用方式4： watchArr为监听对象，[]内的各个函数则是 监听触发的callback
    direct:[
      'strFn',
      function (newVal,oldVal) {
        console.log(newVal,oldVal);
      },
    ],

    //使用方式5：初次立即执行，常见用在父传子，子watch监听的时候，如果父组件有默认数据传入，子组件 watch 则需要设置 immediate:true
    'watchData.immediateData':{
      handler(n,o){
        // 初次 oldVal 会为空，(理所应当)
        console.log('watch绑定立即执行：immediate;',n,o);
      },
      immediate:true
    },

    //使用方式6：第三个参数的详细解析。
    watchData:{
        // 直接监听最外层对象的坑：如果修改watchData.d1, 正常是不会触发监听的，修改整个watchData才会触发。因为这是引用类型的存储机制问题！不是修改的对象/数组本身，而是他里面的属性。
      handler(n , o){
        console.log('最外层数组直接就监听',n , o);
      }
      ,deep:true
      // 需要触发深层修改的监听，则加个deep，这样不管修改内部哪一层级的，都会触发该监听修改
      ,flush:'pre' // 'pre' | 'post' | 'sync'  // 默认值是'pre'
      // pre 模式下，指定的回调在模板渲染前被调用，所以立马获取对应的内容，将不会是最新的！！
      // post 模式下，将回调推迟到模板渲染之后的，这时候用$ref获取对应内容则会是最新的，等于 pre 模式下用 nextTice()
      // sync 就不多说了，回调改为同步调用，即取消 <缓冲回调> 这个功能
      // 'pre' 和 'post' 回调使用队列进行缓冲，这也是为什么<同步>多次修改后，只触发最后一次监听回调的原因。
    }
  }
}

其他vue3 选项式api、组合式api、全局/应用api学习经验分享

vue3 学习资料vue3学习资料记录，经验交流、分享https://oumae-kumiko.github.io/vue3.cn.community/