父子组件的生命周期__Vue.js__前端
发布于 3 年前 作者 banyungong 1026 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

一、 vue的生命周期是我们都比较熟悉的,现在我们来回顾一下:

beforeCreate:初始化,此时调用方法和data的值都是获取不到
created:将data,method注入,此时可以获取到data和method的方法,此时dom没有挂载
beforeMount:挂载前的最后一个阶段
mounted:此时dom已经挂载,可以在这里进行dom操作
beforeUpdate:数据即将发生变更,还没有进行dom变更阶段
updated:数据发生变更
beforeDestroy:数据即将发生销毁,还没有进行dom变更阶段 destroyed:数据销毁

lifecycle.png

二、父子组件的生命周期

那么在组件中,父子组件的生命周期的关系是怎么样呢,分别在父组件和子组件的生命周期输出对应的文字: 父组件:

  created() {
    console.log('父组件 create')
  },
  mounted() {
    console.log('父组件 mounted')
  },
  beforeCreate() {
    console.log('父组件 beforeCreate')
  },
  beforeMount() {
    console.log('父组件 beforeMount')
  },
  beforeUpdate() {
    console.log('父组件 beforeUpdate')
  },
  beforeDestroy() {
    console.log('父组件 beforeDestroy')
  },
  destroyed() {
    console.log('父组件 destroyed')
  },
  updated() {
    console.log('父组件 updated')
  },
  methods: {
    destroy() {
      this.$destroy()
    },
  },

子组件:

 created() {
    console.log('子组件 create')
  },
  mounted() {
    console.log('子组件 mounted')
  },
  beforeCreate() {
    console.log('子组件 beforeCreate')
  },
  beforeMount() {
    console.log('子组件 beforeMount')
  },
  beforeUpdate() {
    console.log('子组件 beforeUpdate')
  },
  beforeDestroy() {
    console.log('子组件 beforeDestroy')
  },
  destroyed() {
    console.log('子组件 destroyed')
  },
  updated() {
    console.log('子组件 updated-->')
  },

创建阶段
1626763479(1).jpg

根据输出的结果表明: 创建阶段加载顺序是:父组件beforeCreate–>父组件created–>父组件 beforeMount–>子组件 beforeCreate–>子组件 create–>子组件 beforeMount -->子组件 mounted–>父组件 mounted 运行阶段

1626764317(1).jpg

数据发生变化时的加载顺序是:
父组件 beforeUpdate–>子组件 beforeUpdate–>子组件 updated–>父组件 updated

销毁阶段 1626764489(1).jpg

数据发生变化时的加载顺序是:
父组件 beforeDestroy–>子组件 beforeDestroy–>子组件 destroyed–>父组件 destroyed

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: fxxiao44 原文链接:https://juejin.im/post/6986900588537741342

回到顶部