Fork me on GitHub

Vue生命周期

发表于 | 分类于 |
字数统计: 1.3k | 阅读时长 ≈ 4 min

每个 Vue 实例在被创建时都要经过一系列的初始化过程，在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期。

vue的生命周期

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

过程

beforeCreate

el 和 data 并未初始化。在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

主要应用: 通常用于插件开发中执行一些初始化任务。

在beforeCreate和created钩子函数之间的生命周期

options init

created

完成了 data 数据的初始化，el未初始化。实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

主要应用：调用数据，调用方法，调用异步函数。

created钩子可以获取Vue的data，调用Vue方法，获取原本HTML上的直接加载出来的DOM，但是无法获取到通过挂载模板生成的DOM（例如：v-for循环遍历Vue.list生成li）

created钩子函数和beforeMount间的生命周期

首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。

template参数选项的有无对生命周期的影响。

  • 如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。
  • 如果没有template选项，则将外部HTML作为模板编译。
  • 可以看到template中的模板优先级要高于outer HTML的优先级。

在vue对象中还有一个render函数，它是以createElement作为参数，然后做渲染操作，而且我们可以直接嵌入JSX.（嵌入JSX应该要引入babel-plugin-transform-vue-jsx这个插件）

优先级：render函数选项 > template选项 > outer HTML.

beforeMount和mounted 钩子函数间的生命周期

给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。beforeMount之前el上还是undefined。

  • beforeMount:在挂载开始之前被调用：相关的 render 函数（模板）首次被调用。 例如通过v-for生成的html还没有被挂载到页面上

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 有初始值的DOM渲染，可以对DOM进行操作。

当你vue没有挂在el时，我们可以用$mount

1
2
3
var app = new Vue({
  data:{message:'hello'},
}).$mount(#app);

主要应用：访问数据和DOM元素、访问子组件

beforeUpdate钩子函数和updated钩子函数间的生命周期

data中的数据发生了改变，会触发对应组件的重新渲染

  • beforeUpdate:数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 当我们更改Vue的任何数据，都会触发该函数
  • updated:组件 DOM 已经更新,可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。

beforeDestroy和destroyed钩子函数间的生命周期

  • beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。主要用于销毁定时器或取消订阅
  • destroyed:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

Vue3生命周期

  • setup取代beforeCreate和created
  • beforeMount -> onBeforeMount，在挂载前被调用
  • mounted -> onMounted，挂载完成后调用
  • beforeUpdate -> onBeforeUpdate，数据更新时调用，发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改，但还没有更新到页面上
  • updated -> onUpdated，数据更新后调用，此时内存数据已经修改，页面数据也已经更新
  • beforeDestroy -> onBeforeUnmount，组件卸载前调用
  • destroyed -> onUnmounted，卸载组件实例后调用。
  • errorCaptured -> onErrorCaptured，每当事件处理程序或生命周期钩子抛出错误时调用
  • activated -> onActivated，与keep-alive一起使用，当keep-alive包裹的组件激活时调用
  • deactivated -> onDeactivated，与keep-alive一起使用，当keep-alive包裹的组件停用时调用
  • onRenderTracked，状态跟踪，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有update，就会跟踪他们并返回一个event对象
  • onRenderTriggered，状态触发，同样是vue3新引入的钩子函数，只有在开发环境有效，定点追踪发生改变的数据，同样返回一个event对象

为什么setup中没有created?

组件实例在setup内部已经创建，不需要用到created钩子。

参考

详解vue生命周期

-------------完结撒花 -------------