首页
技术小册
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从入门到精通(三)
### 10.2 钩子函数 在Vue.js的广阔世界中，钩子函数（Lifecycle Hooks）是理解Vue组件生命周期和进行高效开发的关键。它们允许我们在组件的不同阶段执行特定的代码，从而实现对组件行为的精细控制。本章将深入解析Vue.js中的钩子函数，包括它们的作用、何时被调用，以及如何在不同场景下有效地使用它们。 #### 10.2.1 钩子函数概述 Vue组件的生命周期指的是组件从创建到销毁的整个过程。在这个过程中，Vue提供了一系列的钩子函数，让我们能够在特定的时间点插入自己的代码。这些钩子函数按照它们被调用的顺序，可以分为以下几类： - **创建钩子**：在组件实例被创建时调用。 - **挂载钩子**：组件模板被渲染成真实的DOM并插入到页面中时调用。 - **更新钩子**：当组件的响应式数据变化导致重新渲染时调用。 - **卸载钩子**：组件从DOM中移除并销毁其实例时调用。 #### 10.2.2 创建钩子 **beforeCreate** 和 **created** 是Vue组件创建阶段的两个重要钩子。 - **beforeCreate**：在实例初始化之后，数据观测（data observer）和事件/侦听器的配置之前被调用。此时，组件的`data`、`computed`、`watch`、`methods`等属性都还未被初始化，因此在这个阶段访问它们会返回`undefined`。这个钩子主要用于进行一些不需要依赖组件实例内部数据的初始化操作。 - **created**：在实例创建完成后被立即调用。在这一步，组件实例已完成数据观测、属性和方法的运算，`watch/event`事件回调。然而，挂载阶段还没开始，`$el`属性目前不可见。这是进行数据请求、初始化计算属性等操作的理想时机，因为这些操作依赖于组件的响应式数据。 #### 10.2.3 挂载钩子 **beforeMount** 和 **mounted** 是与组件挂载相关的钩子。 - **beforeMount**：在挂载开始之前被调用：相关的`render`函数首次被调用。此时，模板已经编译成渲染函数，但尚未将渲染的虚拟DOM挂载到页面上，因此此时页面上看不到任何渲染结果。这个钩子可以用于在渲染前最后一次修改模板数据。 - **mounted**：`el` 被新创建的 `vm.$el` 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当 `mounted` 被调用时 `vm.$el` 也在文档内。这是执行DOM操作或插件初始化的理想时机，因为此时组件的模板已经被渲染并挂载到了页面上。 #### 10.2.4 更新钩子 当组件的响应式数据变化时，Vue会重新渲染组件。这个过程中，**beforeUpdate** 和 **updated** 钩子会被调用。 - **beforeUpdate**：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 - **updated**：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。但要避免在这个钩子中更改状态，因为这可能会导致无限更新循环。 #### 10.2.5 卸载钩子 **beforeDestroy** 和 **destroyed** 是在组件销毁过程中调用的钩子。 - **beforeDestroy**：实例销毁之前调用。在这一步，实例仍然完全可用。这是进行清理工作，如移除事件监听器、订阅等操作的最后机会。 - **destroyed**：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也都会被销毁。此时，组件的所有指令都已解绑，所有的事件监听器被移除，所有的子实例也都被销毁。这个钩子可以用于执行一些清理工作，比如定时器销毁等。 #### 10.2.6 钩子函数的使用场景 - **数据请求**：在`created`或`mounted`钩子中进行数据请求，具体取决于是否需要立即访问DOM。 - **事件监听**：在`mounted`钩子中添加事件监听器，在`beforeDestroy`钩子中移除它们，以避免内存泄漏。 - **DOM操作**：在`mounted`和`updated`钩子中进行DOM操作，确保操作的是最新的DOM结构。 - **性能优化**：利用`beforeUpdate`和`updated`钩子进行性能监控，如使用虚拟滚动或懒加载技术优化长列表渲染。 - **组件状态同步**：在组件的生命周期中，通过钩子函数实现父子组件或兄弟组件之间的状态同步。 #### 10.2.7 注意事项 - 避免在`created`或`beforeMount`中操作DOM，因为此时组件的模板可能还未被渲染。 - 在`updated`钩子中，要避免修改组件的状态，因为这可能会导致无限更新循环。 - 合理使用生命周期钩子，避免在多个钩子中重复执行相同的代码，可以通过封装成方法的方式提高代码的可维护性。 - 对于需要销毁的资源（如定时器、事件监听器等），务必在`beforeDestroy`或`destroyed`钩子中进行清理，防止内存泄漏。 ### 结语 Vue.js的钩子函数是理解组件生命周期、实现高效开发的重要工具。通过合理使用这些钩子，我们可以精确地控制组件的行为，优化性能，提升用户体验。希望本章的内容能帮助你更深入地理解Vue.js的钩子函数，并在实际开发中灵活运用它们。随着你对Vue.js的进一步学习，你会发现更多关于钩子函数的妙用和最佳实践，让你的Vue应用更加健壮和高效。
上一篇：
10.1.2 局部自定义指令
下一篇：
10.3 绑定值的类型
该分类下的相关小册推荐：
VUE组件基础与实战
Vue原理与源码解析
Vue.js从入门到精通(二)
TypeScript和Vue从入门到精通(三)
vuejs组件实例与底层原理精讲
Vue.js从入门到精通(一)
TypeScript和Vue从入门到精通(二)
移动端开发指南
Vue源码完全解析
TypeScript和Vue从入门到精通(四)
TypeScript和Vue从入门到精通(五)
Vue3技术解密
