1.data和computed的區(qū)別

1.data屬性不會(huì)隨著賦值屬性的改動(dòng)而改動(dòng)（賦值屬性類似 num：obj.num 直接賦值：num：3333）

2.computed屬性屬于持續(xù)變化跟蹤。在computed屬性定義的時(shí)候，這個(gè)computed屬性就與給它賦值的變量綁定了。改變這個(gè)賦值變量，computed屬性值會(huì)隨之改變。

<template>
  <div class>
    <h2>這是data中的num:{{ num1 }}</h2>/* 不會(huì)遞增  */
    <h2>這是computed中的num:{{ num2 }}</h2> /* 會(huì)遞增  */
    <button @click="changeNum">點(diǎn)擊改變obj.num</button>
  </div>
</template>
 
<script>
let obj = {
  num: 2
};
export default {
  data() {
    return {
      num1: obj.num,
      t: obj //這一句一定要，這樣組卷復(fù)用的時(shí)候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)用，不需要加括號(hào)，
methods是函數(shù)調(diào)用，需要加括號(hà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: {
    // 計(jì)算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實(shí)例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
  }
}
})

• 區(qū)別二：

computed是 當(dāng)下次所依賴的函數(shù)沒有發(fā)生改變時(shí)，再次調(diào)用時(shí)，會(huì)從緩存中讀取數(shù)據(jù)；

methods是 沒有緩存存數(shù)據(jù)，每次調(diào)用每次執(zhí)行，無(wú)論值有沒有改變

• 優(yōu)缺點(diǎn)

兩種方式的最終結(jié)果確實(shí)是完全相同的。然而，不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。

我們?yōu)槭裁葱枰彺?？假設(shè)我們有一個(gè)性能開銷比較大的計(jì)算屬性 A，它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于 A。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請(qǐng)用方法來(lái)替代。