vue2-生命周期

最新推荐文章于 2024-07-17 21:55:10 发布

2301_79797358

最新推荐文章于 2024-07-17 21:55:10 发布

阅读量557

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_79797358/article/details/140147388

版权

一、何为生命周期

Vue2 的生命周期指的是组件在被创建、渲染和更新等过程中，系统自动调用的一些钩子函数。这些钩子函数允许开发者在组件不同状态下执行自定义的逻辑

二、整体流程

beforeCreate:在初始化之前执行的函数
Created:在初始化之后执行的函数

beforeCreate是在Vue实例创建之前执行的函数。在这个阶段，Vue实例尚未初始化，data和methods等属性都不可用。通常在beforeCreate中可以进行一些初始化操作，比如读取配置文件、请求数据等。

created是在Vue实例创建之后执行的函数。在这个阶段，Vue实例已经创建完成，data和methods等属性都已经初始化。通常在created中可以进行一些初始化操作，比如发送请求、订阅事件等。
beforeMount：在组件内容被渲染到页面之前自动执行的函数（此时无法找到任何模板DOM节点）
mounted：在组件内容被渲染到页面之后自动执行的函数

beforeMount钩子函数在组件模板编译成Virtual Dom之后，但在真实DOM挂载之前执行，此时页面上还没有对应的DOM元素。它可以用于执行一些在挂载之前必须要完成的操作，例如初始化一些数据、订阅事件等。

mounted钩子函数在组件模板编译成Virtual Dom之后，并且真实DOM已经挂载到页面上后执行。此时可以对真实DOM进行操作，例如获取DOM元素的引用，添加事件监听等。mounted钩子函数常用于需要在组件挂载到页面上后进行的操作，例如获取远程数据、初始化第三方库等。

beforeMount和mounted钩子函数都只会在组件初次渲染时执行一次，不会在组件更新时重复执行。
beforeUpdate：在数据将要变化之前自动执行的函数
updated：在数据发生变化之后自动执行的函数

在Vue.js中，有两个钩子函数可以用来监听数据的变化：beforeUpdate和updated。

beforeUpdate钩子函数会在数据发生变化之前被自动执行。这个钩子函数可以用来做一些准备工作，例如在数据变化之前发送请求，更新一些临时变量等。在执行这个钩子函数期间，组件的数据和DOM还没有发生变化。

updated钩子函数会在数据发生变化之后被自动执行。这个钩子函数可以用来做一些与DOM相关的操作，例如更新视图、调用第三方库的方法等。在执行这个钩子函数期间，组件的数据和DOM已经完成了更新。

这两个钩子函数只会在组件实例中被自动调用，而不是在每个数据变化时都会被调用。如果想要监听某个具体的数据变化，可以使用watch选项或computed属性来实现。
beforeUnmount：在vue实列销毁之前自动执行的函数
unmounted：在vue实列销毁之后自动执行的函数

beforeUnmount和unmounted都是Vue生命周期钩子函数中的两个阶段。

beforeUnmount钩子函数在Vue实例销毁之前自动执行。在这个阶段，可以进行一些清理工作，例如取消订阅、解绑事件监听器、清除定时器等。这个函数的执行时机是在Vue实例销毁前，但是DOM元素仍然存在的时候。

unmounted钩子函数在Vue实例销毁之后自动执行。在这个阶段，可以进行一些清理工作，例如释放资源、清除副作用等。这个函数的执行时机是在Vue实例销毁后，DOM元素也已经被销毁的时候。

在beforeUnmount和unmounted这两个阶段中，Vue实例已经被销毁，所以无法再通过this来访问Vue实例的属性和方法。在这两个阶段中，可以使用普通的JavaScript语法进行操作。