淺談vue中computed屬性對data屬性賦值為undefined的原因
更新時間：2022年02月22日 10:21:20 作者：Oralinge
本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
場景：
我在computed中return了一個值，然后在data中直接將它復制給另一個屬性。結果data中的屬性值為undefined…
代碼示例：
timer為undefined…
原因：
在這里很容易想到是執(zhí)行順序的問題，computed中的屬性和data中的屬性最終都會加載到app這個實例下。如果data中的實例屬性被創(chuàng)建完成的時候，computed中的實例屬性還沒被創(chuàng)建，很明顯，在data中獲取到computed中的屬性必定是undefined…
下面看一下new vue的時候，它的執(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) //初始化各個功能
}
_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í)行順序中我們不難得出結論，初始化data在初始化computed之前。
另外，Props，methods,data和computed的初始化都是在beforeCreated和created之間完成的
解決辦法 ：
直接在computed中對data中的屬性賦值，因為此時data已經初始化。
到此這篇關于淺談vue中computed屬性對data屬性賦值為undefined的原因的文章就介紹到這了,更多相關vue data屬性賦值為undefined內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于Vue管理系統(tǒng)前端之組件拆分封裝的相關資料，文中通過實例代碼結束的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
今天小編就為大家分享一篇基于vue.js中關于下拉框的值默認及綁定問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關于vue+echarts圖表的基本使用步驟,Echarts是一款基于JavaScript的開源可視化圖表庫,而Vue是一種流行的JavaScript框架,用于構建用戶界,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了使用Vuex實現一個筆記應用的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue + Element UI 實現權限管理系統(tǒng)之菜單功能實現代碼
菜單管理是一個對菜單樹結構的增刪改查操作，這篇文章主要介紹了Vue + Element UI 實現權限管理系統(tǒng)之菜單功能實現代碼,需要的朋友可以參考下2022-02-02
vue項目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實用流程,具有一定的參考價值,感興趣的可以了解一下2023-10-10
本篇文章主要介紹了淺談Vuex狀態(tài)管理(全家桶)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue踩坑之backgroundImage路徑問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了vue3中處理不同數據結構JSON的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
這篇文章主要為大家詳細介紹了vue實現文字加密功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09