vue中的生命周期

解析vue生命周期

• Vue生命周期简介
  Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
  在这里插入图片描述
• 钩子函数（Hook）
  钩子是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息；钩子机制允许应用程序截获处理window消息或特定事件，钩子函数可以理解为js运行进程中在其特定段时的回调函数
• 生命周期的钩子 (lifecyclehook)
  Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。 在这里插入图片描述

<div class="app">
        <input type="button" value="修改" @click="msg='难受'">
        <p class="h3">{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '.app',
            data: {
                msg: "好嗨"
            },
            methods: {
                show() {
                    console.log('执行了show方法')
                }
            },
            beforeCreate() { //这里是第一个生命周期函数，表示实例被完全创建出来之前会执行它
                console.log(this.msg)      //undefined
                this.show() //      报错this.show is not a function
                    //注意  在beforeCreate生命周期函数执行的时候，data和methods中的数据都没有初始化


            },
            created() {
                console.log(this.msg)      //好嗨
                this.show()         //执行了show方法
                    //在created中，data和methods都已经被初始化
                    // 如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作

            },
            beforeMount() {
                //第三个生命周期函数，表示 模板已经在内存中编辑完成，但是尚未把模板渲染到页面上
                console.log(document.getElementsByClassName('h3')[0].innerHTML)       //{{msg}}
                    //在控制台输出的是{{msg}}
                    // 在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串

            },
            mounted() {
                // 第四个生命周期函数，表示内存中的模板，已经真实的挂载到了页面上，用户已经可以看到渲染好的页面
                console.log(document.getElementsByClassName('h3')[0].innerHTML)      //好嗨
                    //注意 mountend 是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好，此时，如果没有其他操作的话，这个实例，就静静的躺在我们的内存中。
            },



            //接下来是运行中的两个事件
            beforeUpdate() {
                //这时候，表示，我们的界面没有被更新，数据肯定被更新了


                console.log('界面上元素的内容：' + document.getElementsByClassName('h3')[0].innerHTML)     //好嗨

                console.log('data中的数据：' + this.msg)     //难受
                    //当执行beforeUpdate的时候，页面中的显示数据，还是旧的，data里的数据是最新的，页面尚未和data中的数据保存同步。

            },
            updated() {

                console.log('界面上元素的内容：' + document.getElementsByClassName('h3')[0].innerHTML)     //难受

                console.log('data中的数据：' + this.msg)      //难受
                    //updata事件执行的时候，页面和data数据已经保持同步了，都是最新的。
            }
        })
    </script>

created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态，此时如果做DOM请求时会报错,页面还没有渲染出来

mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick

beforeCreate，created，beforeMount，mounted 是自动被调用

beforeUpdate, updated,beforeDestroy,destroyed 是手动调用

子组件的created 优先于父组件的created 执行， 父组件的beforeCreate 优先于子组件的beforeCreate

子组件的mounted优先于父组件的mounted， 父组件的beforeMount 优先于子组件的 beforeMount
子组件的destroyed优先于父组件的beforeDestroy， 父组件的beforeDestroy 优先于子组件的 beforeDestroy

• 还有 两个钩子函数表中没有
  activated： 在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用，该钩子在服务器端渲染期间不被调用。
  deactivated： keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。