Vue生命周期

• 前言

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

Vue生命周期

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可以相互流通。