vue钩子生命周期及父子组件生命周期执行顺序

209 阅读1分钟

vue的生命8个生命周期

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroy

new Vue()的时候,初始化事件生命周期

各个生命周期分别做了哪些事情

beforeCreate

初始化

created

Vue.$data 已经初始化
父子组件共存时,会优先执行父组件的created,再执行子组件的created事件, 这说明父组件需要线创造容器,然后才能在创建子组件

beforeMount

Vue.$el挂在前

mounted

Vue.$el已经挂在完成 父子组件共存时,会优先执行子组件的mounted,在执行父组件的mounted,这很好去理解,子组件时零散的,可能有很多个,只有完成一个个零散的子组件的dom,才能将一个完整的dom去挂载到$el上

当父子组件共存时,事件加载顺序时这样的:

  • beforeCreated父节点
  • created父节点
  • beforeMount父节点
  • beforeCreated子节点
  • created子节点
  • beforeMount子节点
  • mounted子节点
  • mounted父节点

beforeUpdate

当data里的数据更改时

updata

当data里的数据更改时

当父组件向子组件传值时,且父组件值有变更时,执行顺序时这样的:

  • beforeUpdate父节点
  • beforeUpdate子节点
  • updated子节点
  • updated父节点

beforeDestroy

销毁组件前

destroy

销毁组件 使用 v-if 时切换条件可触发beforeDestroy和destroy钩子事件

练习代码示例

<html lang="cn-Zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
        <input v-model="message">
        <button v-on:click="changestatus">切换</button>
        <todo-item v-if="status"  v-bind:message="message"></todo-item>
    </div>
    <script>
        Vue.component('todo-item', {
            template: '<div> <span v-on:click="change">{{ message}}</span><input v-model="msg"/></div>',
            props: ['message'],
            data() {
              return {
                    msg:this.message
              }
            },
            methods: {
                change(){
                    this.message = 111;
                }
            },
            beforeCreate() {
                console.log('beforeCreated子节点')
            },
            created() {
                console.log('created子节点')
            },
            mounted() {
                console.log('mounted子节点')
            },
            beforeMount() {
                console.log('beforeMount子节点')
            },
            beforeUpdate(){
               console.log('beforeUpdate子节点')

            },
            updated(e) {
                console.log('upouted子节点')
            },
            beforeDestroy(){
                 console.log('beforeDestory子节点')
            },
            destroyed(){
                 console.log(' destoryed子节点')
            }
        })
        
        var app = new Vue({
            el: '#app',
            data: {
                message: '默认值',
                status: true
            },
            beforeCreate() {
                console.log('beforeCreated父节点')
            },
            created(){
                console.log('created父节点')
            },
            beforeMount(){
                console.log('beforeMount父节点')
            },
            mounted() {
                console.log('mounted父节点')
            },
            updated(){
                console.log('upouted父节点')
            },
            beforeUpdate() {
                console.log('beforeUpdate父节点')

            },
            beforeDestroy() {
                console.log('beforeDestory子节点')
            },
            destroyed() {
                console.log(' destoryed子节点')
            },
            methods: {
                onshow(){
                    console.log(this.message);
                    this.message = this.message.split('').reverse().join('');
                },
                changestatus(){
                    this.status = !this.status;
                }
            }
        });
    </script>
</body>
</html>```