Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。生命周期又称为生命周期回调函数，生命周期函数，生命周期钩子。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

测试页面:

{{name}}

3.1. beforeCreate

在组件实例初始化完成之后立即调用。

会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。也就是在这个生命周期中,我们无法获取到data的数据,methods的函数,以及挂载的dom元素

 

beforeCreate() {console.log(this.name);console.log(">>>>>beforeCreate>>>>>");
}

3.2 created

在组件实例处理完所有与状态相关的选项后调用。

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

created(){
console.log(this.name);
console.log(">>>>>create>>>>>");
}

 我们可以在这个created生命周期,通过发送ajax请求,请求后台数据,进行数据的初始化

3.3 beforeMount

在组件被挂载之前调用。

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

注意:

1. 页面呈现的是未经过Vue编译的DOM结构

2. 所有对DOM的操作,最终都不凑效

3. 获取不到真实DOM元素

beforeMount() {
console.log( document.querySelector("h1"));
console.log(">>>>beforeMount>>>>");
}

 

3.4 mounted

在组件被挂载之后调用。

组件在以下情况下被视为已挂载：

• 所有同步子组件都已经被挂载。(不包含异步组件或 树内的组件)

• 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。

注意:

1. 页面中呈现的是经过vue编译的DOM(真实DOM)

2. 可以获取到真实DOM元素

3. 对DOM的操作均有效(尽可能避免).至此初始化过程结束,一般在此进行,开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化操作

mounted() {
console.log( document.querySelector("h1"));
console.log(">>>>mounted>>>>>");
}

 

3.5 beforeUpdate

在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

注意:

此时数据是新的,但页面是旧的

{{name}}
修改

   

 

3.6 updated

在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

注意:

此时数据是新的,但页面是新的

updated() {
console.log("页面name值:",document.querySelector("h1").innerText);
console.log("data中name值:",this.name);
console.log(">>>>updated>>>");
},

 

3.7 beforeUnmount

在一个组件实例被卸载之前调用。当这个钩子被调用时，组件实例依然还保有全部的功能。

注意:

此时,app实例中所有的data,methods,指令等等,都处于可用状态,马上要执行销毁过程,一般在此阶段,关闭定时器,取消订阅消息,解绑自定义事件等收尾操作

{{name}}
修改点我销毁

  

 

3.8 unmounted

在一个组件实例被卸载之后调用。

一个组件在以下情况下被视为已卸载：

• 其所有子组件都已经被卸载。

• 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

unmounted() {console.log(">>>>>unmounted>>>>>");
}