当前位置：首页 > news >正文

Vue开发系列——Vue 生命周期钩子及常见知识点

news 来源：原创 2025/5/30 20:13:47

一、生命周期钩子简介

二、 Vue 组件中常用的生命周期钩子

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

三、Vue嵌套组件生命周期执行顺序

四、Vue生命周期常见知识点

一、生命周期钩子简介

Vue的生命周期：Vue实例从创建到销毁的过程称为生命周期，包括初始化数据、编译模板、挂载DOM、渲染、更新和销毁等一系列过程‌

Vue.js 提供了生命周期钩子（Lifecycle Hooks），允许开发者在组件的不同阶段执行代码。

✔️这些生命周期钩子提供了对组件状态变化的响应能力，例如在组件创建前后、渲染前后、更新前后以及销毁前后等时刻执行特定的逻辑。

二、 Vue 组件中常用的生命周期钩子

生命周期：

初始化
挂载
更新
销毁

beforeCreate

在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
示例：在这个阶段，组件的 data 和 methods 等尚未初始化

beforeCreate() {console.log('组件实例刚被创建，组件的 data 和 methods 等尚未初始化');
}

created

在实例创建完成后被立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
示例：在这个阶段，可以执行如 API 调用的操作。

created() {console.log('组件实例已创建，属性已绑定，但DOM还未生成，$el属性还不行用');this.fetchData(); // 例如，从API获取数据
}

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。
示例：在这个阶段，可以访问到 DOM，但不能修改它（因为尚未挂载）

beforeMount() {console.log('模板和挂载前的钩子，可以访问到 DOM，但不能修改它');
}

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当 mounted 被调用时文档内元素已经被插入。
示例：在这个阶段，可以访问和操作 DOM

mounted() {console.log('可以访问和操作 DOM');this.$nextTick(function () {// DOM 更新后的回调函数});
}

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
示例：在这个阶段，可以获取更新前的 DOM 状态

beforeUpdate() {console.log('数据更新之前调用，发生在虚拟DOM打补丁之前');
}

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新。
示例：在这个阶段，可以执行依赖于 DOM 的操作。

updated() {console.log('由于数据更改导致的虚拟DOM重新渲染和打补丁之后会调用这个钩子');
}

beforeDestroy

在实例销毁之前调用。在这一步，实例仍然完全可用。
示例：在这个阶段，可以执行清理操作，如定时器清除等。

beforeDestroy() {console.log('实例销毁前调用');clearInterval(this.myInterval); // 清除定时器等清理工作
}

destroyed

在 Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。
示例：在这个阶段，执行最终的清理工作。

destroyed() {console.log('Vue 实例销毁后调用');
}

三、Vue嵌套组件生命周期执行顺序

四、Vue生命周期常见知识点

✔️第一次页面加载会触发哪几个钩子？‌

第一次页面加载会触发beforeCreate、created、beforeMount和mounted这几个钩子‌✔️DOM渲染在哪个周期中完成？‌DOM渲染在mounted周期中完成‌

✔️每个生命周期阶段具体适合哪些场景？‌

beforeCreate和created：适合初始化操作，如设置全局变量。
beforeMount和mounted：适合DOM操作，如挂载DOM元素。
beforeUpdate和updated：适合数据变化后的操作，如更新DOM。
beforeDestroy和destroyed：适合清理资源，如移除事件监听器‌

✔️父子组件的生命周期执行顺序是什么？‌
父组件的生命周期先于子组件执行，子组件挂载完成后，父组件才会挂载‌

✔️Vue 解决了什么问题

①虚拟 dom：dom 操作时非常耗性能的，不再使用原生的 dom 操作节点，极大的解放 dom 操作，但具体操作的还是 dom，不过是换了一种方式。

② 视图、数据、结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。

③ 组件化：把一个单页应用中的各种模块拆分到一个一个单独的组件中，便于开发，以及后期的维护

④只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，同时拥有非常容易上手的 API。

✔️watch、computed 和 methods 的区别

methods 在重新渲染的时候每次都会被重新的调用；
computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。
watch 也可以影响数据的变化，当绑定的数据方法变化时触发响应的函数，需要在数据变化时执行异步或开销较大的操作时使用 watch

✔️Vue 中 key 值的作用

key 的作用主要是为了高效的更新虚拟 DOM。通过给每个元素或组件一个唯一的key，Vue能够更准确地判断哪些元素需要被重用、添加或删除。因为通过key，Vue可以准确地识别哪些元素被添加、删除或重新排序，从而进行正确的更新‌。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

✔️vue 的指令

⑴v-bind：给元素绑定属性

⑵v-on：给元素绑定事件

⑶v-html：给元素绑定数据，且该指令可以解析 html 标签

⑷v-text：给元素绑定数据，不解析标签

⑸v-model：数据双向绑定

⑹v-for：遍历数组

⑺v-if：条件渲染指令，动态在 DOM 内添加或删除 DOM 元素

⑻v-else：条件渲染指令，必须跟 v-if 成对使用