vue 父子组件 执行时机学习

前言

简单验证一下 vue 中各选项(生命周期、watch、 computed等）

代码验证

单个组件的运行顺序

• 代码

created() {
    console.log(this.isComputed);
    console.log("父组件 -- created初始化");
    this.num = 10;
  },
  mounted() {
    console.log("父组件 -- DOM生成");
    this.$nextTick(() => {
      this.num = 100;
    });
  },
  computed: {
    async isComputed() {
      console.log("父组件 -- 计算属性 -- 计算属性是不支持异步的");
      return this.num;
    }
  },
  watch: {
    num() {
      console.log(
        "父组件 -- 监听数据变化 -- 初始时, 是不会监听的, 所以在created生命周期中手动改变了数据"
      );
    }
  }

• 结果

console.png

• 从打印结果中总结

  个人总结(没有深究细节以及原理):

  1. 初始化data数据
  2. watch: 会在DOM渲染后才会监听, 先于computed执行
  3. computed: 惰性加载, 如果在created中使用计算属性, 就会立即同步执行

父子组件运行顺序

• 代码

  props: {
      msg: String
    },
    data() {
      return {
        num: 5
      };
    },
    created() {
      console.log("子组件 -- created初始化");
      console.log("这里props已经由父组件派发下来", this.msg);
      console.log(this.isComputed);
    },
    mounted() {
      console.log("子组件 -- DOM生成");
    },
    computed: {
      isComputed() {
        console.log("子组件 -- 计算属性");
        return "计算属性";
      }
    },
    watch: {
      msg() {
        console.log(
          "子组件 -- 监听数据变化 -- 初始时, 是不会监听的, 所以在created生命周期中手动改变了数据"
        );
      }
    }
  

• 结果

console1.png

• 个人总结

  个人总结(没有深究细节以及原理):

  1. 在父组件中, 生成data - 计算属性 - 以及执行created生命周期(以及生命周期中的方法) -- 都是以同步方式执行
  2. 在父组件执行created生命周期后, 就会执行子组件的data渲染 - 计算属性 - created生命周期 - mounted生命周期等
  3. 子组件的DOM生成后, 就会执行父组件的mounted生命周期

总结

暂时还没有技术水平查看vue源码, 只能通过简单的验证来验证vue的数据执行顺序

初学阶段, 不严谨验证, 权当个人学习文章