重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下vue.js中钩子函数是什么,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
成都创新互联,为您提供重庆网站建设、成都网站制作、网站营销推广、网站开发设计,对服务LED显示屏等多个行业拥有丰富的网站建设及推广经验。成都创新互联网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!
vue.js中有八个钩子函数,分别是:1、beforeCreate用于创建前;2、created用于创建后;3、beforeMount用于挂载前;4、mounted用于挂载后;5、beforeDestroy用于销毁前。
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结构)和数据
看完了这篇文章,相信你对vue.js中钩子函数是什么有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!