vue之生命周期

1：生命周期的八个钩子函数
beforeCreat() 创建前 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
created（）被创建 data 和 methods都已经被初始化好了，可以调用了
beforeMount() 挂载前 在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted（）已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeupdate（）更新前 页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated（）更新 页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed（）被销毁 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
2：生命周期作用
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑
3：生命周期实现
3.1：beforecreate():在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
此时还没有进行数据代理，数据监测，所有vm身上并没有_data的属性。

当前的n值是：{{n}}

点我n+1
点我销毁vm

3.2:在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。vm身上也存在_data属性。

image.png

3.3:beforeMount()
在挂载开始之前被调用，这时页面中的插值语法都未被解析。该钩子在服务器端渲染期间不被调用。

3. 更新
   beforeUpdate（）
   在数据发生改变后，DOM 被更新之前被调用。 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
   Updated（）
   在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

Updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.nextTick(function () {
// 仅在整个视图都被重新渲染之后才会运行的代码
})
}

4. 销毁
   需要调用vm.destroy()
   }
   },
   beforeDestroy()
   实例销毁之前调用。在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。
destroyed()
实例销毁后调用。 该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用。
(138条消息) Vue2生命周期详细讲解——周期图示、代码演示变化_Concise200的博客-CSDN博客_vue2生命周期图