淺談vue中computed屬性對data屬性賦值為undefined的原因
場景：
我在computed中return了一個(gè)值，然后在data中直接將它復(fù)制給另一個(gè)屬性。結(jié)果data中的屬性值為undefined…
代碼示例：
timer為undefined…
原因：
在這里很容易想到是執(zhí)行順序的問題，computed中的屬性和data中的屬性最終都會加載到app這個(gè)實(shí)例下。如果data中的實(shí)例屬性被創(chuàng)建完成的時(shí)候，computed中的實(shí)例屬性還沒被創(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中對data中的屬性賦值，因?yàn)榇藭r(shí)data已經(jīng)初始化。
到此這篇關(guān)于淺談vue中computed屬性對data屬性賦值為undefined的原因的文章就介紹到這了,更多相關(guān)vue data屬性賦值為undefined內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
理解Vue2.x和Vue3.x自定義指令用法及鉤子函數(shù)原理
這篇文章主要介紹了理解Vue2.x和Vue3.x的自定義指令的用法及鉤子函數(shù)原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2021-09-09
這篇文章主要介紹了vue之keepAlive使用案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動畫效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
Vue3解析markdown并實(shí)現(xiàn)代碼高亮顯示的詳細(xì)步驟
Vue的markdown解析庫有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等，這篇文章主要介紹了Vue3解析markdown并實(shí)現(xiàn)代碼高亮顯示,需要的朋友可以參考下2022-07-07
詳解Vue調(diào)用手機(jī)相機(jī)和相冊以及上傳
這篇文章主要介紹了Vue調(diào)用手機(jī)相機(jī)及上傳，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue實(shí)現(xiàn)購物小球拋物線的方法實(shí)例
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)購物小球拋物線的方法實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
解決vue項(xiàng)目F5刷新mounted里的函數(shù)不執(zhí)行問題
今天小編就為大家分享一篇解決vue項(xiàng)目F5刷新mounted里的函數(shù)不執(zhí)行問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3+ts+element-plus實(shí)際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程
這篇文章主要介紹了vue3+ts+element-plus實(shí)際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue.js基于ElementUI封裝了CRUD的彈框組件，問咋會給你圍繞主題展開詳細(xì)的內(nèi)容介紹，感興趣的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了vue3中proxy的基本用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05