19.vue元件中data為什麼必須是一個函式
阿新 • • 發佈：2020-08-13
https://www.jb51.net/article/188491.htm
前言
我們需要先複習下原型鏈的知識，其實這個問題取決於 js ，而並非是 vue 。
| 1 2 3 4 5 6 7 |
function Component(){
this.data = this.data
}
Component.prototype.data = {
name:'jack',
age:22,
}
|
首先我們達成一個共識（沒有這個共識，請補充下 js 原型鏈部分的知識）：
- 例項它們建構函式內的this內容是不一樣的。
- Component.prototype ，這類底下的方法或者值，都是所有例項公用的。
解開疑問
基於此，我們來看看這個問題：
| 1 2 3 4 5 6 7 8 9 10 11 |
function Component(){
}
Component.prototype.data = {
name:'jack',
age:22,
}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB)
|
此時，componentA 和 componentB data之間指向了同一個記憶體地址，age 都變成了 55， 導致了問題！
接下來很好解釋為什麼 vue 元件需要 function 了：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
function Component(){
this.data = this.data()
}
Component.prototype.data = function (){
return {
name:'jack',
age:22,
}
}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB) |
此時，componentA 和 componentB data之間相互獨立, age 分別是 55 和 22 ，沒有問題！