淺談vue中computed屬性對(duì)data屬性賦值為undefined的原因
場(chǎng)景：
我在computed中return了一個(gè)值，然后在data中直接將它復(fù)制給另一個(gè)屬性。結(jié)果data中的屬性值為undefined…
代碼示例：
timer為undefined…
原因：
在這里很容易想到是執(zhí)行順序的問(wèn)題，computed中的屬性和data中的屬性最終都會(huì)加載到app這個(gè)實(shí)例下。如果data中的實(shí)例屬性被創(chuàng)建完成的時(shí)候，computed中的實(shí)例屬性還沒(méi)被創(chuàng)建，很明顯，在data中獲取到computed中的屬性必定是undefined…
下面看一下new vue的時(shí)候，它的執(zhí)行順序
_init中初始化
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options) //初始化各個(gè)功能
}
_init中做了什么？
initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props initState(vm) //初始化，initState()是在beforeCreate和created之間 initProvide(vm) // resolve provide after data/props callHook(vm, 'created')
在initState()做了這些事情
if (opts.props) initProps(vm, opts.props)//初始化Props
if (opts.methods) initMethods(vm, opts.methods)//初始化methods
if (opts.data) {
initData(vm)} else {
observe(vm._data = {}, true /* asRootData */)}//初始化data
if (opts.computed) initComputed(vm, opts.computed)//初始化computed
從執(zhí)行順序中我們不難得出結(jié)論，初始化data在初始化computed之前。
另外，Props，methods,data和computed的初始化都是在beforeCreated和created之間完成的
解決辦法 ：
直接在computed中對(duì)data中的屬性賦值，因?yàn)榇藭r(shí)data已經(jīng)初始化。
到此這篇關(guān)于淺談vue中computed屬性對(duì)data屬性賦值為undefined的原因的文章就介紹到這了,更多相關(guān)vue data屬性賦值為undefined內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家分享的是Vue子組件接收父組件傳值的3種方式，主要通過(guò)聲明接收、接收數(shù)據(jù)的同時(shí)進(jìn)行?類型限制、接收數(shù)據(jù)的同時(shí)對(duì)?數(shù)據(jù)類型、必要性、默認(rèn)值?進(jìn)行限制相關(guān)內(nèi)容展開(kāi)更多詳細(xì)的相關(guān)資料，需要的小伙伴可以參考一下2022-03-03
基于Vue3+Three.js實(shí)現(xiàn)一個(gè)3D模型可視化編輯系統(tǒng)
這篇文章主要介紹了基于Vue3+Three.js實(shí)現(xiàn)一個(gè)3D模型可視化編輯系統(tǒng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue使用NProgress進(jìn)度條的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Vue仿今日頭條實(shí)例詳解，并把相關(guān)代碼做了說(shuō)明，對(duì)此有興趣的朋友參考下吧。2018-02-02
基于Vue el-autocomplete 實(shí)現(xiàn)類似百度搜索框功能
本文通過(guò)代碼給大家介紹了Vue el-autocomplete 實(shí)現(xiàn)類似百度搜索框功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品多選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3實(shí)現(xiàn)父組件提交校驗(yàn)多個(gè)子組件
這篇文章主要為大家詳細(xì)介紹了vue3如何實(shí)現(xiàn)父組件在提交事件中校驗(yàn)多個(gè)子組件中的form件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-11-11
vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作
這篇文章主要介紹了vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue組件通信的方式，這是在面試中一個(gè)非常高頻的問(wèn)題。其實(shí)Vue組件的通信方式除了props和?$emit還有很多，本文將對(duì)vue組件通信方式進(jìn)行一下總結(jié)，感興趣的可以學(xué)習(xí)一下2021-12-12
Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07