1.計(jì)算屬性Computed

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

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

2 . Computed 與 methods 對(duì)比

我們可以使用方法達(dá)到和計(jì)算屬性同樣的效果

<!--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'} } })

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

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

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

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

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

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

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

watch

• watch
  Vue的watch屬性可以用來(lái)監(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>

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

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

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

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

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

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

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

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

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

計(jì)算屬性的getter與Setter

計(jì)算屬性默認(rèn)只有g(shù)et，在需要的時(shí)候也可以設(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的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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