Vue例項方法 $watch
阿新 • • 發佈：2018-11-01
可能會經常遇到這樣的問題，怎麼監視資料的變化，當資料發生變化的時候，要做一些事情該如何實現，其實不用擔心，Vue有一個方法來解決這個問題：
vm.$watch(data,callback,[option]):監視資料的變化，當資料發生變化的時候，執行callback函式，這裡的callback函式可以接受兩個引數newValue和oldValue作為改變後（前）資料的值，還有option選項，其實就是一個物件{deep:true(false)}，用來決定是否深度監視（當監視資料物件的時候用到）。
當然監視的資料可以分為基本資料和引用型別的資料（物件資料），對於兩者用法大體上一樣，但是還是有些區別：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Vue-$watch</title> <style type="text/css" media="screen"> [v-cloak]{ display: none; } </style> </head> <body> <div id="container" v-cloak> <h3>{{user.name}}</h3> <h3>{{dog}}</h3> <button type="button" @click="alert1">彈出警告框</button> <button @click="changeGenerData">改變名字</button> <button type="button" @click="changeUserData">改變User</button> <input type="text" name="da" v-model = "user.age"> </div> <script type="text/javascript" src="../dist/vue.min.js"></script> <script type="text/javascript"> var app = new Vue({ el:"#container", data:{ user:{ name:'張三', age:34, }, dog:"金毛" }, methods:{ alert1:function(){ alert(1) }, changeGenerData:function(){ this.dog = "哈士奇" }, changeUserData:function(){ this.user.age = 45 } }, watch:{ //用法一，監視普通的資料 //方式二，使用Vue例項中的watch選項： dog:function(newValue,oldValue){ alert("dog資料發生了變化！"); console.log(newValue); console.log(oldValue) }, //用法二，監視物件資料 //方式二，使用Vue例項中的watch選項： user:{ //要做的事情handler選項 handler:function(newValue,oldValue){ console.log("資料物件user被改變了!") }, // 是否深度監視 deep:true } } }) // vm.$watch(data,callback,[options]), // 用法一，監視普通的資料 //方式一，使用Vue例項的$watch()方法： app.$watch("dog",function(newValue,oldValue){ alert("dog資料發生了變化！"); console.log(newValue); console.log(oldValue) }) //用法二，監視物件資料 //方式一，使用Vue例項的$watch()方法 app.$watch("user",function(newValue,oldValue){ console.log("資料物件user被改變了") console.log(newValue.age)//45 console.log(oldValue.age)//45 //資料物件user確實發生了改變，而在監視一般資料的時候newValue,oldValue分別代表的是改變後（前）的值 //那麼為什麼這裡得到的都是改變後的值呢？原因是雖然user發生了改變（屬性變了），但是user是一個引用型別的值，newValue,oldValue都儲存的是一個指標，指向user的引用，當user發生改變的時候指標的指向沒有發生變化，所以此時newvalue和oldVaule的值是一樣的 },{deep:true}) </script> </body> </html>