你知道vue data為什么是一個函數(shù)

更新時間：2021年11月10日 17:29:35 作者：943987243

本篇文章從javascript原型鏈來解釋為什么vue中data必須是一個函數(shù)，解釋一下這部分的原理內(nèi)容，感興趣的朋友跟隨小編一起看看吧

官網(wǎng)解釋：當(dāng)一個組件被定義，data 必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù)，因?yàn)榻M件可能被用來創(chuàng)建多個實(shí)例。如果 data 仍然是一個純粹的對象，則所有的實(shí)例將共享引用同一個數(shù)據(jù)對象！通過提供 data 函數(shù)，每次創(chuàng)建一個新實(shí)例后，我們能夠調(diào)用 data 函數(shù)，從而返回初始數(shù)據(jù)的一個全新副本數(shù)據(jù)對象。我看到這個問題的時候是我面試的時候一個面試官問我的，當(dāng)時懵了，從來沒有想過為什么，只知道代碼需要這么寫。最近有空再來了解一下這部分的原理內(nèi)容。有兩個我比較喜歡回答　　

1.是為了在重復(fù)創(chuàng)建實(shí)例的時候避免共享同一數(shù)據(jù)造成的數(shù)據(jù)污染　　

2.寫函數(shù)的原因是為了保證這個對象是獨(dú)立的，如果可以保證對象是惟一的,也可以不寫函數(shù)直接寫對象。

其實(shí)歸根結(jié)底就是為了避免數(shù)據(jù)污染。

我們想要解決這個問題就不得不說原型鏈和this。

相關(guān)知識可以自行去了解。在原型鏈中對象共享公共的屬性和方法。

person1和person2是Person的引用，所以當(dāng)person2改變數(shù)據(jù)是實(shí)際上更改的是Person的的數(shù)據(jù)。既然Person的數(shù)據(jù)改變了，所以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的引用為什么放在對象里面會造成數(shù)據(jù)污染但是放在方法里就不會造成數(shù)據(jù)污染了呢？首先要知道一句話：this的指向在函數(shù)定義的時候是確定不了的，只有在函數(shù)執(zhí)行的時候才能確定this到底指向誰，實(shí)際上this指向調(diào)用它的對象。又有一個疑問了，明明指向的是同一個方法為什么會有不一樣的呢？難道克隆了一個？答案：定義在構(gòu)造函數(shù)內(nèi)部的方法,會在它的每一個實(shí)例上都克隆這個方法;定義在構(gòu)造函數(shù)的prototype屬性上的方法會讓它的所有示例都共享這個方法,但是不會在每個實(shí)例的內(nèi)部重新定義這個方法引用：http://www.dhdzp.com/article/199830.htm

function Person(){
    this.datas = this.sayHello()//this指向調(diào)用它的對象
  }
  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.正常狀態(tài) 當(dāng)使用data函數(shù)的時候沒有造成數(shù)據(jù)污染

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

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>