欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談vue中computed屬性對data屬性賦值為undefined的原因

 更新時間：2022年02月22日 10:21:20   作者：Oralinge  
本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

場景：

我在computed中return了一個值，然后在data中直接將它復(fù)制給另一個屬性。結(jié)果data中的屬性值為undefined…

代碼示例：

在這里插入圖片描述

timer為undefined…

原因：

在這里很容易想到是執(zhí)行順序的問題，computed中的屬性和data中的屬性最終都會加載到app這個實(shí)例下。如果data中的實(shí)例屬性被創(chuàng)建完成的時候，computed中的實(shí)例屬性還沒被創(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í)行順序中我們不難得出結(jié)論，初始化data在初始化computed之前。

另外，Props，methods,data和computed的初始化都是在beforeCreated和created之間完成的

解決辦法 ：

直接在computed中對data中的屬性賦值，因?yàn)榇藭rdata已經(jīng)初始化。

到此這篇關(guān)于淺談vue中computed屬性對data屬性賦值為undefined的原因的文章就介紹到這了,更多相關(guān)vue data屬性賦值為undefined內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論