vue中data的基礎(chǔ)匯總

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

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

vue中如何重置data

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

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

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

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

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

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

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

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

示例：

<template>
  <div>
    <p>Vue中data相關(guān)的知識點</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的數(shù)組，所以data被重置了。

組件中的data為什么是一個函數(shù)

vue組件可以復(fù)用，如果data是一個對象，作用域沒有分開，組件之間的data就會相互影響。是一個函數(shù)的話每個示例都可以維護一份被返回對象的獨立拷貝，組件之間的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是一個函數(shù)：

      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);