为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中的依赖注入provide和inject简单介绍

    vue中的依赖注入provide和inject简单介绍

    这篇文章主要介绍了vue中的依赖注入provide和inject简单介绍,provide 选项允许我们指定我们想要提供给后代组件的数据/方法,本文通过组价刷新的案列给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • vue2.0 better-scroll 实现移动端滑动的示例代码

    vue2.0 better-scroll 实现移动端滑动的示例代码

    本篇文章主要介绍了vue2.0 better-scroll 实现移动端滑动的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2018-01-01
  • vue使用计算属性完成动态滑竿条制作

    vue使用计算属性完成动态滑竿条制作

    这篇文章主要介绍了vue使用计算属性完成动态滑竿条制作,文章围绕计vue算属制作动态滑竿条的相关代码完成内容,需要的朋友可以参考一下
    2021-12-12
  • vue项目如何引入json数据

    vue项目如何引入json数据

    这篇文章主要介绍了vue项目如何引入json数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    这篇文章主要介绍了vue在项目中使用百度地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue 下载文档乱码的解决

    vue 下载文档乱码的解决

    这篇文章主要介绍了vue 下载文档乱码的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue2.x select2 指令封装详解

    vue2.x select2 指令封装详解

    本篇文章主要介绍了vue2.x select2 指令封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue中使用svg画路径图的详细介绍

    vue中使用svg画路径图的详细介绍

    这篇文章主要介绍了vue中使用svg画路径图的相关知识,在这大家需要注意svg中不能使用html标签,例如div,img等,因此在svg中一般使用image标签放置图片,text图片放置文本内容,详细代码跟随小编一起看看吧
    2022-04-04
  • vue中实现弹出层动画效果的示例代码

    vue中实现弹出层动画效果的示例代码

    这篇文章主要介绍了vue中怎样实现弹出层动画效果,由上而下渐渐显示,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-09-09
  • vue如何通过某个字段获取详细信息

    vue如何通过某个字段获取详细信息

    这篇文章主要介绍了vue如何通过某个字段获取详细信息,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论