1.定义及作用
- 定义：每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等，不同的时期对应不同的周期；
- 生命周期钩子:不同周期开放出来的接口；
- 作用：可以在特定的时期添加需求，比如请求后台数据等；
2.生命周期钩子函数使用
app = new Vue({
el: '#app',
data: {
message : "vue demo"},
methods:{
methodsTest(){
return "methods test success"}},
computed:{
computedTest(){
return "computed test success"}},
beforeCreate:{……}，
created：{……}，
beforeMount：{……}，
beforeUpdate：{……}，
updated：{……}，
beforeDestroy：{……}，
destroyed：{……}，}
setTimeout(function () {
app.message= 'vue data changed';},0)
setTimeout(function () {
app.$destroy();
app.message= 'vue data destroy';
},10)
-
监测$el,data,computed,methods
- beforeCreate周期内，组件实例还未被创建 ，各属性均未生成；
- created周期内，Init injections and reactivity,这个阶段属性都已注入绑定，而且被
el还是没有生成，也就是DOM没有生成；
//看看源码，创建Vue实例时候会通过this._init()初始化
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new`
keyword')
}
this._init(options) //初始化各个功能
}
//在_init()中有这样的一个执行顺序：其中initState()是在
//beforeCreate和created之间
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm) //初始化
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
//在initState()做了这些事情：
//所以Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的。
if (opts.props) initProps(vm, opts.props)//初始化Props
if (opts.methods) initMethods(vm, opts.methods)//初始化methods
if (opts.data) {
initData(vm)} else {
observe(vm._data = {}, true /* asRootData */)}//初始化data
if (opts.computed) initComputed(vm, opts.computed)//初始化computed
- beforeMount周期内，会判断options（new Vue()里面的大对象）里面是是否有
mount(el)方法调用，为组件提供DOM容器，如果都提供了teamplate，则编译template模板，若是没有模板，则编译el里面的的元素。要注意的是此时只是编译了模板，还没有把属性挂载上去。
315746004-59bf3ce1d721e_articlex.png
- mounted周期内，属性均已挂载；
- beforeUpdated，属性更新之前，注意此时属性已经发生变化 ；
- updated，属性更新后；
- beforeDestroy和destroyed，组件销毁前；实例销毁之前调用。在这一步，实例仍然完全可用。销毁后；Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，此时再改变属性已经不再起作用。
网友评论