vue生命周期

南雨北斗
107 阅读4分钟

  1. 创建阶段（Creation）

    • beforeCreate

      • 触发时机：在实例初始化之后，数据观测（data observer）和事件配置（event/watcher setup）之前被调用。
      • 组件状态：此时，组件的data和methods等还没有被初始化，无法访问组件中的数据和方法。例如，在这个阶段，this.message（假设组件中有一个data属性message）是undefined。
      • 用途：通常用于一些全局配置，如加载一些插件或者初始化一些不依赖于组件数据的变量。

    • created

      • 触发时机：在实例创建完成后被调用。这时候，数据观测（data observer）、属性和方法的运算、watch/event 事件回调都已经配置完成。
      • 组件状态：可以访问组件的数据（data）和方法（methods），但是组件的模板（template）还没有被渲染成真实的 DOM 元素，也就是说还没有挂载到页面上。例如，可以在这个阶段进行数据的初始化操作，像调用一个初始化数据的函数initData()。
      • 用途：常用于发送初始数据请求，例如通过axios等库从服务器获取数据，然后将数据赋值给组件的data属性。

  2. 挂载阶段（Mounting）

    • beforeMount

      • 触发时机：在挂载开始之前被调用，此时模板（template）已经编译好了，但是还没有将编译后的模板替换成真实的 DOM 元素。
      • 组件状态：可以访问组件的数据和方法，并且虚拟 DOM（Virtual DOM）已经创建，但是真实的 DOM 还没有更新。例如，通过this.$el访问组件的根 DOM 元素时，它可能只是一个注释节点或者一个未渲染的占位符。
      • 用途：可以在这个阶段进行一些在挂载前的最后调整，比如修改组件的data属性，这些修改仍然会在挂载时反映到 DOM 中。

    • mounted

      • 触发时机：在组件挂载完成后被调用，这意味着组件的模板已经渲染成真实的 DOM 元素并插入到文档（document）中。
      • 组件状态：可以安全地访问和操作 DOM 节点。此时组件已经完全渲染到页面上，用户可以看到组件的内容。
      • 用途：如前面所述，用于 DOM 操作、第三方库初始化、发送初始数据请求等。

  3. 更新阶段（Updating）

    • beforeUpdate

      • 触发时机：在数据更新时，虚拟 DOM 重新渲染和打补丁（patch）之前被调用。
      • 组件状态：此时组件的数据已经更新，但是 DOM 还没有更新。可以在这个阶段访问最新的组件数据，并且可以通过比较新旧数据来决定是否需要进行某些操作。
      • 用途：可以在这个阶段对即将更新的 DOM 进行一些预处理，例如记录某些 DOM 状态或者执行一些在更新前需要完成的计算。

    • updated

      • 触发时机：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁（patch）之后被调用。
      • 组件状态：DOM 已经更新，组件数据和 DOM 保持同步。可以访问更新后的 DOM 元素来检查更新是否符合预期。
      • 用途：可以在这个阶段执行依赖于 DOM 更新后的操作，比如获取更新后的元素高度、宽度等属性，或者检查更新后的样式是否正确。不过要注意避免在这个阶段引起无限循环更新，因为任何对数据的修改都会再次触发更新生命周期。

  4. 销毁阶段（Destruction）

    • beforeDestroy

      • 触发时机：在实例销毁之前被调用。
      • 组件状态：组件仍然完全可用，数据和方法都可以访问。此时可以进行一些清理工作，如清除定时器、取消网络请求、解绑事件监听器等。
      • 用途：确保在组件销毁时不会留下一些可能导致内存泄漏或者其他问题的资源。例如，如果在组件中设置了一个定时器setInterval，可以在这个阶段使用clearInterval来清除它。

    • destroyed

      • 触发时机：在实例销毁之后被调用。

      • 组件状态：组件的所有指令都已经解绑，所有的事件监听器都已经被移除，子组件也都已经被销毁。此时组件已经不存在了，不能再访问组件的数据和方法。

      • 用途：主要用于一些善后工作，比如释放组件占用的资源后的一些日志记录或者通知其他相关组件。

整个 Vue 生命周期可以通过下面的示意图来直观理解：

beforeCreate -----> created -----> beforeMount -----> mounted
    |                        |                            |
    |                        |                            |
    |                        |                            |
    V                        V                            V
beforeUpdate <---- updated <---- beforeDestroy <---- destroyed

理解 Vue 生命周期对于正确地初始化组件、处理数据更新和清理资源等操作至关重要，能够帮助开发者编写出更加健壮和高效的 Vue 应用程序。

avatar
文章
阅读
粉丝