Vue中watch和computed的使用演示
阿新 • • 發佈：2019-01-09
watch的使用
:使用watch 監聽firstName的變化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue1026.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> {{fullName}} </div> </body> <script> new Vue({ el :'#app', data:{ firstName :'itcast', lastName:'heima', fullName :'itcast.heima' }, watch:{ 'firstName':function(newval,oldval){ // console.log(newval,oldval); this.fullName = this.firstName + this.lastName; }, 'lastName':function(newval,oldval){ // console.log(newval,oldval); this.fullName = this.firstName + this.lastName; } } }); </script> </html>
watch監聽路由route的變化
computed的使用:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue221.js"></script> <script src="vue-router231.js"></script> </head> <body> <div id="app"> <router-link to="/login">登入</router-link> <router-link to="/register/itcast">註冊</router-link> <router-view></router-view> </div> </body> <script> // 1.0 準備元件 var App = Vue.extend({}); var login = Vue.extend({ template:'<div><h1>登入</h1></div>' }); var register = Vue.extend({ template:'<div><h1>註冊{{name}}</h1></div>', data:function(){ return { name:'' } }, created:function(){ this.name = this.$route.params.name1; } }); // 2.0 例項化路由規則物件 var router = new VueRouter({ routes:[ {path:'/',redirect:'/login'}, {path:'/login',component:login}, {path:'/register/:name1',component:register} ] }); // 3.0 開啟路由物件 new Vue({ el :'#app', router : router, //開啟路由物件 watch:{ '$route':function(newroute,oldroute){ // console.log(newroute,oldroute); // 將來就可以在這個函式中獲取到當前的路由規則字串是誰了 // 那麼就可以針對一些特定的頁面做一些特定的處理 } } }); </script> </html>
特點:1.計算屬性會依賴於它使用中的data的屬性,只要屬性發生變化,他就將發生變化
2.如果他所依賴的屬性值沒有發生改變,那麼屬性的值就是從快取中取得,而不是重新編譯,那麼效能會更高,所以儘量使用computed代替watch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue1026.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> {{fullName}} </div> </body> <script> new Vue({ el:'#app', data:{ firstName:'heima', lastName:'itcast' }, computed:{ fullName:function(){ return this.firstName + this.lastName; } } }); </script> </html>