浅谈vue中computed属性对data属性赋值为undefined的原因
更新时间：2022年02月22日 10:21:20 作者：Oralinge
本文主要介绍了浅谈vue中computed属性对data属性赋值为undefined的原因，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
场景：
我在computed中return了一个值，然后在data中直接将它复制给另一个属性。结果data中的属性值为undefined…
代码示例：
timer为undefined…
原因：
在这里很容易想到是执行顺序的问题，computed中的属性和data中的属性最终都会加载到app这个实例下。如果data中的实例属性被创建完成的时候，computed中的实例属性还没被创建，很明显，在data中获取到computed中的属性必定是undefined…
下面看一下new vue的时候，它的执行顺序
_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
从执行顺序中我们不难得出结论，初始化data在初始化computed之前。
另外，Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的
解决办法 ：
直接在computed中对data中的属性赋值，因为此时data已经初始化。
到此这篇关于浅谈vue中computed属性对data属性赋值为undefined的原因的文章就介绍到这了,更多相关vue data属性赋值为undefined内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了VUEX-action可以修改state吗，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了vue.js使用v-model实现父子组件间的双向通信,结合实例形式分析了vue.js基于v-model父子组件间的双向通信的具体实现技巧,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue中使用require动态获取图片地址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了vue实现全屏滚动效果，非fullpage.js，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
今天小编就为大家分享一篇vue导航栏部分的动态渲染实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue3关于响应式数据类型详解(ref、reactive、toRef、及toRefs)
这篇文章主要介绍了Vue3关于响应式数据类型(ref、reactive、toRef、以及toRefs),本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
今天小编就为大家分享一篇vue--点击当前增加class,其他删除class的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇vue基本使用--refs获取组件或元素的实例，具有很好的参考价值，希望对大家有所帮助。一起个跟随小编过来看看吧2019-11-11
我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性，我们该如何解决这个问题呢，下面小编给大家带来了Vue中this.$set的正确使用，感兴趣的朋友跟随小编一起看看吧2022-12-12
这篇文章主要介绍了在vue项目里面使用引入公共方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论