官方文檔中已經(jīng)有對(duì)其的解釋了，在這里把我的理解記錄一下Vue中的methods、watch、computed

computed 的使用場景

• HTML模板中的復(fù)雜邏輯表達(dá)式，為了防止邏輯過重導(dǎo)致不易維護(hù)，都應(yīng)當(dāng)把相關(guān)邏輯放入計(jì)算屬性。

  • 比如這種

    ```<div id="root"> <p>Reversed message: "{{ message.split('').reverse().join('') }}"</p> </div> ```

在這個(gè)地方，模板不再是簡單的聲明式邏輯。這里是想要顯示變量 message 的翻轉(zhuǎn)字符串，而這種包含復(fù)雜邏輯處理的表達(dá)式，都應(yīng)當(dāng)使用計(jì)算屬性。

computed 和 methods 的區(qū)別

1. computed是屬性調(diào)用，而methods是函數(shù)調(diào)用

這意味著在HTML的插值里

• computed定義的方法是以屬性訪問的形式來調(diào)用，如 {{reversedMessageComputed}}
• methods定義的方法，則要加上 () 來調(diào)用，如 {{reversedNameMethod()}} ，否則視圖中會(huì)渲染出如下內(nèi)容
• function () { [native code] }

2. computed帶有緩存功能，而methods不是

這里我引用一下官方文檔的說明

計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。只在相關(guān)依賴發(fā)生改變時(shí)它們才會(huì)重新求值。

&lt;!-- html --&gt; &lt;div id="root"&gt; &lt;p&gt;Reversed message: "{{ reversedNameMethod() }}"&lt;/p&gt; &lt;p&gt;Reversed message: "{{ reversedMessageComputed }}"&lt;/p&gt; &lt;/div&gt;

// javascript var vm = new Vue({el: '#root',data: {name: 'Alex',message: 'Hello'},methods: {reversedNameMethod: function () {return this.name.split('').reverse().join('')}},computed: {// 計(jì)算屬性的 getterreversedMessageComputed: function () {// `this` 指向 vm 實(shí)例return this.message.split('').reverse().join('')}} })

上面的例子中，緩存意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessageComputed 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。而 reversedNameMethod() 方法，每次調(diào)用都會(huì)重新執(zhí)行函數(shù)。

但同時(shí)需要注意，這也同樣意味著下面的計(jì)算屬性將不再更新，因?yàn)?Date.now() 不是響應(yīng)式依賴：

// javascript computed: {now: function () {return Date.now()} }

now 的值將在Vue實(shí)例化時(shí)生成，并且不再改變。
相比之下，每當(dāng)觸發(fā)重新渲染時(shí)，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)。

computed其他說明

• computed 和 methods 不可以重名

  • Vue會(huì)把 methods 和 data 里的東西，全部代理到Vue生成的對(duì)象中，這會(huì)將computed中重名屬性覆蓋

來源：https://segmentfault.com/a/1190000017920016

轉(zhuǎn)載于:https://www.cnblogs.com/lalalagq/p/10283157.html

總結(jié)

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

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