Vue data與computed的區別

區別

1. data中的屬性並不會隨賦值變量的改動而改動
2. computed屬性屬於持續變化跟蹤。在computed屬性定義的時候，這個computed屬性就與給它賦值的變量綁定了。改變這個賦值變量，computed屬性值會隨之改變

錯誤使用場景
  <div>{{name}}</div>

  data() {
    return {
      name: this.$store.state.Detail.detailInfo,
    };
  },
  mounted() {
    this.$store.dispatch('getDetail',11);
  },
/***********************
this.$store.state.Detail.detailInfo的初始值為{},
經過dispatch('getDetail',11)  this.$store.state.Detail.detailInfo的值改變了
但name的值不變=>data中的屬性並不會隨賦值變量的改動而改動
***********************/
	  
正確使用場景
  <div>{{name}}</div>

  computed:{
    name(){
      return this.$store.state.Detail.detailInfo
    }
  },
  mounted() {
    this.$store.dispatch('getDetail',11);
  },

data中不能使用computed中的數據, computed中可以使用data數據

原理:
Vue 把數據抽象成了兩層，第一層就是簡單的數據（data），第二層就是 computed （依賴於 data，也就是依賴於前一層）。第二層可以引用第一層的數據，而第一層卻不能引用第二層的數據。

其實歸根結底就是一個 Vue 實例在渲染的時候數據解析的順序問題，結論是:
props->methods->data->computed->watch->created。

官網的源碼也寫的很清楚，見下圖

computed中可以使用data數據

使用data中的數據, 但是注意 只能用, 不能改!

data() {
   return {
       options: [{a: 1}]
   }
}
computed {
   // 寫法一: 函數寫法
   objArr() { this.options;  ...    return XXX}
   
   // 寫法二: 完整對象寫法
   objArr: {
       get() {
   		this.options;
           return XXX
       }
   }
}

需要改, 用computed完整形式, setter函數 能改!
computed 就是個變量, 有值get(){return}, 可以賦值set(newValue)

computed {
    objArr: {
		//返回objArr的值
        get() { return this.options;},  
		//對objArr賦值{b: 2}
        set(newValue) {
            //修改data值
            this.options.push(newValue);
        }
    }
}
// 2. 觸發set函數 即給objArr賦值:
// 這里我們封裝個方法:
methods: {
    setObjArr() {
        this.objArr = {b: 2}
    }
}
// 通過按鈕點擊觸發
<button @click="setObjArr">set</button>

methods里使用和修改data, computed

直接改 this.options