vue8个钩子函数（vue的8个钩子函数）



vue.js中有八个钩子函数，分别是：1、beforecreate用于创建前；2、created用于创建后；3、beforemount用于挂载前；4、mounted用于挂载后；5、beforedestroy用于销毁前。

本教程操作环境：windows7系统、Vue2.9.6版，该方法适用于所有品牌电脑。

vue.js中有八个钩子函数，分别是：

一、beforeCreate:创建前

            1、当前vue实例化的时候会做一个初始化的操作，在这个生命周期函数里面我们可以做初始化的loading

            2、在当前函数里面是访问不到data中的属性，但是可以通过vue的实例对象进行访问

二、created:创建后

            1、当beforeCreate执行完毕以后，会执行created. 在当前函数中我们可以访问到data中的属性

            2、当前生命周期函数执行的时候会将data中所以的属性和methods身上所以的方法添加到vue的实例身上，同时

            会将data中所有的属性添加一个getter/setter方法

            3、如果需要进行前后端上数据交互(ajax请求的时候) 需要在当前生命周期中使用

三、beforeMount:挂载前

            (渲染)

            render函数初次被调用---->数据和模板没有进行相结合，同时还没有渲染到html页面上

            可以在此做渲染前data中数据最后的修改

四、mounted:挂载后

            1、数据和模板进行相结合，渲染成真实的DOM结构

            2、在当前生命周期函数里面我们可以访问到真实的DOM结构,

            3、在vue中我们可以通过$refs来访问到真实的DOM结构

            4、ref类似与id一样 值必须是唯一的   访问的时候我们可以通过this.$refs.属性

五、beforeDestroy:销毁前

            销毁之前还可以访问到DOM结构  以及相关的数据(data)

            在这个生命周期函数中我们可以将绑定的事件进行移除

六、destroyed:销毁后

            在这个生命周期函数中会将数据和模板之间的关系断开(不是你的做的)

            在这个生命周期函数中我们还是可以访问到data中的属性

            但是访问不到真实的DOM结构了

七、beforeUpdate:更新前

            只要data中的属性发生了改变，那么这个生命周期就会执行，render函数再次会执行

            在这个生命周期函数中我们可以对数据进行最后的修改，同时也可以访问到最新的DOM结构和数据

八、updated:更新后

            在当前生命周期函数中我们可以访问到最新的DOM结构(数据更新后最新的DOM结构)和数据

相关学习推荐：javascript视频教程

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！

版权声明：

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

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