1.計算屬性Computed

模板內使用js表達式是很方便的，設計的目的只是為了簡單運算。在模板中放入太多的邏輯會讓模板過重且難以維護。所以，對于任何復雜邏輯，你都應當使用計算屬性。

<!-- 復雜運算 --> <div>{{message.split('').reverse().join('')}}</div> <!-- 計算屬性代替復雜運算 --> <div>{{reverseMessage}}</div> computed: { <!-- 計算屬性的getter --> reverseMessage: function () {return this.message.split('').reverse().join(''); } }

2 . Computed 與 methods 對比

我們可以使用方法達到和計算屬性同樣的效果

<!--HTML部分--> <div id="app"> <h1>{{message}}</h1> <p class="test1">{{methodTest}}</p > <p class="test2-1">{{methodTest()}}</p > <p class="test2-2">{{methodTest()}}</p > <p class="test2-3">{{methodTest()}}</p > <p class="test3-1">{{computedTest}}</p > <p class="test3-2">{{computedTest}}</p > </div><!--script部分--> let vm = new Vue({ el: '#app', data: {message: '我是消息，' }, methods: {methodTest() {return this.message + '現在我用的是methods'} }, computed: {computedTest() {return this.message + '現在我用的是computed'} } })

在官方文檔中，強調了computed區別于method最重要的兩點:

1 . computed是屬性調用，而methods是函數調用
2 . computed帶有緩存功能，而methods不會被緩存

屬性調用：
1 .computed定義的方法我們是以屬性訪問的形式調用，{{computedTest}}
2 .methods定義的方法，我們必須要加上()來調用，{{methodTest()}}
緩存功能：
計算屬性具有緩存：只有當計算屬性所依賴的屬性發生改變時，才會重新去計算
methods不會被緩存：方法每次都會去重新計算結果。
緩存好處：
相比大家都知道HTTP緩存，其核心作用就是對一些服務端未更新的資源進行復用，避免一些無謂的請求，優化了用戶的體驗
對于computed也是一樣的：
在上面的例子中，methods定義的方法是以函數調用的形式來訪問的，那么test2-1,test2-2,test2-3是反復地將methodTest方法運行了三遍，如果我們碰到一個場景，需要1000個methodTest的返回值，那么毫無疑問，這勢必造成大量的浪費
更恐怖的是，如果你更改了message的值，那么這1000個methodTest方法每一個又會重新計算。。。。

所以，官方文檔才反復強調對于任何復雜邏輯，你都應當使用計算屬性

computed依賴于data中的數據，只有在它依賴數據發生改變` `時computd屬性才會重新計算

如上例，在Vue實例化的時候，computed定義computedTest方法會做一次計算，返回一個值，在隨后的代碼編寫中，只要computedTest方法依賴的message數據不發生改變，computedTest方法是不會重新計算的，也就是說test3-1,test3-2是直接拿到了返回值，而非是computedTest方法重新計算的結果。

這樣的好處也是顯而易見的，同樣的，如果我們碰到一個場景，需要1000個computedTest的返回值，那么毫無疑問，這相對于methods而言，將大大地節約內存
哪怕你改變了message的值，computedTest也只會計算一次而已。
備注：
1 . computed其實是既可以當做屬性訪問也可以當做方法訪問
2 . computed的由來還有一個重要原因，就是防止文本插值中邏輯過重，導致不易維護

watch

• watch
  Vue的watch屬性可以用來監聽data屬性中數據的變化

<div id="app"><input type="text" v-model="firstname" /> </div> <script type="text/javascript">var vm = new Vue({el:"#app",data:{firstname:"",lastname:""},methods:{},watch:{firstname:function(){console.log(this.firstname)}}}) </script>

可以從上述代碼中實踐得知，輸入框內的值變化多少次，控制臺就會打印多少次

同時還可以直接在監聽的function中使用參數來獲取新值與舊值

watch:{firstname:function(newValue,OldValue){console.log(newValue);console.log(OldValue);}}

其中第一個參數是新值，第二個參數是舊值

同時Watch還可以被用來監聽路由router的變化，只是這里的監聽的元素是固定的

<div id="app"><!--由于Vue-router的hash匹配原則所以我們需要在原定義的路徑上加一個#號--> <!-- < a href=" " rel="external nofollow" >登錄</ a>< a href="#/register" rel="external nofollow" >注冊</ a>--><router-link to="/login" tag="span">登錄</router-link><router-link to="/register">注冊</router-link><router-view></router-view> </div> </body> <script> var login={template:'<h1>登錄組件</h1>' } var register={template:'<h1>注冊組件</h1>' } var routerObj = new VueRouter({routes:[//此處的component只能使用組件對象，而不能使用注冊的模板的名稱{path:"/login",component:login},{path:"/register",component:register}] }) var vm = new Vue({el:'#app',data:{},methods:{},router:routerObj,//將路由規則對象注冊到VM實例上watch:{'$route.path':function(newValue,OldValue){console.log(newValue);console.log(OldValue);}} }) </script>

watch是觀察某一個屬性的變化，重新計算屬性值。computed是通過所依賴的屬性的變化重新計算屬性值。在這里插入代碼片
大部分情況下watch和computed幾乎沒有差別。但如果要在數據變化的同時進行異步操作或者是比較大的開銷，那么watch為最佳選擇。

methods,watch,computed的區別

1 . computed 屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用；
2 . methods 方法表示一個具體的操作，主要書寫業務邏輯；
3 . watch 一個對象，鍵是需要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作；可以看作是 computed 和 methods 的結合體；

計算屬性的getter與Setter

計算屬性默認只有get，在需要的時候也可以設置set方法

fullName: { get: function () {return this.firstName + " " + this.lastName; }, set: function (val) {this.firstName = val.split(' ')[0];this.lastName = val.split(' ')[1]; } }

總結

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

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