为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的结果

总结

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

相关文章

  • 详解如何实现一个简单的 vuex

    详解如何实现一个简单的 vuex

    本篇文章主要介绍了如何实现一个简单的 vuex,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue created钩子函数与mounted钩子函数的用法区别

    vue created钩子函数与mounted钩子函数的用法区别

    这篇文章主要介绍了vue created钩子函数与mounted钩子函数的用法区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue.js 子组件无法获取父组件store值的解决方式

    vue.js 子组件无法获取父组件store值的解决方式

    今天小编就为大家分享一篇vue.js 子组件无法获取父组件store值的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • element跨分页操作选择详解

    element跨分页操作选择详解

    这篇文章主要为大家详细介绍了element跨分页操作选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue使用Echarts设置数据无效问题记录及解决方法

    vue使用Echarts设置数据无效问题记录及解决方法

    这篇文章主要介绍了vue使用Echarts设置数据无效问题记录,本文通过场景分析给大家分享解决方法,需要的朋友可以参考下
    2022-08-08
  • vue使用websocket及封装过程

    vue使用websocket及封装过程

    这篇文章主要介绍了vue使用websocket及封装过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue首屏加载出现白屏问题的优化实战

    Vue首屏加载出现白屏问题的优化实战

    在实际开发中,Vue 应用首次加载时经常出现白屏问题,这严重影响了用户体验,本文将从多个角度出发,提供全面的解决方案,大家可以根据需要进行选择
    2025-05-05
  • Vue3实现预览PDF文件的多种方式(超简单)

    Vue3实现预览PDF文件的多种方式(超简单)

    在Vue项目中实现PDF文件预览是许多开发者可能会遇到的需求,尤其是在开发海外后台管理系统时,由于某些用户上传的文件格式为PDF,而Vue本身并不直接支持PDF文件的预览功能,这就需要借助一些第三方的插件或者工具来完成,下面详细地介绍几种在Vue3中实现PDF文件预览的方法
    2025-03-03
  • Vue中util的工具函数实例详解

    Vue中util的工具函数实例详解

    本文通过实例代码给大家介绍了Vue中util的工具函数,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 教你用vue实现一个有趣的围绕圆弧动画效果

    教你用vue实现一个有趣的围绕圆弧动画效果

    最近做的两个项目都是关于vue的,做完整理一下,这篇文章主要给大家介绍了关于如何用vue实现一个有趣的围绕圆弧动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04

最新评论