导读

根据实际问题加深对Vue2.5生命周期的理解。
代码执行顺序对于解决问题至关重要，帮人看问题时遇到的，不得不说，遇到这种问题是好事。
由于当时环境看不到报错信息，考验对代码的敏感度，自我反思一波...

正文

先看代码

<template>
  <div>
    <div>{{ JSON.stringify(number) }}</div>
    <div>{{ JSON.stringify(objs) }}</div>
  </div>
</template>
    <script>
export default {
  name: "test_vue",

  data() {
    return {
      number,
      objs,
    };
  },
  created() {
    this.number = 1;
    //模拟接口调用
    Promise.resolve().then(() => {
      this.objs = {
        content: "明天放假了",
        plan: "早睡早起",
      };
    });
  },

  mounted() {},
};
</script>

当时的问题是，能显示number的值，但是objs的值不显示，如果把created代码放在mounted上，则number 和 objs 的值都不显示。

首先我想到的vue的模板不支持JSON.stringify (PS: number 都显示出来了)
后来我又想到objs 存在循环引用、是undefined啥的，然后报错了。(PS:后台接口存在循环引用...)

是什么让我变得如此愚蠢...

然后我又看到

    return {
      number,
      objs,
    };

印象中是会报错的...，此处略去3千字

虽然问题解决了，晚上回到家的我还是一头雾水

首先template是支持JSON.stringify，人家还支持

    'Infinity,undefined,NaN,isFinite,isNaN,' +
    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
    'require' 

其次

    return {
      number,
      objs,
    };

确实会报错，但在编译的时候不会，而发生在运行期间

因为在created时还没有挂载数据，所以这时候给number值，mounted便能显示

结语

就是需要一些问题将零散的知识点穿在一起，然后就成了经验。