浅谈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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

分享Vue子组件接收父组件传值的3种方式
这篇文章主要给大家分享的是Vue子组件接收父组件传值的3种方式，主要通过声明接收、接收数据的同时进行类型限制、接收数据的同时对数据类型、必要性、默认值进行限制相关内容展开更多详细的相关资料，需要的小伙伴可以参考一下
2022-03-03
基于Vue3+Three.js实现一个3D模型可视化编辑系统
这篇文章主要介绍了基于Vue3+Three.js实现一个3D模型可视化编辑系统,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09
Vue使用NProgress进度条的方法
这篇文章主要为大家详细介绍了Vue使用NProgress进度条的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
Vue仿今日头条实例详解
这篇文章主要介绍了Vue仿今日头条实例详解，并把相关代码做了说明，对此有兴趣的朋友参考下吧。
2018-02-02
基于Vue el-autocomplete 实现类似百度搜索框功能
本文通过代码给大家介绍了Vue el-autocomplete 实现类似百度搜索框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-10-10
vue实现商品多选功能
这篇文章主要为大家详细介绍了vue实现商品多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue3实现父组件提交校验多个子组件
这篇文章主要为大家详细介绍了vue3如何实现父组件在提交事件中校验多个子组件中的form件,文中的示例代码讲解详细,有需要的小伙伴可以参考一下
2023-11-11
vue 防止页面加载时看到花括号的解决操作
这篇文章主要介绍了vue 防止页面加载时看到花括号的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
深入了解Vue组件七种通信方式
vue组件通信的方式，这是在面试中一个非常高频的问题。其实Vue组件的通信方式除了props和 $emit还有很多，本文将对vue组件通信方式进行一下总结，感兴趣的可以学习一下
2021-12-12
Vue学习笔记进阶篇之vue-router安装及使用方法
本篇文章主要介绍了Vue学习笔记进阶篇之vue-router安装及使用方法，具有一定的参考价值，有兴趣的可以了解一下
2017-07-07