本篇文章帶給大家的內容是關於Vue.js中computed和methods之間有什麼差別？ （附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
官方文件中已經有對其的解釋了，在這裡把我的理解記錄一下。
computed 的使用場景
HTML模板中的複雜邏輯表達式，為了防止邏輯過重導致不易維護，都應當把相關邏輯放入計算屬性。
例如這種
<div id="root">
<p>Reversed message: "{{ message.split('').reverse().join('') }}"</p>
</div>在這個地方，模板不再是簡單的宣告式邏輯。這裡是想要顯示變數 message 的翻轉字串，而這個包含複雜邏輯處理的表達式，都應使用計算屬性。
computed 和methods 的區別
1. computed是屬性調用，而methods是函數調用
這意味著在HTML的插值裡
computed定義的方法是以屬性存取的形式來調用，如{{reversedMessageComputed}}
methods定義的方法，則要加上() 來調用，如{{reversedNameMethod() }} ，否則視圖中會渲染出如下內容
function () { [native code] }
2. computed帶有快取功能，而methods不是
#這裡我引用一下官方文件的說明
計算屬性是基於它們的依賴進行快取的。只有在相關依賴發生改變時它們才會重新求值。
<!-- html -->
<div id="root">
<p>Reversed message: "{{ reversedNameMethod() }}"</p>
<p>Reversed message: "{{ reversedMessageComputed }}"</p>
</div>// javascript
var vm = new Vue({
el: '#root',
data: {
name: 'Alex',
message: 'Hello'
},
methods: {
reversedNameMethod: function () {
return this.name.split('').reverse().join('')
}
},
computed: {
// 计算属性的 getter
reversedMessageComputed: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})上面的範例中，快取意味著只要 message 還沒有改變，多次存取 reversedMessageComputed 計算屬性會立即傳回先前的計算結果，而不必再執行函數。而 reversedNameMethod() 方法，每次呼叫都會重新執行函數。
但同時需要注意，這也同樣意味著下面的計算屬性將不再更新，因為Date.now() 不是響應式依賴：
// javascript
computed: {
now: function () {
return Date.now()
}
}now 的值將在Vue實例化時生成，並且不再改變。
相較之下，每當觸發重新渲染時，呼叫方法將總是會再次執行函數。
computed其他說明
computed 和methods 不可以重名
Vue會把methods 和data 裡的東西，全部代理到Vue產生的物件中，這會將computed中重名屬性覆蓋
以上是Vue.js中computed和methods之間有什麼區別？ （附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
