一、什么是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不同于计算属性
四、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>