vue2.0中的watch和計算屬性computed
阿新 • • 發佈：2017-12-20
str rect register rst 定向 one 特點 created doc
watch和computed均可以監控程序員想要監控的對象，當這些對象發生改變之後，可以觸發回調函數做一些邏輯處理
watch監控自身屬性變化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <input type="text" v-model="firstName" /> <input type="text" v-model="lastName" />
{{fullName}} </div> <script> new Vue({ el: ‘#app‘, data: { firstName: ‘hello‘, lastName: ‘vue‘, fullName:‘hello.ve‘ }, 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> </body> </html>
watch監控路由對象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/login">登錄</router-link> <router-link to="/register/value">註冊</router-link> <!--組件的顯示占位域--> <router-view></router-view> </div> <script> //1.0 準備組件 var App = Vue.extend({}); var login = Vue.extend({ template: ‘<div><h3>登錄</h3></div>‘ }); var register = Vue.extend({ template: ‘<div><h3>註冊{{name}}</h3></div>‘, data: function() { return { name: ‘‘ } }, created: function() { this.name = this.$route.params.name; } }); //2.0 實例化路由規則對象 var router = new VueRouter({ routes: [{ path: ‘/login‘, component: login }, { path: ‘/register/:name‘, component: register }, { path: ‘/‘, //當路徑為/時，重定向到/login redirect: ‘/login‘ } ] }); //3.0 開啟路由對象 new Vue({ el: ‘#app‘, router: router, //開啟路由對象 watch: { ‘$route‘: function(newroute, oldroute) { console.log(newroute, oldroute); //可以在這個函數中獲取到當前的路由規則字符串是什麽 //那麽就可以針對一些特定的頁面做一些特定的處理 } } }) </script> </body> </html>
計算屬性computed的特點
- 計算屬性會依賴於他使用的data中的屬性，只要是依賴的屬性值有改變，則自動重新調用一下計算屬性；
- 如果他所依賴的這些屬性值沒有發生改變，那麽計算屬性的值是從緩存中來的，而不是重新編譯，那麽性能要高一些，所以vue中盡可能使用computed替代watch。
案例演示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <input type="text" v-model="firstName" /> <input type="text" v-model="lastName" /> {{fullName}} </div> <script> new Vue({ el: ‘#app‘, data: { firstName: ‘hello‘, lastName: ‘vue‘ }, computed: { fullName: function() { return this.firstName + this.lastName; } } }); </script> </body> </html>
vue2.0中的watch和計算屬性computed