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

computed 的使用場景

• HTML模板中的復雜邏輯表達式，為了防止邏輯過重導致不易維護，都應當把相關邏輯放入計算屬性。

  • 比如這種

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

在這個地方，模板不再是簡單的聲明式邏輯。這里是想要顯示變量 message 的翻轉字符串，而這種包含復雜邏輯處理的表達式，都應當使用計算屬性。

computed 和 methods 的區(qū)別

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

這意味著在HTML的插值里

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

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

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

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

&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: {// 計算屬性的 getterreversedMessageComputed: function () {// `this` 指向 vm 實例return this.message.split('').reverse().join('')}} })

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

但同時需要注意，這也同樣意味著下面的計算屬性將不再更新，因為 Date.now() 不是響應式依賴：

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

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

computed其他說明

• computed 和 methods 不可以重名

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

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

轉載于:https://www.cnblogs.com/lalalagq/p/10283157.html

總結

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

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