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



先来看下官方文档的解释：每个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：

关于$nextTick这篇文章不错：​​https://www.jianshu.com/p/da2c68fe8aed​​。。。呃呃呃，有点扯远了，言归正传！！！

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

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

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

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

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

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

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/72260.html