普通监听和对数组或者对象的深度监听：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} <br /> <input v-model="message"> <br /> <input v-model="a"> <br /> <input v-model="obj.age"> <br /> <input v-model="bh"> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', a:1, obj:{ name:'gr', age:18 }, bh:'' }, methods: { // details: function () { // return this.site + " - 学的不仅是技术，更是梦想！"; // } }, watch: { //普通的watch监听 a(val, oldVal){ console.log("a: "+val); this.bh=+val+(+this.obj.age) }, 'obj.name':{ handler(newname){ console.log("变化后的值： "+newname); }, }, //深度监听，可监听到对象、数组的变化 obj:{ handler(val){ console.log("变化前后的值： "+val.age, '---',val); }, deep:true, //true 深度监听 immediate: true //声明后立刻调用 } // 无法监听 // obj(val, oldVal){ // console.log(val,oldVal); // } }, }) </script> </html>说明：
watch和computed各自处理的数据关系场景不同 : watch擅长处理的场景：一个数据影响多个数据 computed擅长处理的场景：一个数据受多个数据影响method和computed触发条件不同 :computed只提供了缓存的值，而没有重新计算 只有符合： 1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。 而methods下的数据，是每次都会进行计算的