生命周期
就VUE来说就是一个程序的即将创建到销毁的一个过程,也就是vm对象实例从创建到最终销毁的过程。
VUE生命周期4个阶段8个钩子函数(到某一阶段自动调用的函数)
1.初始阶段(虚拟的DOM生成)
beforeCreate()
初始化事件对象和生命周期,这时候调用beforeCreate()调用完以后进行初始化数据代理和数据检测的创建。这时候data还没创建无法访问data中的数据。
作用:可以在这时候加一些loading效果
created()
已经完成了初始化数据代理和数据监测可以访问data中的数据。
作用:结束loading效果,也可以发哦那个网络请求,获取数据,可以在这里添加定时器。
2.挂载阶段(真实DOM的生成)
beforeMount()
在这个函数内去操作DOM元素无法不生效。
Mount()
在这个函数内去操作DOM元素可以生效。到这里页面的初次渲染就结束了。
作用:可以操作页面的DOM元素。
3.更新阶段(只有data中的数据变化了才会进入这个阶段)
beforeUpdate()
data中数据已经变化了但是页面还没有变化就会调用这个钩子函数。
作用:适合再更新之前访问现有的DOM,移除一些已经添加的事件监听器。
Update()
data中的数据变化了页面也变化了就会调用这个钩子函数。
作用:适合页面更新后,对数据做统一的处理
4.销毁阶段(只有执行this.$destroy()方法才会执行)
这里销毁是vm上绑定的数据检测数据代理之类的属性,销毁的不是vm实例,vm实例依然存在。
beforeDestroy()
其实成为解绑更为合理,解绑监视器、子组件、自定义事件监听器、事件监听器(点击事件等)、数据之前做的事情。重点就是以上的都还未解绑还存在但是已经不可用了。
作用:适合做清除定时器。
Destroy()
解绑监视器、子组件、自定义事件监听器、事件监听器(点击事件等)、数据之后做的事情