目录
[二、 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 成对使用
⑼v-else-if：判断多层条件，必须跟 v-if 成对使用
⑽v-cloak：解决插值闪烁问题
⑾v-once：只渲染元素或组件一次
⑿v-pre：跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度
⒀v-show：条件渲染指令，将不符合条件的数据隐藏(display:none)