為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因及解決

更新時間：2023年07月04日 09:00:07 作者：啊啊怪

這篇文章主要介紹了為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因

今天遇到一個問題，當我給data數(shù)據(jù)初始化一個computed計算屬性時，在頁面上竟然沒有顯示，放代碼

<template>
  <div class="container">
    <div>num1:{{num1}}</div>
    <div>num2:{{num2}}</div>
    <div>data中的數(shù)據(jù){{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)一下，結(jié)果是undefined

查了一下資料，原來是跟Vue組件數(shù)據(jù)初始化順序有關(guān)，我們可以看一下源碼new Vue的執(zhí)行順序

往下找，可以找到在這個initMixin函數(shù)里，定義了_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)是關(guān)鍵的部分了，在initState函數(shù)里

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)函數(shù)可以看出

初始化數(shù)據(jù)的順序如下

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中的數(shù)據(jù){{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的結(jié)果