vue实例生命周期官网生命周期图beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforDestroydestroyedotherlifecycle_hookkeep-alive配合activated和deactivated捕获报错errorCaptured处理ssrserverPrefetch生命周期各阶段函数说明1beforeCreate创建这两个hook是在模板编译之前,初始化阶段执行源码之前在调用之前调用beforeCreate初始化生命周期初始化事件初始化渲染初始化注入初始化状态InitializeprovideinitStatefunctioninitState(vm){vm._watchers=[];varopts=vm.$options;如果(opts.props){initProps(vm,opts.props);}if(opts.methods){initMethods(vm,opts.methods);}if(opts.data){initData(vm);}else{observe(vm._data={},true/*asRootData*/);}if(opts.computed){initComputed(vm,opts.computed);}if(opts.watch&&opts.watch!==nativeWatch){initWatch(vm,opts.watch);初始化状态initPropsinitMethodsinitDatainitComputedinitWatchinitState在beforeCreate和created之间调用,所以beforeCreate取不到vm上的数据而methodscreated可以拿到2beforeMountmountbeforeMount是模板编译后挂载前,mounted是挂载后调用beforeMount前判断el和template调用$mount函数模板编译完成Vue.prototype.$mount源码将编译后的模板挂载到页面源码前调用mountedbeforeMount可以获取到模板信息,但是页面不显示mountedpagemountcomplete到mounted,从头开始,创建阶段完成,运行阶段没有发生破坏,不会再调用上面的hooks3beforeUpdateupdated。running阶段的hooksbeforeUpdate是数据变化后页面渲染前,update是在新数据渲染到页面后在上面从源码可以看出,watcher检测到数据变化时,它将调用beforeUpdate。数据更新完成后,会调用updated4。删除数据
