vue生命周期回顾

时间:2020-9-16 作者:admin

vue 生命周期:

vue 官网生命周期图片

<font color=#ff0000>生命周期就是组件实例出来到销毁的一系列过程。分为挂载阶段、更新阶段、销毁阶段。</font>

<font color=#ff0000>一、挂载阶段</font>

<font color=yellow>

— 主要是组件的实例化,模板解析 然后 render 生成 vnode 节点(这时候已经实现响应式了),最后挂载到页面 el 上,第一次渲染完成

</font>

(1)new Vue():初始化一个 vue实例;

(2)beforeCreate:开启了生命周期钩子函数,初始化事件;

(3)created:可以在此进行数据的请求,但是这一阶段的 dom没有渲染;同时,此阶段对数据进行了观测,有了 data属性,初始化 data 数据(实现响应式);

(4)beforeMount

① 先判断有木有el选项,如果有的话,就直接向下去执行;如果没有的话,则 vue 实例会处于一种“未挂载”的状态,此时通过 vm.$mount 来手动执行挂载;

② 有el继续向下执行:

如果vue实例中有template的话,则将其作为模板编译 render函数;

如果没有template模板的话,则将外部的 html 作为模板进行编译;

如果既有template也有outer HTML,那么template的优先级会高于outer HTML;

如果vue实例中还有一个render函数的话,他是以 createElement 作为的参数,然后做渲染操作的,我们可以直接嵌入 JSX;

**<font color=#ff0000>

render 函数 > template 模板 > outer Html

</font>**

new Vue({

 el:"#app"

})

(4)mounted:给 vue 实例对象添加$el成员,并且需要替换掉挂载在dom元素,在beforeMount中的打印的el还是undefined

在 mounted 之前还是通过变量进行的占位,eg: <div>{{msg}}</div>,mounted 之后,可以看到msg是有赋值的;

<font color=#ff0000>二、更新阶段</font>

<font color=yellow>

— 主要是 data 变化触发响应式 setter 方法,重新 render 生成 vnode 节点,通过 diff 算法对比新旧 vnode 节点,进行 patch 打补丁,更新渲染完成

</font>

(5)beforeUpdate:dom 没有渲染,可修改数据不会进行二次渲染;

(6)updated:已经渲染生成了 dom 节点,通过 diff 算法对比新旧 dom,对变化的地方进行更新,也就是进行 patch 打补丁[patch(vnode,newVNode)]

<font color=#ff0000>三、卸载(销毁)阶段</font>

<font color=yellow>

— 主要是卸载所有的 watchers,子组件以及事件(执行清理工作的阶段)

</font>

(7)beforeDestroy:此阶段是销毁工作前;

(8)destroyed:通过 this.$destroy()进行销毁,会主动的清理自己的内容(比如:响应式的数据,@click 绑定事件,清理开启的定时器,移除手动创建的 dom 对象等)

(9)activited 和 deactivated

**<font color=#ff0000>

注意:只有当组件在被<keep-alive></keep-alive>进行包裹的时候才会有 activiteddeactivited

</font>**

<keep-alive>包裹两个组件:

组件 A 和组件 B。

当第一次切换到组件 A 时,组件 A 的 createdactivated生命周期函数都会被执行,这时通过点~~~~击事件改变组件 A 的文字的颜色,再切换到组件 B,这时组件 A 的 deactivated的生命周期函数会被触发;

在切换回组件 A,组件 A 的 activated生命周期函数会被触发,但是它的 created生命周期函数不会被触发了,而且 A 组件的文字颜色也是我们之前设置过的。

(10)errorCaptured当捕获一个来自子孙组件的错误时被调用

vue生命周期回顾

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。