Vue的生命周期
下面是Vue官网对生命周期的介绍Vue是一个构造函数在这个构造函数执行的过程中会经历开始创建、初始化数据、编译模板、实例挂载到真实的DOM、数据渲染 ---- 视图更新等一系列过程而在这个过程中会在特定的阶段默认调用一些函数这些函数就是Vue生命周期的钩子函数。下面对这些钩子函数进行详细说明1、实例通过new Vue创建后就会初始化事件和生命周期然后就会调用beforeCreate函数此时数据还没有挂载还无法访问数据和DOM元素。2、挂载数据绑定事件等实例创建完成此时调用created函数这个时候可以访问Vue中的数据了也可以进行更改。3、下面开始找实例对应的模板编译模板为虚拟DOM放入到render函数中准备渲染在渲染之前调用beforeMount钩子函数在这个函数中虚拟DOM已经创建完成马上就要渲染在这里还可以更改数据不会触发updated函数这里也是在渲染前最后一次更改数据而不会触发其他钩子函数的机会。4、接下来开始编译渲染出真实DOM渲染完成后调用mounted钩子函数此时所有的组件都已经显示在页面中数据、真实的DOM都已经处理完成事件也已经挂载完成可以在这里获取真实的DOM进行操作。5、当实例中的数据更改后会立即执行beforeUpdate在这个时候视图还没有进行更新然后vue的虚拟DOM机制会重新构建虚拟DOM与上一次的虚拟DOM利用diff算法进行对比后进行重新渲染。6、当更新完成后执行updated钩子函数此时数据和视图都已经更新完成。7、当调用了 $destroy 方法后会立即触发 beforeDestroy 钩子函数此时Vue实例还没有被销毁一般在这里做一些善后工作例如清除定时器…8、在 $destroy 调用后会进行卸除组件接触数据监听等操作一切操作完成后Vue实例被销毁只剩下DOM空壳。注释 beforecreate、created、beforeMount、mounted这四个钩子函数只会在Vue实例初始化过程中 按照先后顺序执行之后无论数据视图发生什么改变都不会再执行 在beforeUpdate和updated中不能更新数据否则会陷入死循环