區別一：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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。