vue的生命周期

三个基本概念:

挂载

• 宏观概念上的挂载，在执行 new Vue() 的时候,Vue会先解析模板,将模板编译成一个render函数,然后render函数调用会得到虚拟DOM,并把虚拟DOM转为真实DOM 挂载到一个真实的 DOM容器上,这样Vue实例就会DOM容器产生的关联,这个过程称作为挂载
• 微观上的挂载：指的是在vue生命周期中，将虚拟dom转为真实dom的过程

编译

将Vue模板语法转换成虚拟DOM的过程

渲染

将虚拟DON转换成真实DOM的过程

vue生命周期详解

生命周期-初始化阶段

• Vue或者某个组件被实例化,则进入初始化阶段 init Events & lifecycle（执行的操纵）:初始化Vue或者组件实例的内部事件处理系统和生命周期系统

初始化其实整个生命周期也是一个事件，经常被称为内置事件

• 【beforeCreate】（事件函数）：(数据初始化和数据劫持)创建之前,在这个阶段我们无法拿到数据,数据还没有开始初始化

数据劫持：它通过劫持 JavaScript 对象的 getter 和 setter 方法去监听数据变化，一旦数据发生变化，就可以自动更新视图，这样就能实现数据与视图之间的同步。当给一个对象中的某个属性绑定一个数据时，Vue 会使用 Object.defineProperty 方法拦截这个属性的 getter 和 setter 方法，从而实现数据劫持。

• init injections & reactivity（执行操纵）:初始化data数据注入及完成数据劫持(把数据转为响应式数据)，同时也会初始化props，computed，methods等选项

初始化：将配置项中data等数据注入到vue实例上

• 【created】（事件函数）事件函数:数据初始化和数据劫持 创建之后,这个是最早可以操作数据的生命周期函数

可以根据单词的时态做事件函数的区分

生命周期-编译阶段

• 首先判断Vue的配置项中是否存在el选项， 如果有el选项则继续向下判断,如果没有el选项则等待使用vm.$mount提供el选项,否则一直等待
• 然后判断有没有template的选项 如果有template,则把模板直接编译得到一个render函数,render函数返回虚拟DOM 如果没有template,则把el这个容器的outerHTML作为模板进行编译

理解outerHTML和innerHTml innerHTml是标签中的文本内容，而outerHTML是包含当前这个标签和里面的文本内容

生命周期-挂载阶段:

• 【beforeMount】（事件函数）: 挂载之前。此时视图呈现仍然是未被解析的Vue模板结构,在这个位置也不能操作DOM，执行之后仍然显示的式模板的元素样式

• 挂载：把Vue实例挂载的el的容器上,(根据render函数返回的虚拟DOM创建真实DOM并替换指定的el容器)
• 【mounted】（事件函数）:挂载之后,页面中呈现的是渲染成的真实DOM,我们一般在这个阶段进行初始化操作(初始化请求数据,初始化订阅,绑定自定义事件,开启定时器等等)

像定时器、请求数据等，这些异步函数，其实写其他的阶段，也是可以实现的，因为异步函数会在同步代码执行完后进行加载执行。 挂载阶段：个人理解就是将虚拟dom转为真实dom

生命周期-更新阶段

• 当响应式数据改变的时候,进入更新流程
• 【beforeUpdate】（事件函数）: 数据改变后,视图更新前
• 更新:得到新的虚拟DOM并使用patch函数进行diff算法比较后更新真实DOM（dom更新）
• 【updated】（事件函数）: 数据改变后,视图也更新后

验证每一阶段其实可以使用debugger；进行断点调试，当beforeUpdate执行完之后，还没有执行updated的时候，数据发生了改变，但是视图却还没有发生改变

生命周期-销毁阶段

• 当Vue实例调用$destroy方法的时候 或者 组件被条件渲染或者路由切换的时候被销毁时则进入销毁阶段，当调用$destroy方法进入销毁阶段之后是不可逆的，执行是单向的
• 【beforeDestroy】（事件函数）: 实例销毁之前,主要是为了完成一些收尾的工作,比如清除定时器,取消订阅等等
• teardown watchers（执行的操纵）:实例销毁的时候,取消所有的watcher订阅

watcher 是 Vue.js 内部的一种机制，用于订阅并响应数据的变化。当一个数据被订阅时，watcher 会监听到该数据的变化，并在变化时执行相应的回调函数。在 Vue.js 内部，每个组件都有自己的 watcher 实例，用于监听该组件中所用到的数据的变化。当这些数据发生变化时，watcher 会通知组件进行重新渲染。这样就实现了响应式的数据绑定。

• teardown child components（执行的操纵）: 实例被销毁的时候,取消所有的子组件的实例
• teardown eventlisteners（执行的操纵）: 实例被销毁的时候,取消所有的事件监听器
• 【destoryed】（事件函数）: 实例销毁之后,一般不使用这个钩子函数

vue生命周期销毁和react的销毁阶段是不同的 vue的销毁，是将与视图之间的联系切断，vm实例是还在，视图也是还在，dom显示未变，但是整个视图仅仅是一个单纯的页面了，vue不再给它提供任何操作 react的销毁，是删除整个dom节点，视图都没了 因为vue的销毁阶段的特性，所以一些设置的属性，定时器等，需要在销魂阶段手动清除。