Vue中data和computed的區別

First
data 和 computed都是響應式的，先看看官方的說法：

Data:

Vue 實例的數據對象。Vue 將會遞歸將 data 的屬性轉換爲 getter/setter，從而讓 data 的屬性能夠響應數據變化。
深入理解響應式原理：
當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉爲 getter/setter。
每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄爲依賴，之後當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。
原理如下圖：

2.兩者的區別：

1. data中的屬性並不會隨賦值變量的改動而改動，(賦值變量類似：num1: aaa.bbb這種，而這種是直接賦值：num1: "aaa")

當需要這種隨賦值變量的改動而改動的時候，還是用計算屬性computed合適
如果實在要在data裏面聲明屬性，可以先賦一個值，然後在methods裏面定義方法操作該屬性，效果等同，也會有響應式
測試以下代碼感受以下：

<template>
  <div>
    <h2>num1是data中的變量，其初始值爲：{{num1}}</h2>
    <h2>點擊按鈕後，data中的num1變化爲：{{num1}}</h2>
    <h2>點擊按鈕後，computed中的c_num1變化爲：{{c_num1}}</h2>
    <button @click="outerNumChange">給num1+10</button>
      <hr>
    <h1>1.data定義的屬性不會因爲它的賦值變量的變化而變化</h1>
    <h1>2.computed定義的屬性會隨它的賦值變量的變化而變化</h1>
  </div>
</template>

<script>
let outer_obj1 = { no: 30 };
export default {
  data() {
    return {
      t: outer_obj1, //這樣,這個組件被多次使用時，c_num1共享狀態。沒有這句，computed中的c_num1也不跟蹤狀態。
      num1: outer_obj1.no
    };
  },
  computed: {
    c_num1() {
      return outer_obj1.no;
    }
  },
  methods: {
    outerNumChange() {
      outer_obj1.no += 10;
      console.log(this.c_num1);
    }
  }
};
</script>

<style>
</style>

以上代碼轉載自代碼來源