Vue的watch屬性
Vue的watch屬性可以用來監聽data屬性中數據的變化
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue.min.js"></script> <script src="lib/vue-router-3.0.1.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname" /> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ firstname:"", lastname:"" }, methods:{}, watch:{ firstname:function(){ console.log(this.firstname) } } }) </script> </body></html>可以從上述代碼中實踐得知，輸入框內的值變化多少次，控制臺就會打印多少次
同時還可以直接在監聽的function中使用參數來獲取新值與舊值
watch:{ firstname:function(newValue,OldValue){ console.log(newValue); console.log(OldValue); } }其中第一個參數是新值，第二個參數是舊值
同時Watch還可以被用來監聽路由router的變化，只是這里的監聽的元素是固定的
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue.min.js"></script> <script src="lib/vue-router-3.0.1.js"></script> <style type="text/css"> </style> </head> <body> <div id="app"> <!-- 由于Vue-router的hash匹配原則所以我們需要在原定義的路徑上加一個#號 --><!-- <a href="#/login" rel="external nofollow" >登錄</a> <a href="#/register" rel="external nofollow" >注冊</a>--> <router-link to="/login" tag="span">登錄</router-link> <router-link to="/register">注冊</router-link> <router-view></router-view> </div> </body> <script> var login={ template:'<h1>登錄組件</h1>' } var register={ template:'<h1>注冊組件</h1>' } var routerObj = new VueRouter({ routes:[ //此處的component只能使用組件對象，而不能使用注冊的模板的名稱 {path:"/login",component:login}, {path:"/register",component:register} ] }) var vm = new Vue({ el:'#app', data:{ }, methods:{ }, router:routerObj,//將路由規則對象注冊到VM實例上 watch:{ '$route.path':function(newValue,OldValue){ console.log(newValue); console.log(OldValue); } } }) </script></html>計算屬性Computed的作用
computed屬性的作用與watch類似，也可以監聽屬性的變化
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue.min.js"></script> <script src="lib/vue-router-3.0.1.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname" /> <input type="text" v-model="lastname" /> <input type="text" v-model="fullname" /> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ firstname:"", lastname:"" }, methods:{},/* watch:{ firstname:function(newValue,OldValue){ console.log(newValue); console.log(OldValue); } }*/ computed:{ fullname:function(){ return this.firstname +"-"+this.lastname } } }) </script> </body></html>只是他會根據他依賴的屬性，生成一個屬性，讓vm對象可以使用這個屬性
methods,watch,computed的區別
總結
以上所述是小編給大家介紹的Vue的watch和computed方法的使用及區別介紹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
