VUE2中生命周期必要掌握的小知识

简单理解:从创建到销毁的过程!!!

在这个生命周期执行的过程中会自动触发不同的函数,这些函数我们称之为,生命周期函数

八大生命周期函数:

创建之前 beforeCreate(){}
创建完成 created(){}
挂载之前 beforeMount(){}
挂载完成 mounted(){}
更新之前 beforeUpdate(){}
更新完成 updated(){}
销毁之前 beforeDestroy(){}
销毁完成 destroyed(){}

注:页面一加载触发前4个生命周期函数

生命周期图以及理解

Vue实例化之后,出现了一些内置的事件和生命周期。生命周期开始执行,
在创建完成之前,没有el元素没有data数据。
继续初始化并注入数据。
在创建完成中,依然没有el元素但是这个时候出现了data数据。
在挂载之前,出现了大量的逻辑判断。首先我们要判断是否有"el"元素。如果有生命周期逻辑继续,如果没有,那么要看$mount(el)这个方法是否被调用,调用继续执行,没有调用。生命周期戛然而止。就结束了。
我们要判断是否含有template属性,如果有就把template属性内容解析完成之后注入到渲染函数中,渲染。如果没有我们就把外部html作为template进行一个解析并渲染。
如果直接写一个render(){},它的优先级最高
所以优先级的方式是: render(){}>template属性>outerHTML
当生命周期执行到挂载完成。新内容特换了原有的假的el内容。
当数据发生变化的时候,会触发生命周期的更新之前以及更新
当我们调用vm.$destroy()这个销毁方法的时候,会执行销毁之前以及销毁

猜你喜欢

转载自blog.csdn.net/ALong_it/article/details/125880678
今日推荐