前言

我們需要先複習下原型鏈的知識，其實這個問題取決於 js ，而並非是 vue 。

function Component(){
 this.data = this.data
}
Component.prototype.data = {
  name:'jack',age:22,}

首先我們達成一個共識（沒有這個共識，請補充下 js 原型鏈部分的知識）：

• 例項它們建構函式內的this內容是不一樣的。
• Component.prototype ，這類底下的方法或者值，都是所有例項公用的。

解開疑問

基於此，我們來看看這個問題：

function Component(){
 
}
Component.prototype.data = {
  name:'jack',}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB)

此時，componentA 和 componentB data之間指向了同一個記憶體地址，age 都變成了 55， 導致了問題！

接下來很好解釋為什麼 vue 元件需要 function 了：

function Component(){
 this.data = this.data()
}
Component.prototype.data = function (){
  return {
  name:'jack',}
}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB)

此時，componentA 和 componentB data之間相互獨立,age 分別是 55 和 22 ，沒有問題！

總結

自己突然對這個問題懵逼，不過事後想了想還是自己基礎知識忘得太快。以前學習 js 的時候，最基礎的：建構函式內和原型之間的區別都模糊了。想不到 vue 這個小問題讓我溫故而知新了一次。

到此這篇關於Vue元件為什麼data必須是一個函式的文章就介紹到這了,更多相關Vue元件data是函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！