vue 计算属性和data_vue之watch和计算属性computed
區別一：watch監聽的是一個變量(或者一個常量)的變化，這個變量可能是一個單一的變化也可能是一個數組。computed可以監聽很多個變量，但是這個變量一定是vue實例里面的。
Vue 測試實例 - 菜鳥教程(runoob.com)msg:{{ msg }}
another:{{ another }}
{{msg1}}
var vals='sddss';
var app=new Vue({
el: '#app',
data: {
msg:'hello vue',
another:'another hello'
},
watch:{
msg:function(newval,oldval){
console.log('newval is:'+newval);
console.log('oldval is:'+oldval);
}
},
computed:{
msg1:function(){
return 'ss:'+this.msg+','+this.another+vals;
}
}
});
vals='watch!';//值改變了，computed未改變//因為vals不是Vue實例，下面通過定時器改變實例中變量的值，從而改變computed中vals的值
setTimeout(function(){
app.msg='wushijie!'
},3000);
computed是在HTML DOM加載后馬上執行的，如賦值；而methods則必須要有一定的觸發條件才能執行，如點擊事件；
watch和computed均可以監控程序員想要監控的對象，當這些對象發生改變之后，可以觸發回調函數做一些邏輯處理。
一、計算屬性computed的特點
computed是計算屬性，實時響應的，計算屬性會依賴于他使用的data中的屬性，只要是依賴的屬性值有改變，則自動重新調用一下計算屬性；
如果他所依賴的這些屬性值沒有發生改變，那么計算屬性的值是從緩存中來的，而不是重新編譯，那么性能要高一些，所以vue中盡可能使用computed替代watch。
{{fullName}}
new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'vue'
},
computed: {
fullName: function() {
return this.firstName + this.lastName;
}
}
});
注意：data中不用聲明fullName；
監聽computed路由變化，發現不可行。
二、watch監控自身屬性變化
{{fullName}}
new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
fullName: 'hello'
},
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;
}
}
});
一、watch監控路由對象
登錄
注冊
//1.0 準備組件
// var App = Vue.extend({});
var login = Vue.extend({
template: '
登錄
'});
var register = Vue.extend({
template: '
注冊{{name}}
',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);
//可以在這個函數中獲取到當前的路由規則字符串是什么
//那么就可以針對一些特定的頁面做一些特定的處理
}
}
})
但其實watch干我這個事有點屈才了，watch真正強在他可以在數據變化時做一些異步處理或者開銷大的操作，這是computed所不能及的。
vue watch和computed的使用場景
watch 監聽某個數據的變化(監聽完調用什么函數) 一個數據影響多個數據 (比如：瀏覽器自適應、監控路由對象、監控自身屬性變化)
computed 計算后返回新 一個數據受多個數據影響(比如：計算總價格、過濾某些數據)
computed是用來處理你使用watch和methods的時候無法處理(比如有緩存的時候監聽不了數據變化)，或者是處理起來并不太恰當的情況的，利用computed處理methods存在的重復計算情況
總結
以上是生活随笔為你收集整理的vue 计算属性和data_vue之watch和计算属性computed的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 格式化json_在Spring Boot
- 下一篇： 布尔运算_实例解析！布尔运算运用技巧！