1.計算屬性Computed

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

<!-- 復(fù)雜運算 --> <div>{{message.split('').reverse().join('')}}</div> <!-- 計算屬性代替復(fù)雜運算 --> <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 + '現(xiàn)在我用的是methods'} }, computed: {computedTest() {return this.message + '現(xiàn)在我用的是computed'} } })

在官方文檔中，強調(diào)了computed區(qū)別于method最重要的兩點:

1 . computed是屬性調(diào)用，而methods是函數(shù)調(diào)用
2 . computed帶有緩存功能，而methods不會被緩存

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

所以，官方文檔才反復(fù)強調(diào)對于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計算屬性

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

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

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

watch

• watch
  Vue的watch屬性可以用來監(jiān)聽data屬性中數(shù)據(jù)的變化

<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>

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

同時還可以直接在監(jiān)聽的function中使用參數(shù)來獲取新值與舊值

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

其中第一個參數(shù)是新值，第二個參數(shù)是舊值

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

<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,//將路由規(guī)則對象注冊到VM實例上watch:{'$route.path':function(newValue,OldValue){console.log(newValue);console.log(OldValue);}} }) </script>

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

methods,watch,computed的區(qū)別

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

計算屬性的getter與Setter

計算屬性默認(rèn)只有g(shù)et，在需要的時候也可以設(shè)置set方法

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。