Vue組件為什么data必須是一個(gè)函數(shù)
前言
我們需要先復(fù)習(xí)下原型鏈的知識(shí)，其實(shí)這個(gè)問(wèn)題取決于 js ，而并非是 vue 。
function Component(){
this.data = this.data
}
Component.prototype.data = {
name:'jack',
age:22,
}
首先我們達(dá)成一個(gè)共識(shí)（沒(méi)有這個(gè)共識(shí)，請(qǐng)補(bǔ)充下 js 原型鏈部分的知識(shí)）：
- 實(shí)例它們構(gòu)造函數(shù)內(nèi)的this內(nèi)容是不一樣的。
- Component.prototype ，這類底下的方法或者值，都是所有實(shí)例公用的。
解開(kāi)疑問(wèn)
基于此，我們來(lái)看看這個(gè)問(wèn)題：
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)
此時(shí)，componentA 和 componentB data之間指向了同一個(gè)內(nèi)存地址，age 都變成了 55， 導(dǎo)致了問(wèn)題！
接下來(lái)很好解釋為什么 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)
此時(shí)，componentA 和 componentB data之間相互獨(dú)立, age 分別是 55 和 22 ，沒(méi)有問(wèn)題！
總結(jié)
自己突然對(duì)這個(gè)問(wèn)題懵逼，不過(guò)事后想了想還是自己基礎(chǔ)知識(shí)忘得太快。以前學(xué)習(xí) js 的時(shí)候，最基礎(chǔ)的：構(gòu)造函數(shù)內(nèi)和原型之間的區(qū)別都模糊了。想不到 vue 這個(gè)小問(wèn)題讓我溫故而知新了一次。
到此這篇關(guān)于Vue組件為什么data必須是一個(gè)函數(shù)的文章就介紹到這了,更多相關(guān)Vue組件data是函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3快速實(shí)現(xiàn)文件上傳OSS的方法詳解
這篇文章給大家介紹了Vue3快速實(shí)現(xiàn)文件上傳OSS的方法,上傳文件可以說(shuō)是經(jīng)典的需求了,在后臺(tái)管理項(xiàng)目中隨處可見(jiàn),一般是由前端進(jìn)行文件上傳,然后再由后端去處理,本文旨在實(shí)現(xiàn)上傳功能,不考慮額外的功能（如文件尺寸限制）,感興趣的朋友可以參考下2024-01-01
mixins（混入）是一種分發(fā)?Vue?組件中可復(fù)用功能的非常靈活的方式，這篇文章主要為大家介紹了mixins混入的介紹和使用，需要的可以參考下2023-08-08
Vue3數(shù)字滾動(dòng)插件vue-countup-v3的使用
vue-countup-v3 插件是一個(gè)基于 Vue3 的數(shù)字動(dòng)畫(huà)插件，用于在網(wǎng)站或應(yīng)用程序中創(chuàng)建帶有數(shù)字動(dòng)畫(huà)效果的計(jì)數(shù)器，本文主要介紹了Vue3數(shù)字滾動(dòng)插件vue-countup-v3的使用，感興趣的可以了解一下2023-10-10
解決vue打包c(diǎn)ss文件中背景圖片的路徑問(wèn)題
今天小編就為大家分享一篇解決vue打包c(diǎn)ss文件中背景圖片的路徑問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue如何修改瀏覽器的標(biāo)題title問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中marker被識(shí)別點(diǎn)擊的過(guò)程場(chǎng)景分析
這篇文章主要介紹了vue中marker被識(shí)別點(diǎn)擊的過(guò)程場(chǎng)景分析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
vue異步axios獲取的數(shù)據(jù)渲染到頁(yè)面的方法
今天小編就為大家分享一篇vue異步axios獲取的數(shù)據(jù)渲染到頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue中Layout內(nèi)部布局el-row、el-col的實(shí)現(xiàn)
layout是一種非常方便的布局方式,本文主要介紹了Vue中Layout內(nèi)部布局el-row、el-col的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07
vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來(lái)的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)，在子組件上顯示不出來(lái)，本文給大家分享兩種解決方案幫助大家解決這個(gè)問(wèn)題,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue Router的懶加載路徑的解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06