关于vue.js:vue组件的生命周期

5次阅读

共计 1484 个字符，预计需要花费 4 分钟才能阅读完成。

vue2 中生命周期钩子函数大抵分为三个阶段，8 个生命周期钩子函数。别离是：
vue2 和 vue3 钩子函数 — 选项式 API

beforeCreate(){} — 创立前，还无法访问组件中的数据
created(){} — 创立后，能够拜访组件中的数据
beforeMount(){} — 挂载前，跟 created 一样能够拜访组件中的数据，但还不能拜访渲染好的 dom 元素
mounted(){} — 挂载后，数据和渲染好的 dom 元素都能够拜访了
beforeUpdate(){} — 更新前，能够拜访要更新的数据，但无法访问更新后的 dom 节点
updated(){} — 更新后，能够拜访更新后的 dom 节点了
beforeDestroy(){} — 销毁前，还能够拜访组件中的数据和 dom 构造
destroyed(){} — 销毁后，拜访不到组件中的数据和 dom 构造了。

三个阶段别离是：

创立阶段
- 初始化 vue 实例，生命周期还没有开始
- 初始化外部的一些事件(开始监听数据)，这时生命周期开始
- 注入数据，开始劫持(这个时候 vue 实例下面就有了响应式数据)
- 判断是否有 el 选项，没有的话，就会始终期待 vue 实例调用 $mounte 办法传入 el
  - 如果有，就将 template 提供的构造编译在渲染函数中
  - 如果没有：就编译 el 的outerHTML，让它成为渲染模版
- 给 vue 实例创立 $el 属性，值是编译好的模版构造，并应用编译好的模版构造，将传入的 el 内容替换掉(就是将编译好的内容，显示在页面中)
更新阶段
- vue 始终期待数据的更新
- 数据更新后，从新渲染页面(异步行为 – 等所有同步执行实现后再执行异步)
销毁节点
- vue 始终期待调用 $destroy 销毁办法
- 调用办法后就销毁实例，当前再改数据，页面也不会响应了。

vue3 钩子函数 — 组合式 API

onBeforeMounte(()=>{}) — 挂载前，跟 created 一样，能够拜访组件中的数据，然而还不能够拜访渲染好的 dom 节点
onMounted(()=>{}) — 挂载后，能够拜访数据和渲染好的 dem 节点了
onBeforeUpdate(()=>{}) — 更新前，能够拜访要更新的数据(更新前的数据), 还不能拜访更新后的数据和节点
onUpdated(()=>{}) — 更新后，更新后的 Dom 节点能够拜访了
onBeforeUnmounte(()=>{}) — 销毁前，还能够拜访数据和 dom 构造
onUnmounted(()=>{}) — 销毁后，拜访不到数据和 dom 节点了
ps: 因为setup 语法，一开始就曾经能够拜访到响应式数据了，所有没有创立前 (beforeCreate) 和创立后(created) 的钩子函数了。

动静组件没有销毁前后的两个生命周期钩子函数，然而会多出两个显示和暗藏的生命周期钩子函数。

onActivated(()=>{}) — 显示，组件显示时触发
onDeactivated(()=>{}) — 暗藏，组件暗藏时触发

vue3 的生命周期和 vue2 的生命周期执行程序是一样。只不过没有了 beforeCreate 和 created 这两个生命周期，它们被 setup 替换掉了，就是说 setup 等于 beforeCreat 和 created。
在 setup 中间接就能够定义响应式数据。