Vue的生命周期函数详解

注释:此文中的根节点指Vue应用绑定的根节点

1.beforeCreate()

在实例生成之前执行该函数，实例生成即初始化Vueapp的data数据，函数等。在生成实例之前这些属性都没有被初始化。

2.created()

在实例生成之后会自动执行该函数，即此时Vue的data数据，函数等已经被初始化，且template模板中的Dom元素会被转化为函数，此时函数已经被生成但是还没有被执行。

3.beforeMount()

在组建被渲染到页面之前自动执行的函数，此时组件没有被渲染，读取根节点得到的结果为空。

4.mounted()

在组件被渲染到页面之后自动执行的函数，此时组件已经被渲染到页面上，读取根节点的内容得到的结果为template模板中的内容，模板转化成的函数被执行。

5.beforeUnmounted()

在Vue应用失效时会自动执行的函数，Vue应用失效需要通过app.unmount()函数手动实现，在使Vue应用失效之前，组件渲染还未失效，该函数执行时读取根节点的内容不为空。可以得到模板内容。

6.unmounted()

在Vue应用失效之后自动执行的函数，此时组件渲染已经失效，该函数读取根节点的内容为空。