钩子函数:在一个Vue实例从创建到销毁的过程自动执行的函数。
1、分析生命周期
1)初始化阶段:
beforeCreate()
生命周期中第一个函数,在该函数执行时Vue实例仅仅完成自身事件绑定和生命周期函数的初始化工作,Vue实例中还没有Data,el,methods相关属性。
created()
生命周期的第二个函数,在该函数执行时Vue实例已经初始化data属性和methods中相关方法,可以在此阶段调取后端数据了
beforeMount()
生命周期的第三个函数,在该函数进行模板编译,生成虚拟dom
mounted()
生命周期的第四个函数,在该函数将数据渲染到页面上,生成真实dom
2)运行阶段
beforeUpdate()
生命周期的第五个函数,数据更新时触发该函数,该函数执行时Vue实例中data数据变化,但页面数据仍为旧数据,即data数据与页面数据不同步
updated()
生命周期的第六个函数,数据更新触发,但时机点位于beforeUpdated后,此时页面数据与Vue实例中data数据能够保持一致。
3)销毁阶段
beforeDestory()
生命周期的第七个函数,该函数执行时,Vue实例中所有数据、methods、component还未销毁
destoryd()
生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
2、钩子函数常见的使用场景
1)推荐在created()中发送请求,对服务端接口进行调用,此时data数据已经创建,可以获取服务端数据对其进行赋值,相比beforeMount()和mounted(),created()能更快获取到服务端数据,减少页面loading 时间;
2)在 mounted()中,Vue将编译好的模板挂在到页面上,此时为真实DOM,可以对DOM进行操作。此时可以做启动定时器、绑定自定义事件、订阅消息等初始化操作。
3)beforeDestory()可进行清除定时器、解绑自定义事件、取消消息订阅等操作。
注意=>生命周期的this指向Vue组件实例或者vm
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)