vue---生命周期

一 生命周期

含义:一个组件(实例) 从开始到最后消灭所经历的各类状态,就是一个组件(实例)的生命周期

注意

• 生命周期函数的命名都是vue规定好的,不要直接随便改
• vue 在执行过程当中 会自动调用 生命周期钩子函数, 咱们只须要提供这些函数就能够了

官网这么说,我信了-----你不须要立马弄明白全部的东西，不过随着你的不断学习和使用，它的参考价值会愈来愈高。

三大阶段

1挂载阶段

数据响应

• beforeCreate:数据响应前调用,基本上没什么使用场景,这个函数调用的时候没法拿到data和methods内的数据
• created:数据响应后调用,这个函数调用的时候已经能够拿到实例中的data和methods内的数据了,因此在这个钩子函数内咱们就能够操到做data数据,发送ajax,获取本地数据....(这个钩子很重要听说啊)

找模板

• 首先问你页面中是否是有el,有的话就直接找到el划定的边界,没有的话使用vm.$mount('#app')指定边界
• 其次问你有没有template,有直接使用template做为模板进行编译,没有将el的outerHTML做为模板进行编译 ------通常vm实例都直接编译el,组件内使用template编译

渲染页面

• beforeMount:数据渲染前调用,这个时候若是要获取数据获得的是带有插值表达式,因此使用场景几乎没有
• mounted:数据渲染后调用,能够获取到正常渲染的数据,因此能够在这个钩子里头操做dom/发送ajax.........(重要重要)

2更新阶段

注意并非data里全部的数据发生变化,两个钩子函数就会调用,而是页面用到数据,从新刷新页面后才会调用(watch)

• beforeupdate:数据更新前调用,获取dom元素更新前的数据
• updated:数据更新后调用,获取dom元素更新后的数据

3销毁阶段

注意 实例销毁以前，执行清理任务，好比：清除定时器等

• beforeDestroy::实例销毁前调用----->清除定时器
• destoryed:实例销毁后调用

图示来一张(不是我画的图)

------------------------------------这里是待更新的分割线-----------------------------------