計算屬性 computed

偵聽器or觀察者 watch

一直以來對computed和watch一知半解，用的時候就迷迷糊糊的，今天仔細看了看文檔，突然茅塞頓開，原來就是這么簡單啊：

computed，通過別人改變自己

watch，通過自己改變別人

需要注意的是，computed會緩存數據，只有在滿足以下兩個條件時才會重新計算：

1、存在依賴型數據，即存在于VUE的data等對象的實下的實例數據

2、依賴型數據發生改變

如果不滿足以上兩個條件，computed不會重新計算，只會拿緩存的數據。而watch，只要調用他，他就會執行。

注意：computed會緩存數據，所以進行開銷較大的操作時不適合用它。

非依賴型數據發生改變時，這是使用methods方法即可。

computed也可以通過自己改變別人

computed默認只有 getter ，不過在需要時也可以提供一個 setter：

computed: {fullName: {// getterget: function () {return this.firstName ' ' this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}

然后運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。

什么時候使用

computed

1、其他依賴型數據發生改變，自身也要改變的時候

2、自身改變了，想要改變其他數據的時候，這時需要添加setter

watch

1、自身改變時改變其他數據

2、當需要在數據變化時執行異步或開銷較大的操作時

原文地址：https://segmentfault.com/a/1190000012610140

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的vue之computed和watch的全部內容，希望文章能夠幫你解決所遇到的問題。

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