快捷導(dǎo)航

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

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

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

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

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

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

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

我們想要解決這個(gè)問(wèn)題就不得不說(shuō)原型鏈和this。

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

person1和person2是Person的引用，所以當(dāng)person2改變數(shù)據(jù)是實(shí)際上更改的是Person的的數(shù)據(jù)。既然Person的數(shù)據(jù)改變了，所以Person的引用person1也會(huì)被改變

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)

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

function Person(){
    this.datas = this.sayHello()//this指向調(diào)用它的對(duì)象
  }
  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í)候沒(méi)有造成數(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>