第一個淺度監聽：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{a}}</p> <p>{{b}}</p> </div> <script> var vm=new Vue({ el:"#app", data:{ a:10, b:15 } }); vm.$watch("a",function(){ alert('a變化了'); this.b=100; }); document.onclick=function(){ vm.a=2 } </script> </body></html>第二個深度監聽
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{a|json}}</p> <p>{{b}}</p> </div> <script> var vm = new Vue({ el: "#app", data: { a: { id: "1", title: "width" }, b: 15 } }); vm.$watch("a", function() { alert('a變化了'); this.b = 100; }, { deep: true }); document.onclick = function() { vm.a.id = "2"; } </script> </body></html>ps：下面看下vue中watch用法
對應一個對象，鍵是觀察表達式，值是對應回調。值也可以是方法名，或者是對象，包含選項。在實例化時為每個鍵調用 $watch() ;
//使用官方vue-cli腳手架書寫<template> //觀察數據為字符串或數組 <input v-model="example0"/> <input v-model="example1"/> /當單觀察數據examples2為對象時，如果鍵值發生變化，為了監聽到數據變化，需要添加deep:true參數 <input v-model="example2.inner0"/></template><script> export default { data(){ return { example0:"", example1:"", example2:{ inner0:1, innner1:2 } } }, watch:{ example0(curVal,oldVal){ console.log(curVal,oldVal); }, example1:'a'，//值可以為methods的方法名 example2:{ //注意：當觀察的數據為對象或數組時，curVal和oldVal是相等的，因為這兩個形參指向的是同一個數據對象 handler(curVal,oldVal){ conosle.log(curVal,oldVal) }, deep:true } }, methods:{ a(curVal,oldVal){ conosle.log(curVal,oldVal) } } }</script>新聞熱點
疑難解答
