• 前言

    在使用快半年的Vue.js开发后,感觉也基本掌握了Vue的使用和部署等操作,如组件和路由。但是对于一些更深层次的逻辑还并不是很清楚,正好最近写的东西用到了生命周期钩子的一些知识,看过一些文章之后也有所启发。

Vue生命周期

imageimage

  1. beforeCreated和created之间
    在这个生命周期之间,进行初始化事件,进行数据的观测,可以看到在created的时候数据已经和data属性进行绑定(放在data中的属性当值发生改变的同时,视图也会改变)。
    此时还是没有el选项。
  2. created和beforeMount之间
    首先会判断对象是否有el选项。
    如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)。
    • template参数选项的有无对生命周期的影响。
    1. 如果vue实例对象中有template参数选项,则将其作为模板编译成render函数。
    2. 如果没有template选项,则将外部HTML作为模板编译。
    3. 可以看到template中的模板优先级要高于outer HTML的优先级。
  3. beforeMount和mounted之间
    此时是给vue实例对象添加$el成员,并且替换掉挂在的DOM元素。(这一点还好像不是很确定)
  4. mounted
    1. 挂载之前,页面中引用的data信息都是{}占位的,因为此时还有挂在到页面上,还是JavaScript中的虚拟DOM形式存在的。
    2. 挂载完成,里面数据被替换成真实的data。
  5. beforeUpdate和updated之间
    当vue发现data中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforeUpdate和updated。

Vue父子组件加载顺序

先执行父组件的created和beforeMounted函数;再按子组件的使用顺序,执行子组件的created和beforeMounted函数,mounted函数,最后是父组件的mounted函数。
也就是说父组件还没挂载的时候,子组件先完成挂载,最后父组件再挂载。这样就保证了父子组件的data可以相互流通。


What is broken can be reforged.