一、什么是watch
watch:用于监听data里面的数据是否被修改，一旦修改就可以执行一些其他的操作【也是方法】
二、解析watch
watch在监听的时候，可以有二次参数，第一次参数为更新的数据，第二个参数为之前的旧数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../public/js/vue.min.js"></script> </head> <body> <div id="app"> <h1>{{text}}</h1> <button @click="text = '我是新的一'">监听</button> </div> </body> </html> <script> new Vue({ el: '#app', data: { text: '我是旧一', }, watch: { //监听器的作用就是用来监听数据是否发生了变化，变化后可以进行一些其他操作 //只要没有发生变化，就没有办法进行其他的操作 text: function (newData, oldData) { //newData是更新后的数据 //oldData是旧数据 console.log(newData, oldData) this.text = '我是最新的一' } } }) </script>
三、watch和计算属性的区别
计算属性和监听属性的不同
1.计算属性的get必须有return，而监听属性return可有可无
2.计算属性具有缓存的效果，而监听属性没有缓存
3.计算属性可以自定义名称，而监听属性只能监听和data里面的名称相同
4.计算属性适用于复杂的运算，而监听属性适合一些消耗性功能，比如Ajax
四、watch高级
当使用watch监听的时候，我们可能会发现它可以监听某个数据【单数据，数组】，但是当监听对象的时候，明明数据修改了，却没有监听的提示，这是为什么呢？
这个时候，需要我们开启深度监控，因为在我们没有开启深度监控的时候，watch只会监听第一层，而对象的数据修改了，但对象它的首地址没有修改，所以watch判定它没有发生数据的变化，从而监听不到
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../public/js/vue.min.js"></script> </head> <body> <div id="app"> <h1>{{text}}</h1> <button @click="setHandel">监听</button> <h1>{{array}}</h1> <button @click="setArray">更改数组的值</button> </div> </body> </html> <script> new Vue({ el: '#app', data: { text:{ name:'我的一', age:21 }, array: [1,2,3,4,5] }, methods:{ setHandel(){ this.text.name = '我是新的一' }, setArray(){ /** * 当我们想要更改数组中的值的时候， * this.array[0] = '我是新一',是没有办法修改的 * 因为vue的数据双向绑定中，调用的是set和get函数， * 但是在数组里面没有这二个函数 * 所以我们只能使用vue封装的$set和变异方法（也就是push啊。。。） */ this.$set(this.array,0,'我是新一') } }, watch: { //watch监听器，只能监听第一次， //也就是在监听对象的时候，虽然对象中的属性值发生了改变 //但对象的首地址没有改变，所以监听器认为没有改变数据 //当想要监听对象的时候，想要开启深度监听 //deep:true text: { handler:function () { alert('监听到了') }, deep:true } } }) </script>
