2025年Vue钩子函数有哪些（vue3.0钩子函数）

编程日记 • 2025-03-13 16:57 • 阅读 12

一. 钩子函数简要说明

beforeCreate与created
(1) beforeCreate 为组件完全创建前调用的函数，使用不多，但常用于定时器；
(2) created 为组件完全创建后调用的函数，此时可以获取后端数据然后对组件中的数据属性进行赋值以渲染视图层；
(3) 案例：在组件Test中，beforeCreate中打印Test组件的testMsg的值显示undefined，但是在created中打印该值却能成功输出；
beforeMount与mounted
(1) beforeMount 为组件以及组件数据挂载到DOM之前调用的函数;
(2) mounted 为组件以及组件数据挂载到DOM后调用的函数
(3) 案例：组件App中包含了组件Test，在组件Test中，beforeMount和mounted中分别执行代码document.getElementById(‘app’)。beforeMount打印的内容中不包含Test组件，mounted中打印出的内容包含了Test组件。这是因为调用beforeMount之时Test组件还未被挂载到DOM
beforeUpdate与updated
(1) beforeUpdate 为更新DOM之前调用的函数，应用为获取原始DOM；
(2) updated 为更新DOM之后调用的函数，应用为获取最新的DOM；
(3) 案例：点击页面“修改”按钮实现对Test组件中testMsg数据属性的修改，在Test组件beforeUpdate中打印document.getElementById(‘app’)的结果是原始的DOM，但在updated中打印出的则是最新的DOM
beforeDestroy与destroyed
(1) beforeDestroy 为组件销毁之前调用的函数，不常用；
(2) destroyed 为组件销毁之后调用的函数，常用在页面定时器的销毁；
(3) 案例：在App组件中通过按钮控制Test组件的创建和销毁。beforeDestroy和destroyed中分别执行对document.getElementById(‘app’)的输出。结果是，beforeDestroy种输出的结果中包含了Test组件，而destroyed输出结果中已经不包含Test组件
activated与deactivated
若页面中某一组件频繁的被创建和销毁，这将非常消耗性能。因此我们考虑将销毁的组件状态缓存起来，Vue中提供了keep-alive标签对，在使用组件的时候直接将组件标签嵌套在该标签中，则能防止组件在频繁创建和销毁的时候不会重复的渲染DOM。一旦使用了这一标签对后，组件的创建便成了激活，销毁则成了停用。组件在激活的时候调用的钩子函数是activated，在停用时调用的函数则是deactivated。