1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue.js中的生命周期函数

Vue.js中的生命周期函数

时间:2024-03-07 20:33:54

相关推荐

Vue.js中的生命周期函数

1. 组件创建阶段:

beforeCreate(),这是我们遇到的第一个生命周期函数。表示实例被完全创建出来之前,会执行这个生命周期函数。created(),这是遇到的第二个生命周期函数。beforeMount(),这是遇到的第三个生命周期函数。表示模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中去。在beforeMount()执行的时候,页面中的元素,还没有真正被替换过来,只是之前写的一些模版字符串。mounted(),这是遇到的第四个生命周期函数。表示内存中的模版已经真实地挂载到了页面中,用户已经可以看到渲染好的页面。mounted是实例创建期间的最后一个生命周期函数,当执行完mounted的时候,表示实例已经完全创建好了,此时如果没有其它操作的话,这个实例就保存在我们的内存中。如果要通过某些插件操作页面中的DOM节点,最早要在mounted中进行。只要执行了这个函数,就表明整个Vue实例已经初始化,此时脱离组件创建阶段,进入组件运行阶段。

2. 组件运行阶段:

这里的两个函数会根据数据的改变,有选择性地触发0~无穷多次。beforeUpdate(),这时候我们的页面还没有被更新,但是数据已经被改变,因为此函数的触发时机是"数据改变"。当执行beforeUpdate()的时候,页面中的显示的数据还是旧的,但是此时data的数据是最新的,页面尚未和最新的数据保持同步。updated(),此函数执行的时候,页面和data数据已经同步了。

这两个函数过渡阶段,会先根据data中最新的数据在内存中重新渲染出一份最新的内存DOM树,在它被更新之后,会把最新内存的DOM树重新渲染到真实的页面中。至此,完成了数据从data(Model层) -> view(视图层)的更新。

3. 组件销毁阶段:

1.beforeDestroy(),当执行这个函数的时候,Vue实例就已经从运行阶段进入了销毁阶段,此时实例身上所有的data和所有的methods等等都处于可用状态,还未执行真正的销毁过程。

2.destroyed(),执行到这个函数,组件已经被完全销毁,组件中所有的数据、方法、指令、过滤器等均不可用。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。