Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。
1.beforeCreate(){}
创建前，访问不到data当中的属性以及methods当中的属性和方法，可以在当前生命周期创建一个loading，在页面加载完成之后将loading移除
2.created(){}
创建后，当前生命周期执行的时候会遍历data中所有的属性，给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性
当前生命周期执行的时候会遍历data&methods所有的属性和方法,将这些属性和方法代理到vue的实例身上。
3. beforeMount(){}
模板与数据进行结合，但是还没有挂载到页面上。因此我们可以在当前生命周期中进行数据最后的修改。
4.mounted(){}
当前生命周期数据和模板进行相结合，并且已经挂载到页面上了，因此我们可以在当前生命周期中获取到真实的DOM元素，还可以在当前生命周期中做方法的实例化。
如何获取DOM元素
1)给元素添加一个ref属性值必须是唯一的
2)使用：this.$refs.属性
5.beforeUpdate(){}
当数据发生改变的时候当前生命周期就会执行，因此我们可以通过当前生命周期来检测数据的变化
当前生命周期执行的时候会将更新的数据与模板进行相结合，但是并没有挂载到页面上，因此我们可以在当前生命周期中做更新数据的最后修改
6.updated(){}
数据与模板进行相结合，并且将更新后的数据挂载到了页面上。因此我们可以在当前生命周期中获取到最新的DOM结构
注意：在当前生命周期中如果做实例化操作的时候切记要做条件判断
7. beforeDestroy(){}
当前生命周期中我们需要做事件的解绑 监听的移除 定时器的清除等操作
8. destroyed(){}
当前生命周期执行完毕后会将vue与页面之间的关联进行断开
0条评论
点击登录参与评论