不懂Vue組件中data一定是函數(shù)嗎？？其實想解決這個問題也不難，下面讓小編帶著大家一起學習怎么去解決，希望大家閱讀完這篇文章后大所收獲。

目前成都創(chuàng)新互聯(lián)公司已為上千余家的企業(yè)提供了網站建設、域名、網頁空間、網站托管維護、企業(yè)網站設計、綏德網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

前言

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

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

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

• 實例它們構造函數(shù)內的this內容是不一樣的。
• Component.prototype ，這類底下的方法或者值，都是所有實例公用的。

解開疑問

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

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 的時候，最基礎的：構造函數(shù)內和原型之間的區(qū)別都模糊了。想不到 vue 這個小問題讓我溫故而知新了一次。

感謝你能夠認真閱讀完這篇文章，希望小編分享Vue組件中data一定是函數(shù)嗎？內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學習!

網站欄目：Vue組件中data一定是函數(shù)嗎？
網站URL：http://www.rwnh.cn/article6/jsdjog.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網站制作、品牌網站建設、云服務器、網站設計公司、全網營銷推廣、網站營銷

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)