2025年vue11个钩子函数（vue中的钩子函数）

科技前沿 • 2025-06-12 16:05 • 阅读 43

大家好，我是讯享网，很高兴认识大家。

先来看下官方文档的解释：每个vue实例在被创建时都要经过一系列的初始化过程。例如：数据、事件的监听、编译模板，同时在这个过程中，vue会在其中添加一些函数、运行，这些函数叫做生命周期钩子函数。

这里我分了三个阶段说下都有哪一些钩子函数：

Vue实例在内存中刚被创建，数据对象（data）和方法（methods）未初始化；

实例已经在内存中创建好，数据和方法已经初始化完成，但是模板还未编译，页面还是没有内容；（此时访问this.$el 和this.$refs.xxx都是undefined）

找到对应的template模板，编译成render函数，转换成虚拟dom，此时模板已经编译完成，数据未挂载到页面，也就是说在这个阶段你可以看到标签间的双花括号，数据还未渲染到页面中；

补充：

在beforeMounte之后和mounted之前，还有渲染render函数，它的作用是把模板渲染成虚拟dom。。。

模板编译好了，虚拟dom渲染成真正的dom标签，数据渲染到页面，此时Vue实例已经创建完毕，如果没有其他操作的话，Vue实例会静静的躺在内存中，一动不动。。。一般会在mounted中来渲染从后端获取的数据！！！！！(页面初始化时，如果有操作dom的事件一般也会放在mounted钩子函数中，当然，你也可以放在create中，前提需使用this.$nextTick(function(){})，在回调函数中操作dom。)        先来一个关于$nextTick(fn)的小例子：

上边代码充分说明了$nextTick()是在页面渲染完之后执行的一个异步方法。总结下$nextTick使用场景：

第一：上边已经说了在created中操作dom；

第二：在数据变化后要执行某个操作，而这个操作需要随数据改变进而改变了dom时的操作，这个操作应该放入$nextTick中。eg：<div data-card-loading="true" data-card-editable="false" data-syntax="html"></div>关于$nextTick这篇文章不错：https://www.jianshu.com/p/da2c68fe8aed。。。呃呃呃，有点扯远了，言归正传！！！

       beforeUpdate：数据依赖改变或者用$forceUpdata强制刷新时，对象data中的 数据已经更改（虚拟dom已经重新渲                                               染），但是，页面中的值还是原来，未改变，因为此时还未开始渲染dom；

讯享网

       update：此时data中的数据和页面更新完毕，页面已经被重新渲染。。。

     在实际开发中，一般会用watch来代替上边2个方法，因为watch会知道是哪一个数据变化。。。

       beforeDestroy：实例销毁前掉用，在此刻实例还是可用的

       destroyed：Vue实例被销毁，观察者、子组件、事件监听被清除（页面数据不会消失，只不过是响应式无效了）。。。

总结下：以上三个阶段就是Vue实例的一个完整的生命周期，从开始创建、初始化数据、编译模板、挂载dom、渲染、更新渲染、销毁一系列过程，成为vue生命周期。。。

  下边还是借助vue官方文档中生命周期图在通一遍：

vue生命周期中的钩子函数（全面）_数据

2025年vue11个钩子函数（vue中的钩子函数）

相关推荐