Vue 的生命周期
1.beforeCreate
数据观测和初始化事件还未开始,此时 data 的响应式追踪、event/watcher 都还没有被设置,也就是说不能访问到data、computed、watch、methods上的方法和数据。
2.created
实例创建完成,实例上配置的 options 包括 data、computed、watch、methods 等都配置完成,但是此时渲染得节点还未挂载到 DOM,所以不能访问到 $el
属性。
3.beforeMount
进行模板的渲染,把HTML结构渲染出来,但是Vue实例中的数据没有渲染到DOM中。
4.mounted
el被新创建的vm.$el替换,并挂在到实例上去之后调用该钩子函数。这个时候,Vue实例中的data会被渲染到DOM中。
5.beforeUpdate
响应式数据更新调用,对应真实DOM还没有被渲染
6.updated
更新数据,并重新渲染DOM和虚拟DOM。
7.beforeDestroy
实例销毁之前调用。这一步,实例仍然完全可用,this
仍能获取到实例。
8.destroyed
销毁Vue实例,生命周期结束。
参考地址:https://segmentfault.com/a/1190000011486619