Vue 组件中5种Watch方式的使用 # 侦听 / 回调函数 / 对象属性监听

Vue 组件中5种Watch方式的使用

---

解释

watch是一个对象，这个对象的键是需要观察的表达式，值可以是直接方法、方法名、包含选项的对象等等，Vue实例会在实例化时调用$watch(), 遍历watch对象的每一个属性，并且观察。

注意，本文不会阐述watch对象的具体实现源码，只是介绍watch对象键值的五种使用方式。

---

格式：

watch {
   
	{
    [key: string]: string | Function | Object | Array }
}

---

使用方式：

1. 最直接的，直接用方法作为回调函数（或者说作为值）。

   // 我们用vue的v-model指令来验证下watch对象的功能
   <div>
     <p>{
       {msg}}</p>
     <input v-model="msg">
   </div>
   

   // pattern1 directly method value
   watch {
        
       // msg1 为表达式， function(oldVal, newVal)为匿名函数，作为回调函数
       msg1: function (newVal, oldVal) {
        
           console.log("oldVal is: " + oldVal + " newVal is: " + newVal);
       }
   }
   

   在双向绑定输入框输入一些值后，看console里watch对象的效果：

   // 初始值为init，输入init1之后的console输出
   oldVal is: init newVal is: init1
   

   注意，回调函数的第一个参数是新的值，第二个是旧的值。

2. 函数名作为值

   // 同样用v-model验证效果
   <div>
     <p>{
       {msg2}}</p<