vue生命周期详解（一）----创建期间的生命周期函数

---

vue生命周期

打开vue官网，快速上手，找到生命周期的图片如下：

---

vue生命周期

一、beforeCreate

1.在beforeCreate函数里面调用data里面的属性

在组件实例初始化完成之后立即调用
会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。

运行查看效果：undefined
证明beforeCreate函数执行时，并没有初始化data里面的数据

2.在beforeCreate钩子函数里面调用methods里面的方法

报错 show not a function
同理可以说明beforeCreate执行时，methods里面的方法并没有初始化。

二、created生命周期钩子函数

官网解释：
当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。

1.在created钩子函数里面调用methods里面的方法和data里面的属性

运行效果：

执行created函数时，methods里面的函数和data里面的数据已经被初始化

---

三、beforeMount和mounted

接下来是判断，有没有el这个属性，有的话继续往下，看有没有template，没有的话直接把el的当成template

示例如下：

beforeMount生命周期函数

官网解释：
当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
这个钩子在服务端渲染时不会被调用。

运行效果

Mounted生命周期函数

在组件被挂载之后调用。

vue官网：
组件在以下情况下被视为已挂载：
所有同步子组件都已经被挂载。(不包含异步组件或 <Suspense> 树内的组件)
其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用确保 DOM 相关代码仅在客户端被调用。
这个钩子在服务端渲染时不会被调用。

代码演示：

效果：