一 生命周期
含义:一个组件(实例) 从开始到最后消灭所经历的各种状态,就是一个组件(实例)的生命周期
注意
- 生命周期函数的命名都是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:实例销毁后调用
图示来一张(不是我画的图)
------------------------------------这里是待更新的分割线-----------------------------------
