溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue組件中data一定是函數(shù)嗎？

發(fā)布時間：2020-06-23 18:21:19 來源：億速云 閱讀：178 作者：清晨 欄目：web開發(fā)

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

前言

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

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

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

  • 實例它們構(gòu)造函數(shù)內(nèi)的this內(nèi)容是不一樣的。
  • 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之間指向了同一個內(nèi)存地址，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 ，沒有問題！

總結(jié)

自己突然對這個問題懵逼，不過事后想了想還是自己基礎(chǔ)知識忘得太快。以前學習 js 的時候，最基礎(chǔ)的：構(gòu)造函數(shù)內(nèi)和原型之間的區(qū)別都模糊了。想不到 vue 這個小問題讓我溫故而知新了一次。


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

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手