CSDN|不来看看这些 VUE 的生命周期钩子函数？

本文插图
作者 | huangfuyk 责编 | 王晓曼出品 | CSDN 博客 VUE的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为：创建、挂载、更新、销毁四个模块。注：在组件的整个生命周期内，钩子函数都是可被自动调用的，且生命周期函数的执行顺序与书写的顺序无关。图示：【CSDN|不来看看这些 VUE 的生命周期钩子函数？ | 原力计划】
本文插图
BeforeCreate该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前，实例初始化之后被调用。在该阶段组件未创建，不能访问数据，组件中的 data ， ref 均为 undefined 。Created该函数在组件创建完成后被立即调用，在这一步，实例已完成以下的配置：数据观测 (data observer) ，属性和方法的运算， watch/event 事件回调。但是还未渲染成HTML模板，组件中的data对象已经存在，可以对data进行操作了，即可以访问数据，发请求， ref依旧是undefined ，挂载阶段还没开始， $el 属性目前尚不可用。一般我们可以将对数据的初始化和初始化页面的请求放到里面，结束loading 。Created 实例：1、RAP2 模拟一个后端接口（http://rap2.taobao.org:38080/app/mock/252122/test），使用 created 拿数据。2、RAP2操作界面如下：
本文插图
3、代码：<div id="box"> <ul> <li v-for="item in list" :key="item.id">{{item.name}}</li> </ul></div><script> new Vue({ el:"#box", data:{ list: }, created{ fetch('http://rap2.taobao.org:38080/app/mock/252122/test') .then(res=>res.json) .then((res)=>{ if(res.code===200){ this.list = res.data.list; } }) }, beforeCreate{ }, })</script>4、结果
本文插图
BeforeMount该函数在组件挂载之前，在该阶段页面上还没渲染出 HTML 元素， data 初始化完成， ref 依旧不可以操作，相关的 render 函数首次被调用。可以访问数据，编译模板结束，虚拟 dom 已经存在。该钩子在服务器端渲染期间不被调用。Mounted该函数是页面完成挂载之后执行的，这时 el 被新创建的 vm.$el 替换了，就可以操作 ref 了，一般会用于将组件初始时请求数据的方法放到这里面， filter 也是在这里生效。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。可以拿到数据和节点，实例被挂载后调用。注意：mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：mounted: function { this.$nextTick(function { // Code that will run only after the // entire view has been rendered })}该钩子在服务器端渲染期间不被调用。1、beforeMount与mounted实例①：（ref表示节点；this.$refs.ref的标识，就可拿到节点）<div id="box"> <div ref='demo'>demo</div></div><script> new Vue({ el:"#box", data:{ a:666 }, mounted{ console.log('mounted',this.a); }, beforeMount{ console.log('beforeMount',this.a); console.log(this.$refs.demo); } })</script>结果：

CSDN|不来看看这些 VUE 的生命周期钩子函数？ | 原力计划

推荐阅读

『zol中关村在线』更便宜的全新23寸iMac 边框变窄配置升级

啥情况？周深工作室注册少管我商标具体发生了什么？

我为肌肉狂|睡前5个小动作，教你轻松练出天鹅臂，告别拜拜肉

[蓝菇凉说]对得起价格，基本三年不卡！，目前公认受欢迎的四款华为

『旷世君玄』三星S10沦为百元机大降价！，联发科P65+水滴屏三星A41发布

澎湃新闻|伊朗演习首次公开地下发射导弹，美国或许知晓导弹埋藏地点

『环球新军事』切尔诺贝利辐射增加，放射元素直扑俄罗斯，美国卫星拍下恐怖一幕

二合一|看规划馆、博物馆二合一的数字博物馆，了解包公故里的前世今生

中国新闻网|山西太原出台“人才购房”新政暂试行至2020年12月31日

早安隆回|《早安隆回》越火，袁树雄的争议就会越大！

太平鸟育儿经|父母晚年有着落，心理学：孩子的孝心哪里来？对他做好3件事

土豆相克的食物有哪些

明星穿搭|马蓉晒日本游照，皮衣短裙配高筒袜身材不输樱花妹，生活惬意

大花搞笑|和富豪认识90分钟后闪婚，如今出入豪车接送，曾在春晚上出尽洋相

清明上河图描绘的是哪个城市？

澍的读音及意思

过期米酒妙用米酒过期变质表现

生吃茄子有什么好处和坏处

挖贝网业务订单减少，骅盛车电2020年上半年净利344.74万同比增长45.93%

央视网|美国明尼苏达州州长：该州的新冠病毒感染中 70％与私人聚会、酒吧和餐馆有关