在這里很容易想到是執(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管理系統(tǒng)前端之組件拆分封裝詳解
這篇文章主要給大家介紹了關(guān)于Vue管理系統(tǒng)前端之組件拆分封裝的相關(guān)資料，文中通過(guò)實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問(wèn)題
今天小編就為大家分享一篇基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue+echarts圖表的基本使用步驟總結(jié)
這篇文章主要給大家介紹了關(guān)于vue+echarts圖表的基本使用步驟,Echarts是一款基于JavaScript的開(kāi)源可視化圖表庫(kù),而Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界,需要的朋友可以參考下
2023-11-11
使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法
這篇文章主要介紹了使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼
菜單管理是一個(gè)對(duì)菜單樹(shù)結(jié)構(gòu)的增刪改查操作，這篇文章主要介紹了Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼,需要的朋友可以參考下
2022-02-02
vue中jsencrypt與base64加密解密的實(shí)用流程
vue項(xiàng)目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實(shí)用流程,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-10-10
淺談Vuex的狀態(tài)管理(全家桶)
本篇文章主要介紹了淺談Vuex狀態(tài)管理(全家桶)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
vue踩坑之backgroundImage路徑問(wèn)題及解決
這篇文章主要介紹了vue踩坑之backgroundImage路徑問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)
本文主要介紹了vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
vue實(shí)現(xiàn)文字加密功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文字加密功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09