Vue中的生命周期

生命周期初始化流程

通常也叫叫命周期回调函数、生命周期函数、生命周期钩子

vue初始化时在不同的阶段调用的不同函数

生命周期函数的 this 指向为vue实例，名字不能更改

<script>
    new Vue({
        el: '#app',
        data: {
            name: "生命周期"
        },
        beforeCreate() {
            // console.log(this.name);  // undefined
            // 这个时候还 data 数据 和 methods 方法还不能使用
        },
        create(){
            console.log(this.name);  // 生命周期
            // data 和 methods 内的数据已经可以使用，不能操作dom显示不能页面
        },
        beforeMount() {
            // 可以操作虚拟dom了，但是之后在虚拟dom转真实dom的时候可能被真实dom覆盖
        },
        mounted() {
            // 页面可以显示dom了，vue的初始化过程结束，用户可在此进行：定时器、网络请求、订阅消息、绑定事件等
        }
    })
</script>

mounted

帮我们执行定时器、绑定事件、订阅消息等

vue完成模板的解析后（把真实DOM放到⻚⾯，挂载完毕）再调用

<script>
    new Vue({
        el: '#app',
        data: {},
        mounted() {
            console.log("mounted是vue给使用者提供的在初始化时自动执行的钩子回调函数");
        }
    })
</script>

生命周期数据更新流程

<script>
    new Vue({
        el: '#app',
        data: {
            name: "生命周期"
        },
        beforeUpdate() {
            // 当数据发生变化时，执行到这里，data数据是新数据，页面还未渲染显示的是旧数据
        },
        update() {
            // 当数据发生变化时，执行到这里，data数据是新数据，页面数据也是新的
        }
    })
</script>

生命周期销毁流程

<script>
    new Vue({
        el: '#app',
        data: {
            name: "生命周期"
        },
        beforeDestroy() {
            // 此阶段可以关闭定时器和取消订阅
            // 数据、方法可以访问但不触发更新
        },
        destroy() {
            // 一切都结束了
        }
    })
</script>