生命周期

生命周期是什么

生命周期就比如你人的一生，从出生=>成年=>老去=>死亡，就是人一生的每一个时间节点。

那vue的生命周期是什么呢?

vue的生命周期也就是Vue在关键时刻帮我们调用的一些特殊名称的函数

vue实例产生的过程:

1. beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用

注意:无法利用vm访问到data中的数据、methods中的方法

2. created 实例创建完成初始化数据监测、数据代理后被调用

注意:可以通过vm访问到data中的数据、methods中的方法

3. beforeMount 在挂载开始之前被调用(生成虚拟DOM页面还不显示解析好的内容)

4. mounted 将内存的虚拟DOM转为真实DOM插入页面

页面呈现的是经过Vue编译的DOM
对Dom的操作均有效(尽可能避免)至此初始化过程结束，一般在此进行:开启定时器、发送网络请求、订阅消息、绑定指定义事件、等初始化

5. beforeUpdate 数据更新时调用，但页面的真实DOM未更新

此时：数据是新的，但页面是旧的，即:页面尚未知和数据保持同步,还没有实现Model=>View的过程

6. updated 数据更新完成调用(完成了Model=> View的更新)

根据新数据，生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面更新,完成了Model=> View的更新

7. beforeDestroy

vm中所有:data、methods、指令等等,都处于可以状态，马上要执行销毁过程，一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件收尾操作

8. destroyed

完成Vue的实例销毁

<div id="root">
        <div :style="{opacity}">我是数字:{{num}}{{msg}}</div>
        <button @click="handles">点击加1</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#root",
            data: {
                opacity: 1,
                msg: "看看我加载没有",
                num: 1
            },
            methods: {
                handles() {
                    this.num += 1
                }
            },
            // 初始化化生命周期、事件，但数据代理还未开始
            beforeCreate() {
                //无法利用vm访问到data中的数据、methods中的方法
                console.log('beforeCreate')
                console.log(this.num)

            },
            // 初始化:数据监测、数据代理
            created() {
                //可以通过vm访问到data中的数据、methods中的方法
                console.log('created')
                console.log(this.num)
            },
            beforeMount() {
                // 页面呈现的是未经Vue编译的DOM结构，所有的DOM操作最终都不生效
                console.log('beforeCreate')

            },
            // 将内存的虚拟DOM转为真实DOM插入页面
            mounted() {
                // 页面呈现的是经过Vue编译的DOM
                // 对Dom的操作均有效(尽可能避免)
                // 至此初始化过程结束，一般在此进行:开启定时器、发送网络请求、订阅消息
                // 绑定指定义事件、等初始化
                /*  setInterval(() => {
                     this.opacity -= 0.01
                     if (this.opacity <= 0) {
                         this.opacity = 1
                     }
                 }, 16) */
            },
            // 数据发生改变时
            beforeUpdate() {
                // 此时：数据是新的，但页面是旧的，即:页面尚未知和数据保持同步
                console.log("beforeUpdate")
                this.msg = 123
            },
            // 根据新数据，生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面更新,完成了Model=> View的更新
            updated() {
                // 数据是新的，但页面是旧的，即:页面尚未知和数据保持同步,还没有实现Model=>View的过程
                console.log("update")
            },
            beforeDestroy() {
                // vm中所有:data、methods、指令等等,都处于可以状态，
                // 马上要执行销毁过程，一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件收尾操作
                console.log("beforeDestroy");
            },
            destroyed() {
                console.log("destroyed");
                debugger
            }
        })
    </script>

生命周期(生命周期回调函数、生命周期钩子、生命周期函数)

生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的

生命周期函数中的this指向是vm或组件实例对象。

生命周期(上).jpg

生命周期(下)_看图王.jpg

常用的生命周期钩子:

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

销毁后借助Vue开发工具看不到任何信息。
销毁后自定义事件会失效,但原生DOM事件依然有效。
一般不会在beforeDestroy操作数据,因为即便操作数据，也不会再触发更新流程了。

Vue(生命周期)