vue中data的基礎匯總

更新時間：2022年08月04日 14:17:30 作者：Celester_best

這篇文章主要介紹了vue如何重置data、組件中的data為什么是一個函數、為什么new Vue里的data可以是一個對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue中如何重置data

重置data需要了解3個小知識點

（1）this.$data獲取組件當前狀態(tài)的data對象

（2）this.$options.data獲取組件初始狀態(tài)的data對象

（3）Object.assign()方法用于將所有可美劇屬性的值從一個或者多個源對象復制到目標對象，并返回目標對象。

Object.assign(target,source1,source2,....sourceN)方法中可以傳遞多個參數，第一個參數是目標對象，后面的是源對象，源對象可以有一個或者多個。

Object.assign()方法還可以用來合并對象。合并時目標對象會改變，如果遇到相同屬性時，后面的屬性值就會覆蓋前面的屬性值。

給予以上小知識點，我們可以很容易的重置vue中的data

Object.assign(this.$data, this.$options.data.call(this));

示例：

<template>
  <div>
    <p>Vue中data相關的知識點</p>
    <button @click="addElement">添加元素</button>
    <div v-for="item in dataList" :key="item">{{ item }}</div>
    <div>
      <button @click="resetData">重置</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "DataTest",
  data() {
    return {
      dataList: [],
    };
  },
  methods: {
    addElement() {
      this.dataList.push(this.dataList.length + 1);
    },
    resetData() {
      Object.assign(this.$data, this.$options.data.call(this));
    },
  },
};
</script>

點擊添加按鈕，添加元素

點擊重置按鈕:

可以看到dataList變成一個長度為0的數組，所以data被重置了。

組件中的data為什么是一個函數

vue組件可以復用，如果data是一個對象，作用域沒有分開，組件之間的data就會相互影響。是一個函數的話每個示例都可以維護一份被返回對象的獨立拷貝，組件之間的data屬性值就不會相互影響。

如果組件中的data是一個對象：

      function VueComponent() {}
      VueComponent.prototype.data = {
        count: 0,
      };
      const A = new VueComponent();
      const B = new VueComponent();
      console.log(" A count: ", A.data.count);
      console.log(" B count: ", B.data.count);
      A.data.count = 10;
      console.log("修改A組件的count后 A count: ", A.data.count);
      console.log("修改A組件的count后 B count: ", B.data.count);

可以看到修改A組件中data的count值之后，B組件中data的count值也發(fā)生了變化。

如果組件中的data是一個函數：

      function VueComponent() {
        this.data = this.data();
      }
      VueComponent.prototype.data = function () {
        return {
          count: 0,
        };
      };
      const A = new VueComponent();
      const B = new VueComponent();
      console.log(" A count: ", A.data.count);
      console.log(" B count: ", B.data.count);
      A.data.count = 10;
      console.log("修改A組件的count后 A count: ", A.data.count);
      console.log("修改A組件的count后 B count: ", B.data.count);