为vue中的data赋值computed计算属性后,出现undefined原因及解决

 更新时间:2023年07月04日 09:00:07   作者:啊啊怪  
这篇文章主要介绍了为vue中的data赋值computed计算属性后,出现undefined原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

为vue中的data赋值computed计算属性后,出现undefined原因

今天遇到一个问题,当我给data数据初始化一个computed计算属性时,在页面上竟然没有显示,放代码

<template>
  <div class="container">
    <div>num1:{{num1}}</div>
    <div>num2:{{num2}}</div>
    <div>data中的数据{{sum}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num1:2,
      num2:10,
      sum:this.result
    };
  },
  computed:{
    result(){
      return this.num1+this.num2
    }
  }
};
</script>

console.log(this.data)一下,结果是undefined

查了一下资料,原来是跟Vue组件数据初始化顺序有关,我们可以看一下源码new Vue的执行顺序

往下找,可以找到在这个initMixin函数里,定义了_init的方法

function initMixin (Vue) {
    Vue.prototype._init = function (options) {	//在这里定义了_init方法
      var vm = this;
      // a uid
      vm._uid = uid$3++;
      var startTag, endTag;
      /* istanbul ignore if */
      if (config.performance && mark) {
        startTag = "vue-perf-start:" + (vm._uid);
        endTag = "vue-perf-end:" + (vm._uid);
        mark(startTag);
      }
      // a flag to avoid this being observed
      vm._isVue = true;
      // merge options
      if (options && options._isComponent) {
        // optimize internal component instantiation
        // since dynamic options merging is pretty slow, and none of the
        // internal component options needs special treatment.
        initInternalComponent(vm, options);
      } else {
        vm.$options = mergeOptions(
          resolveConstructorOptions(vm.constructor),
          options || {},
          vm
        );
      }
      /* istanbul ignore else */
      {
        initProxy(vm);
      }
      // expose real self
      vm._self = vm;
      initLifecycle(vm);
      initEvents(vm);
      initRender(vm);
      callHook(vm, 'beforeCreate');
      initInjections(vm); // resolve injections before data/props
      initState(vm);
      initProvide(vm); // resolve provide after data/props
      callHook(vm, 'created');
      /* istanbul ignore if */
      if (config.performance && mark) {
        vm._name = formatComponentName(vm, false);
        mark(endTag);
        measure(("vue " + (vm._name) + " init"), startTag, endTag);
      }
      if (vm.$options.el) {
        vm.$mount(vm.$options.el);
      }
    };
  }

其中,聚焦在这里

看来initState(vm)是关键的部分了,在initState函数里

function initState (vm) {
    vm._watchers = [];
    var opts = vm.$options;
    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
    if (opts.watch && opts.watch !== nativeWatch) {
      initWatch(vm, opts.watch);//初始化watch
    }
  }

initState(vm)函数可以看出

初始化数据的顺序如下

  • props
  • methods
  • data
  • computed
  • watch

computed的初始化在data的后边!

这也就证实了为什么为data赋值计算属性computed时,data打印出来是undefined

回到上边的例子

<template>
  <div class="container">
    <div>num1:{{num1}}</div>
    <div>num2:{{num2}}</div>
    <div>data中的数据{{sum}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num1:2,
      num2:10,
      sum:this.result
    };
  },
  computed:{
    result(){
      return this.num1+this.num2
    }
  }
};
</script>

因为computed初始化顺序是在data后边。

sum初始化的时候,result还没有初始化,所以也就输出undefined的结果

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue-cli3.x配置全局的scss的时候报错问题及解决

    vue-cli3.x配置全局的scss的时候报错问题及解决

    这篇文章主要介绍了vue-cli3.x配置全局的scss的时候报错问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue.js的computed,filter,get,set的用法及区别详解

    vue.js的computed,filter,get,set的用法及区别详解

    下面小编就为大家分享一篇vue.js的computed,filter,get,set的用法及区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue自定义toast组件的实例代码

    Vue自定义toast组件的实例代码

    这篇文章主要介绍了Vue自定义toast组件的相关资料,需要的朋友可以参考下
    2018-08-08
  • 带你理解vue中的v-bind

    带你理解vue中的v-bind

    如果你写过vue,对v-bind这个指令一定不陌生。 下面小编将从源码层面去带大家剖析一下v-bind背后的原理,需要的小伙伴可以参考下面章的具体内容
    2021-09-09
  • npm如何更新VUE package.json文件中依赖的包版本

    npm如何更新VUE package.json文件中依赖的包版本

    这篇文章主要介绍了npm如何更新VUE package.json文件中依赖的包版本问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 使用Vue+Django+Ant Design做一个留言评论模块的示例代码

    使用Vue+Django+Ant Design做一个留言评论模块的示例代码

    这篇文章主要介绍了使用Vue+Django+Ant Design做一个留言评论模块,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 浅谈 Vue 项目优化的方法

    浅谈 Vue 项目优化的方法

    这篇文章主要介绍了浅谈 Vue 项目优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 浅谈vue引用静态资源需要注意的事项

    浅谈vue引用静态资源需要注意的事项

    今天小编就为大家分享一篇浅谈vue引用静态资源需要注意的事项,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3 ts编写echart是tooltip无法展示的解决

    vue3 ts编写echart是tooltip无法展示的解决

    这篇文章主要介绍了vue3 ts编写echart是tooltip无法展示的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue基础之面包屑和标签tag详解

    vue基础之面包屑和标签tag详解

    这篇文章主要为大家详细介绍了vue的面包屑和标签tag,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02

最新评论