Vue生命周期（描述1）

2019-03-14 本文已影响0人唐人不自醉

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,这个阶段属性都已注入绑定，而且被 $watch变成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()里面的大对象）里面是是否有 $el，有的话再看options里面是否有template；若是没有，在等待vm.$ mount(el)方法调用，为组件提供DOM容器，如果都提供了teamplate，则编译template模板，若是没有模板，则编译el里面的的元素。要注意的是此时只是编译了模板，还没有把属性挂载上去。
315746004-59bf3ce1d721e_articlex.png

mounted周期内，属性均已挂载；
beforeUpdated，属性更新之前，注意此时属性已经发生变化；
updated，属性更新后；
beforeDestroy和destroyed，组件销毁前；实例销毁之前调用。在这一步，实例仍然完全可用。销毁后；Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，此时再改变属性已经不再起作用。

Vue生命周期（描述1）

猜你喜欢

热点阅读