溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
不懂Vue組件中data一定是函數嗎？？其實想解決這個問題也不難，下面讓小編帶著大家一起學習怎么去解決，希望大家閱讀完這篇文章后大所收獲。
前言
我們需要先復習下原型鏈的知識，其實這個問題取決于 js ，而并非是 vue 。
function Component(){
this.data = this.data
}
Component.prototype.data = {
name:'jack',
age:22,
}首先我們達成一個共識（沒有這個共識，請補充下 js 原型鏈部分的知識）：
解開疑問
基于此，我們來看看這個問題：
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 了：
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 ，沒有問題！
總結
自己突然對這個問題懵逼，不過事后想了想還是自己基礎知識忘得太快。以前學習 js 的時候，最基礎的：構造函數內和原型之間的區別都模糊了。想不到 vue 這個小問題讓我溫故而知新了一次。
感謝你能夠認真閱讀完這篇文章，希望小編分享Vue組件中data一定是函數嗎？內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
