Vue组件中5个Watch方法的使用说明watch是一个对象，其key是一个需要观察的表达式，而值可以是直接的方法、方法名、包含选项的对象等。Vue实例在实例化时会调用$watch()，遍历watch对象的各个属性，进行观察。注意，本文不会讲解watch对象的具体实现源码，只介绍watch对象key值的五种使用方式。格式：watch{{[key:string]:string|函数|对象|Array}}用法：最直接的方法是直接将方法作为回调函数（或作为值）使用。//我们直接使用vue的v-model命令来验证watch对象的功能
//pattern1methodvaluewatch{//msg1是一个表达式，function(oldVal,newVal)是一个匿名函数，作为回调函数msg1:function(newVal,oldVal){console.log("oldValis:"+oldVal+"newValis:"+新值);}}在双向绑定输入框中输入一些值后，在控制台看到watch对象的效果：//初始值为init，init1后控制台输出为：initnewVal为：init1注意即回调函数第一个参数是新值，第二个是旧值。Functionnameasvalue//同样使用v-model验证效果
//pattern2usefunctionnameasvaluewatch{msg2:"methodway"}methods:{methodway(newVal,oldVal){console.log("oldValis:"+oldVal+"newValis:"+newVal);}}consoleoutput://初始值为init，输入init1后，控制台输出oldVal为：initnewVal为：init1当观察key为对象/数组时，需要添加选项deep。当我们观察的对象是对象/数组时，我们改变对象内部属性的值。用通常的手表方法是捕捉不到的。因为对于数组，对象本身，它并没有改变。这时候需要加上选项deep:true
如果你使用通常的方法，改变msg3Attr1属性值，手表不会有反应。需要添加深度选项：watch{msg3:{handler:function(newVal,oldVal){console.log("oldValis:"+oldVal+"newValis:"+newVal);},//添加这个选项后，无论嵌套多深，一旦被观察对象的属性发生变化，都会响应deep:true}}但是这里的一个输出有问题，虽然可以捕捉到改变对象，会发现oldVal和newVal是一样的，控制台输出：//对象回调函数，oldVal和newVal是一致的oldValis:{"attr1":"123","attr2":"2"}newValis:{"attr1":"123","attr2":"2"}也就是说，虽然我们可以捕捉到变化，但是我们无法从watch对象中的回调中准确捕捉到变化的属性。如果我们要这样做，我们可以单独观察对象的一个??属性msg3.attr1或者使用computed作为中间层来观察。//computed作为中间层，注意不需要额外写观察层，可以直接观察属性computed:{msg3attr(){returnthis.msg3.attr1;}}watch{msg3attr:function(newVal,oldVal){console.log("oldValis:"+oldVal+"newValis:"+newVal);}}这样，可以观察到属性值的变化：oldVal是："12"newVal是："123"实例化后立即回调我们有时会要求Vue对象实例化后立即回调a的key值观察对象。这时候你只需要添加一个选项immediate:true
watch{msg4:{handler(newVal,oldVal){console.log("这应该立即调用。");},//添加immediate选项后，实例化后立即回调一次immediate:true},}consoleoutput://注意我们没有改变input的值，实例化后立即回调。这应该立即调用。回调函数数组如果我们有多个回调函数要执行，我们可以将Watch的值赋值给一个数组，数组中的函数会被一个一个调用。
watch{msg5:["methodchain1",functionmethodchain2(oldVal,newVal){console.log(“第二种方法”）；},{handler(newVal,oldVal){console.log("第三种方法")},deep:true}]},methods:{methodchain1(newVal,oldVal){console.log("第一种方法");}}当msg5改变时，控制台输出：//回调函数被一个一个调用firstmethodsecondmethodthirdmethod值得一提的是，在watch对象中，有时key是可以省略的，我们直接使用key的名字作为回调函数名也能正常观察到表达式的变化。
watch{//直接用表达式作为回调函数名，效果和msg一样(newVal,oldVal){console.log("oldVal是："+oldVal+"newVal是："+newVal);}}consoleoutput:oldValis:initnewValis:1需要注意的是Watch对象中的回调函数不能使用箭头函数定义，会导致上下文混淆，这样会指向错误的上下文。以上就是在组件中使用回调函数的五种方式。欢迎点赞、评论、收藏。
