文章目录

  • 生命周期
  • 定义
  • 流程
  • 常用的生命周期钩子
  • 关于销毁Vue实例


生命周期

定义

生命周期，又名生命周期回调函数、生命周期函数或生命周期钩子，是Vue在关键时刻调用的一些特殊函数。生命周期函数名称不可更改，但是函数内容可以根据需求进行编写。生命周期函数中的this指向vm或组件实例对象。

流程

参考官方文档的生命周期图示

new Vue()
初始化流程

  • . 初始化生命周期和事件，但数据代理还未开始
  • 调用beforeCreate方法（创建之前），此时无法通过vm访问data中的数据、methods中的方法
  • 初始化数据监视、数据代理
  • 调用created方法，此时可以通过vm访问data中的数据、methods中的方法
  • 解析模板，生成虚拟DOM，页面还不能显示解析好的内容
  • 调用beforeMount方法，此时页面呈现的是未经Vue编译的DOM结构，所有对DOM操作【最终】都不生效
  • 将内存中的 虚拟DOM 转成 真实DOM 并渲染到页面
  • 调用mounted方法，页面渲染Vue编译之后的DOM结构，对DOM的操作有效（尽量避免），初始化过程结束，一般在此进行开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作

更新流程（数据改变时）

  • 调用beforeUpdate，数据是新的，页面是旧的，页面和数据尚未保持同步
  • 根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，既完成Model → View的更新
  • 调用updated，数据和页面都是新的，页面和数据同步

销毁流程

  • 调用vm.$destroy，完全销毁一个实例，解绑vm上的指令及事件监听器（自定义事件）
  • 调用beforeDestroy，vm中的data、methods、指令等，都处于可用状态，一般在此阶段执行关闭定时器、取消订阅消息和解绑自定义事件等操作
  • 移除所有的监视、子组件和事件监听器（自定义事件）
  • 调用destroy，销毁vm

常用的生命周期钩子

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

关于销毁Vue实例

  1. 销毁后借助Vue开发者工具看不到任何信息
  2. 销毁后自定义事件会失效，但元素DOM事件不会
  3. 一般不会再beforeDestroy钩子中操作数据，因为即便操作数据，也不会在触发更新流程
<div id="root">
   <h2 :style="{opacity}">欢迎学习Vue</h2>
   <button @click="stop">停止</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    // 创建Vue实例
    new Vue({
        el: '#root',    // el用于定义当前Vue实例为哪个容器服务，值通常为css选择器
        data:{
            opacity: 1
        },
        methods: {
            stop() {
                this.$destroy();
            }
        },
        // Vue完成模板解析并把初始真实dom渲染到页面后调用
        mounted() {
            this.timer = setInterval(() => {
                    this.opacity -= 0.01;
                    if (this.opacity <= 0) this.opacity = 1
            }, 30);
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
    });
    // 通过外部方法实现（不推荐）
    // setInterval(() => {
    //     vm.opacity -= 0.01;
    //     if (vm.opacity <= 0) vm.opacity = 1
    // }, 16);
</script>