首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
10.1 注册自定义指令
10.1.1 全局自定义指令
10.1.2 局部自定义指令
10.2 钩子函数
10.3 绑定值的类型
10.3.1 绑定数值
10.3.2 绑定字符串
10.3.3 绑定对象字面量
11.1 注册组件
11.1.1 注册全局组件
11.1.2 注册局部组件
11.2 向子组件传递数据
11.2.1 Prop基本用法
11.2.2 数据验证
11.3 监听子组件事件
11.3.1 监听自定义事件
11.3.2 监听原生事件
11.4 插槽的使用
11.4.1 基础用法
11.4.2 编译作用域
11.4.3 默认内容
11.4.4 命名插槽
11.4.5 作用域插槽
11.5 混入
11.5.1 基础用法
11.5.2 选项合并
11.6 动态组件
11.6.1 动态组件的用法
11.6.2 缓存效果
12.1 什么是组合API
12.2 setup()函数
12.3 响应式API
12.3.1 reactive()方法
12.3.2 watchEffect()方法
12.3.3 ref()方法
12.3.4 computed()方法
12.3.5 watch()方法
12.4 生命周期钩子函数
12.5 使用ref获取DOM元素
13.1 单元素过渡
13.1.1 CSS过渡
13.1.2 过渡的类名
13.1.3 自定义过渡的类名
13.1.4 CSS动画
13.1.5 使用JavaScript钩子函数实现动画
13.2 多元素过渡
13.2.1 多元素过渡的用法
13.2.2 设置元素的key属性
13.2.3 过渡模式的设置
13.3 多组件过渡
13.4 列表过渡
14.1 什么是虚拟DOM
14.2 render()函数的使用
14.2.1 基本用法
14.2.2 h()函数
14.3 使用JavaScript代替模板功能
15.1 路由基础
15.1.1 引入Vue Router
15.1.2 基本用法
15.1.3 动态路由匹配
15.1.4 命名路由
15.2 编程式导航
15.3 嵌套路由
15.4 命名视图
15.5 高级用法
15.5.1 beforeEach钩子函数
15.5.2 scrollBehavior方法
当前位置:
首页>>
技术小册>>
Vue.js从入门到精通(三)
小册名称：Vue.js从入门到精通(三)
### 12.4 生命周期钩子函数 在Vue.js的开发旅程中，生命周期钩子函数（Lifecycle Hooks）扮演着至关重要的角色。它们是Vue实例在创建、挂载、更新、销毁等关键时刻自动调用的函数，为开发者提供了在这些特定时刻执行代码的机会。掌握并合理利用生命周期钩子函数，可以让我们更加精细地控制组件的行为，优化性能，以及解决一些复杂的逻辑问题。本章节将深入解析Vue.js中的生命周期钩子函数，从基本概念到实际应用，带你全面理解并精通这一重要特性。 #### 12.4.1 生命周期钩子函数概述 Vue.js的组件实例从创建到销毁的过程，被称为组件的生命周期。Vue为了让我们有机会在这些关键阶段加入自己的代码逻辑，提供了一系列的钩子函数。这些钩子函数在组件生命周期的特定时刻被自动调用，我们可以根据需求在这些钩子函数中执行相应的代码。 Vue 2.x和Vue 3.x在生命周期钩子函数上有所差异，但基本概念和大多数钩子的用途是相似的。Vue 3中引入了Composition API，使得生命周期钩子可以通过`setup()`函数内的`onXXX`函数来访问，而Options API中的生命周期钩子（如`created`、`mounted`等）依然可用。本章节将主要基于Vue 3的Composition API和Vue 2的Options API进行讲解。 #### 12.4.2 Vue 2.x Options API中的生命周期钩子 在Vue 2.x的Options API中，生命周期钩子函数是直接在组件的选项对象中定义的。下面是一些主要的生命周期钩子及其调用时机： - **beforeCreate**：在实例初始化之后，数据观测（data observer）和事件/侦听器的配置之前被调用。此时组件的属性计算（computed properties）、方法（methods）、侦听器（watchers）都还未被配置，$el 和 $data 也都不可访问。 - **created**：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer）、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 - **beforeMount**：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。 - **mounted**：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 - **beforeUpdate**：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 - **updated**：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。但是要避免更改状态，因为这可能会导致无限更新循环。 - **beforeDestroy**：实例销毁之前调用。在这一步，实例仍然完全可用。 - **destroyed**：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 #### 12.4.3 Vue 3.x Composition API中的生命周期钩子 Vue 3引入了Composition API，提供了一种更加灵活和强大的方式来组织和重用逻辑。在Composition API中，生命周期钩子通过`setup()`函数中的`onXXX`函数来访问，例如`onMounted`、`onBeforeMount`等。 - **onBeforeMount**：等价于Vue 2.x的`beforeMount`。 - **onMounted**：等价于Vue 2.x的`mounted`。 - **onBeforeUpdate**：等价于Vue 2.x的`beforeUpdate`。 - **onUpdated**：等价于Vue 2.x的`updated`。 - **onBeforeUnmount**：Vue 3中新增，等价于Vue 2.x的`beforeDestroy`（但更贴近于卸载的概念）。 - **onUnmounted**：等价于Vue 2.x的`destroyed`。 使用Composition API时，你可以根据需要导入并使用这些生命周期钩子，使你的代码更加模块化和易于管理。 #### 12.4.4 实际应用场景 生命周期钩子函数在实际开发中有着广泛的应用场景。以下是一些常见的使用场景示例： - **数据初始化**：在`created`或`onMounted`钩子中执行异步操作（如API调用），以初始化组件所需的数据。注意，如果数据依赖DOM，则应使用`onMounted`。 - **DOM操作**：在`mounted`或`onMounted`钩子中进行DOM操作，如设置焦点、监听滚动事件等。 - **性能优化**：在`beforeDestroy`或`onBeforeUnmount`钩子中清理定时器、取消网络请求、移除事件监听器等，以避免内存泄漏。 - **条件渲染优化**：利用`beforeUpdate`和`updated`钩子来检测数据变化前后的差异，进行必要的优化处理，如避免不必要的DOM更新。 - **子组件通信**：在父组件的`mounted`钩子中调用子组件的方法，或在子组件的`mounted`钩子中触发父组件的事件，以实现父子组件之间的通信。 #### 12.4.5 注意事项 - **避免在`created`和`beforeMount`中操作DOM**：因为此时组件的DOM尚未挂载，尝试访问或修改DOM将导致错误。 - **合理利用`watch`和`computed`**：在某些情况下，使用Vue的响应式系统（如`watch`和`computed`）可能比直接在生命周期钩子中处理数据变化更加高效和简洁。 - **注意生命周期钩子的调用顺序**：了解各个钩子之间的调用顺序，有助于更好地控制组件的行为和性能。 - **Vue 3的Composition API与Options API混用**：虽然Vue 3推荐使用Composition API，但在同一个组件中，你仍然可以混用Composition API和Options API。然而，为了代码的一致性和可维护性，建议尽量保持统一。 #### 结语 生命周期钩子函数是Vue.js中一个极其重要的特性，它们为开发者提供了在组件生命周期的关键时刻执行代码的机会。通过合理使用生命周期钩子函数，我们可以更加精细地控制组件的行为，优化性能，并解决一些复杂的逻辑问题。无论是Vue 2.x的Options API还是Vue 3.x的Composition API，掌握生命周期钩子函数都是成为一名高效Vue开发者的必经之路。希望本章节的内容能够帮助你深入理解并精通Vue.js中的生命周期钩子函数。
上一篇：
12.3.5 watch()方法
下一篇：
12.5 使用ref获取DOM元素
该分类下的相关小册推荐：
移动端开发指南
VUE组件基础与实战
TypeScript和Vue从入门到精通(三)
TypeScript和Vue从入门到精通(一)
Vue源码完全解析
Vue3技术解密
TypeScript和Vue从入门到精通(二)
vuejs组件实例与底层原理精讲
Vue.js从入门到精通(四)
Vue.js从入门到精通(一)
TypeScript和Vue从入门到精通(四)
Vue面试指南
