欢迎访问 生活随笔！
tag聚合

凯发ag旗舰厅登录网址下载

当前位置： 凯发ag旗舰厅登录网址下载 > 前端技术 > vue >内容正文

vue

五十七、vue中的八大生命周期函数 -凯发ag旗舰厅登录网址下载

发布时间：2024/10/8 vue 27 豆豆
凯发ag旗舰厅登录网址下载 收集整理的这篇文章主要介绍了 五十七、vue中的八大生命周期函数 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

@author：runsen

@date：2020/10/15

vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载dom-渲染、更新-渲染、卸载等一系列的过程，我们称这是 vue 的生命周期。

第一次页面加载会触发beforecreate ， created， beforemount，mounted 这四个钩子.

下面是vue生命周期具体案例

<body><div id="app">hello world </div><script>// vue生命周期函数就是vue实例在某一个时间点会自动执行的函数var vm = new vue({el: "#app",template : "
{{value}}
",data:{value : "test"},// 当vue对象创建之前触发的函数beforecreate:function(){console.log("beforecreate")},// vue对象创建完成触发的函数created:function(){console.log("created")},// 当vue对象开始挂载数据的时候触发的函数beforemount:function() {console.log(this.$el) //<div id="app">hello world</div>console.log("beforemount")},// 当vue对象挂载数据的完成的时候触发的函数mounted:function() {console.log(this.$el) //<div>{{test}}</div>console.log("mounted")},// vue对象销毁之前触发的函数// 当在控制台执行vm.$destroy()即可触发beforedestroy:function() {console.log("beforedestroy")},// vue对象销毁完成触发的函数destroyed:function() {console.log("destroyed")},// vue对象中的data数据发生改变之前触发的函数// 当在控制台执行vm.$data.value 改变value即可触发beforeupdate() {console.log("beforeupdate") },// vue对象中的data数据发生改变完成触发的函数updated() {console.log("updated")},})</script> </body>

vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和dom渲染两大重要功能。

beforecreate

beforecreate：创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得dom节点。data，computed，watch，methods 上的方法和数据均不能访问。
可以在这加个loading事件。

created

created：创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。
可访问 data computed watch methods 上的方法和数据。
初始化完成时的事件写在这里，异步请求也适宜在这里调用（请求不宜过多，避免白屏时间太长）。
可以在这里结束loading事件，还做一些初始化，实现函数自执行。
未挂载dom，若在此阶段进行dom操作一定要放在vue.nexttick()的回调函数中。

beforemount

beforemount：挂载前，虽然得不到具体的dom元素，但vue挂载的根节点已经创建，下面vue对dom的操作将围绕这个根元素继续进行。
beforemount这个阶段是过渡性的，一般一个项目只能用到一两次。

mounted

mounted：挂载，完成创建vm.$el，和双向绑定

完成挂载dom和渲染，可在mounted钩子函数中对挂载的dom进行操作。
可在这发起后端请求，拿回数据，配合路由钩子做一些事情。

beforeupdate

beforeupdate：数据更新前，数据驱动dom。

在数据更新后虽然没有立即更新数据，但是dom中的数据会改变，这是vue双向数据绑定的作用。

可在更新前访问现有的dom，如手动移出添加的事件监听器。

updated

updated：数据更新后，完成虚拟dom的重新渲染和打补丁。
组件dom已完成更新，可执行依赖的dom操作。

注意：不要在此函数中操作数据（修改属性），会陷入死循环。

activated

activated：在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了。

如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。

deactivated

deactivated：组件被移除时使用。

beforedestroy

beforedestroy：销毁前，
可做一些删除提示，如：您确定删除xx吗？

destroyed

destroyed：销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。

这时组件已经没有了，无法操作里面的任何东西了。

最后补充下vue官方的生命周期函数的图。

目前vue3.0更新了八大生命周期函数

2.0 周期名称3.0 周期名称说明、
beforecreatesetup组件创建之前
createdsetup组件创建完成
beforemountonbeforemount组件挂载之前
mountedonmounted组件挂载完成
beforeupdateonbeforeupdate数据更新，虚拟 dom 补丁之前
updatedonupdated数据更新，虚拟 dom 渲染完成
beforedestroyonbeforeunmount组件销毁之前
destroyedonunmounted组件销毁后

参考：https://mp.weixin.qq.com/s/2dd7jr1dnk2fmkg-2_yr3g

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的五十七、vue中的八大生命周期函数的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。

网站地图