vue data為什麼是一個函式？

阿新 • • 發佈：2021-11-10

官網解釋：當一個元件被定義，data 必須宣告為返回一個初始資料物件的函式，因為元件可能被用來建立多個例項。如果 data 仍然是一個純粹的物件，則所有的例項將共享引用同一個資料物件！通過提供 data 函式，每次建立一個新例項後，我們能夠呼叫 data 函式，從而返回初始資料的一個全新副本資料物件。我看到這個問題的時候是我面試的時候一個面試官問我的，當時懵了，從來沒有想過為什麼，只知道程式碼需要這麼寫。最近有空再來了解一下這部分的原理內容。有兩個我比較喜歡回答　　1.是為了在重複建立例項的時候避免共享同一資料造成的資料汙染　　2.寫函式的原因是為了保證這個物件是獨立的，如果可以保證物件是惟一的,也可以不寫函式直接寫物件。其實歸根結底就是為了避免資料汙染。我們想要解決這個問題就不得不說原型鏈和this。相關知識可以自行去了解。在原型鏈中物件共享公共的屬性和方法。

person1和person2是Person的引用，所以當person2改變資料是實際上更改的是Person的的資料。既然Person的資料改變了，所以Person的引用person1也會被改變

 function Person(){
  }
  Person.prototype.datas={
    a:"c",
    f:'h'
  }
  var person1 = new Person()
  var person2 = new Person()
  person2.datas.a="wewew"
  console.log(person2)
  console.log(person1)

我之前一直有一個疑問既然person1和person2都是Person的引用為什麼放在物件裡面會造成資料汙染但是放在方法裡就不會造成資料汙染了呢？首先要知道一句話：this的指向在函式定義的時候是確定不了的，只有在函式執行的時候才能確定this到底指向誰，實際上this指向呼叫它的物件。又有一個疑問了，明明指向的是同一個方法為什麼會有不一樣的呢？難道克隆了一個？答案：定義在建構函式內部的方法,會在它的每一個例項上都克隆這個方法;定義在建構函式的prototype屬性上的方法會讓它的所有示例都共享這個方法,但是不會在每個例項的內部重新定義這個方法引用：https://www.cnblogs.com/Chen-XiaoJun/p/6206450.html

function 
 Person(){
    this.datas = this.sayHello()//this指向呼叫它的物件
  }
  Person.prototype.sayHello = function () {
      return{
        d:1,
        b:2
      }
    };
  var person1 = new Person()
  var person2 = new Person()
  person2.datas.d="wewew"
  console.log(person1)
  console.log(person2)

　　具體例子如下　1.正常狀態當使用data函式的時候沒有造成資料汙染

ButtonTest.vue
<template>
  <div>
    <div>{{ count }}</div>
    <button @click="onAdd">增加</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    onAdd() {
      this.count++;
    },
  },
};
</script>

Home.vue
<template>
  <div class="home">
    <button-test></button-test>
    <button-test></button-test>
  </div>
</template>

<script>
import ButtonTest from "@/components/ButtonTest.vue";
export default {
  name: "Home",
  components: {
    ButtonTest,
  },
};
</script>

2.若data直接定義成一個物件則會報錯

3.定義一個外部物件的形式，結果點選一個按鈕，兩個資料同時增加，造成資料汙染