快捷導(dǎo)航

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

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

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

vue中如何重置data

重置data需要了解3個(gè)小知識(shí)點(diǎn)

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

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

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

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

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

給予以上小知識(shí)點(diǎn)，我們可以很容易的重置vue中的data

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

示例：

<template>
  <div>
    <p>Vue中data相關(guān)的知識(shí)點(diǎ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>

點(diǎn)擊添加按鈕，添加元素

點(diǎn)擊重置按鈕:

可以看到dataList變成一個(gè)長(zhǎng)度為0的數(shù)組，所以data被重置了。

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

vue組件可以復(fù)用，如果data是一個(gè)對(duì)象，作用域沒(méi)有分開(kāi)，組件之間的data就會(huì)相互影響。是一個(gè)函數(shù)的話每個(gè)示例都可以維護(hù)一份被返回對(duì)象的獨(dú)立拷貝，組件之間的data屬性值就不會(huì)相互影響。

如果組件中的data是一個(gè)對(duì)象：

      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是一個(gè)函數(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);