1.data和computed的區(qū)別
1.data屬性不會隨著賦值屬性的改動而改動（賦值屬性類似 num：obj.num 直接賦值：num：3333）
2.computed屬性屬于持續(xù)變化跟蹤。在computed屬性定義的時候沮协，這個computed屬性就與給它賦值的變量綁定了祖秒。改變這個賦值變量氯檐，computed屬性值會隨之改變训挡。
<template>
<div class>
<h2>這是data中的num:{{ num1 }}</h2>/* 不會遞增 */
<h2>這是computed中的num:{{ num2 }}</h2> /* 會遞增 */
<button @click="changeNum">點擊改變obj.num</button>
</div>
</template>
<script>
let obj = {
num: 2
};
export default {
data() {
return {
num1: obj.num,
t: obj //這一句一定要，這樣組卷復(fù)用的時候num2共享狀態(tài)赊舶。沒有這句派任，computed中的num2也不跟蹤狀態(tài)。
};
},
computed: {
num2() {
return obj.num;
}
},
methods: {
changeNum() {
++obj.num;
console.log(obj.num);
}
}
};
</script>
2.computed和method的區(qū)別
- 區(qū)別一：
computed調(diào)用是屬性調(diào)用悉罕，不需要加括號赤屋，
methods是函數(shù)調(diào)用，需要加括號
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Reversed message: "{{ reversedMessage2() }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
- 區(qū)別二：
computed是 當(dāng)下次所依賴的函數(shù)沒有發(fā)生改變時壁袄，再次調(diào)用時类早，會從緩存中讀取數(shù)據(jù)；
methods是 沒有緩存存數(shù)據(jù)嗜逻，每次調(diào)用每次執(zhí)行涩僻，無論值有沒有改變
- 優(yōu)缺點
兩種方式的最終結(jié)果確實是完全相同的。然而栈顷，不同的是計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的逆日。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。這就意味著只要 message 還沒有發(fā)生改變萄凤，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結(jié)果室抽，而不必再次執(zhí)行函數(shù)。
我們?yōu)槭裁葱枰彺婷遗考僭O(shè)我們有一個性能開銷比較大的計算屬性 A坪圾，它需要遍歷一個巨大的數(shù)組并做大量的計算。然后我們可能有其他的計算屬性依賴于 A惑朦。如果沒有緩存兽泄，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存漾月，請用方法來替代病梢。
