父组件代码

复制<template>
  <div class="index">
    <div class="text">{{four}}</div>
    <son :fatherToSon="toSon"></son>
  </div>
</template>

<script>
import son from '@/components/son'

export default {
  name: 'index',
  components: {
    son
  },
  data () {
    return {
      first: 'father',
      toSon: 'father-to-son'
    }
  },
  computed: {
    four () {
      console.log('vue-computed-father : ' + this.first)
      return this.first
    }
  },
  watch: {
    first: {
      immediate: true,
      handler () {
        console.log('vue-watch-father : ' + this.first)
      }
    }
  },
  beforeCreate () {
    console.log('vue-before-create-father : ' + this.first)
  },
  created () {
    console.log('vue-created-father : ' + this.first)
  },
  beforeMount () {
    console.log('vue-before-mount-father : ' + this.first)
  },
  mounted () {
    console.log('vue-mounted-father : ' + this.first)
  },
  beforeUpdate () {
    console.log('vue-before-update-father : ' + this.first)
  },
  updated () {
    console.log('vue-updated-father : ' + this.first)
  },
  beforeDestroy () {
    console.log('vue-before-destroy-father : ' + this.first)
  },
  destroyed () {
    console.log('vue-destroyed-father : ' + this.first)
  },
  methods: {
  }
}
</script>

js

子组件代码

复制<template>
  <div class="index">
    <div class="text">{{four}}</div>
  </div>
</template>

<script>
export default {
  name: 'son',
  components: {
  },
  props: {
    fatherToSon: String
  },
  data () {
    return {
      first: 'son'
    }
  },
  computed: {
    four () {
      console.log('vue-computed-son : ' + this.first)
      console.log('vue-computed-son : ' + this.fatherToSon)
      return this.first
    }
  },
  watch: {
    first: {
      immediate: true,
      handler () {
        console.log('vue-watch-son : ' + this.first)
        console.log('vue-watch-son : ' + this.fatherToSon)
      }
    }
  },
  beforeCreate () {
    console.log('vue-before-create-son : ' + this.first)
    console.log('vue-before-create-son : fatherToSon is undefined')
  },
  created () {
    console.log('vue-created-son : ' + this.first)
    console.log('vue-created-son : ' + this.fatherToSon)
  },
  beforeMount () {
    console.log('vue-before-mount-son : ' + this.first)
    console.log('vue-before-mount-son : ' + this.fatherToSon)
  },
  mounted () {
    console.log('vue-mounted-son : ' + this.first)
    console.log('vue-mounted-son : ' + this.fatherToSon)
  },
  beforeUpdate () {
    console.log('vue-before-update-son : ' + this.first)
    console.log('vue-before-update-son : ' + this.fatherToSon)
  },
  updated () {
    console.log('vue-updated-son : ' + this.first)
    console.log('vue-updated-son : ' + this.fatherToSon)
  },
  beforeDestroy () {
    console.log('vue-before-destroy-son : ' + this.first)
    console.log('vue-before-destroy-son : ' + this.fatherToSon)
  },
  destroyed () {
    console.log('vue-destroyed-son : ' + this.first)
    console.log('vue-destroyed-son : ' + this.fatherToSon)
  },
  methods: {
  }
}
</script>

js

渲染控制台打印结果：

复制vue-before-create-father : undefined
vue-watch-father : father
vue-created-father : father
vue-before-mount-father : father
vue-computed-father : father

vue-before-create-son : undefined
vue-before-create-son : fatherToSon is undefined
vue-watch-son : son
vue-watch-son : father-to-son
vue-created-son : son
vue-created-son : father-to-son
vue-before-mount-son : son
vue-before-mount-son : father-to-son
vue-computed-son : son
vue-computed-son : father-to-son
vue-mounted-son : son
vue-mounted-son : father-to-son

vue-mounted-father : father

js

创建、渲染、监听、计算属性、data执行的先后顺序：

复制父组件 beforeCreate
父组件 data加载
父组件 watch(immediate: true)
父组件 created
父组件 beforeMount
父组件 computed //computed的属性没用到时不执行

子组件 beforeCreate
子组件 data加载
子组件 watch(immediate: true)
子组件 created
子组件 beforeMount
子组件 computed //computed的属性没用到时不执行
子组件 mounted 

父组件 mounted

js

渲染执行的先后顺序：

复制父组件 beforeCreate
父组件 created
父组件 beforeMount

子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted 

父组件 mounted

js

更新控制台打印结果：

复制vue-before-update-father : father

vue-before-update-son : son
vue-before-update-son : father-to-son
vue-updated-son : son
vue-updated-son : father-to-son

vue-updated-father : father

js

更新执行的先后顺序：

复制父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated

js

销毁控制台打印结果：

复制vue-before-destroy-father: father

vue-before-destroy-son : son
vue-before-destroy-son : father-to-son
vue-destroyed-son : son
vue-destroyed-son : father-to-son

vue-destroyed-father: father

js

销毁执行的先后顺序：

复制父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destroyed

js

销毁子组件控制台打印结果：

复制vue-before-update-father : father

vue-before-destroy-son : son
vue-before-destroy-son : father-to-son
vue-destroyed-son : son
vue-destroyed-son : father-to-son

vue-updated-father : father

js

销毁子组件：

复制父组件 beforeUpdate
子组件 beforeDestroy
子组件 destroyed
父组件 updated

js

推荐阅读

1、整理一下弹性布局知识点 2、推荐一下前端开发时npm源管理工具 3、强力推荐的idea插件，开发效率提升99% 4、初始TypeScript 5、记录第一次vue3.0+vite+ts+ant

关注公众号

关注贴吧：pei你看雪吧