Vue生命周期

最新推荐文章于 2024-08-17 11:35:38 发布

菜鸟小星啦

最新推荐文章于 2024-08-17 11:35:38 发布

阅读量203

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_48844699/article/details/127750797

版权

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

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
下面是从Vue的官网上拿下来的生命周期过程图解。
请添加图片描述

beforeCreate

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

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

在这里插入图片描述

created

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

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

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

在这里插入图片描述

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

beforeMount

在组件被挂载之前调用。

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

注意:

页面呈现的是未经过Vue编译的DOM结构
所有对DOM的操作,最终都不凑效
获取不到真实DOM元素
beforeMount() {
console.log( document.querySelector("h1"));
console.log(">>>>beforeMount>>>>");
}

在这里插入图片描述

mounted

在组件被挂载之后调用。

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

所有同步子组件都已经被挂载。(不包含异步组件或 <Suspense> 树内的组件)
其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

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

注意:

页面中呈现的是经过vue编译的DOM(真实DOM)
可以获取到真实DOM元素
对DOM的操作均有效(尽可能避免).至此初始化过程结束,一般在此进行,开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化操作
mounted() {
console.log( document.querySelector("h1"));
console.log(">>>>mounted>>>>>");
}

在这里插入图片描述

beforeUpdate

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

注意:

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

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
</style>
<script src="./js/vue.global.js"></script>
</head>
<body>
<div id="box">
   <h1>{{name}}</h1>
   <button @click="changeName()">修改</button>
</div>
<script type="text/javascript" >
   const {createApp} = Vue
   var app = createApp({
       data(){
           return {
               name:'zhangsan',
           }
       },
       methods:{
           changeName(){
               this.name="lisi";
           }
       },
       beforeUpdate() {
           console.log("页面name值:",document.querySelector("h1").innerText);
           console.log("data中name值:",this.name);
           console.log(">>>>beforeUpdate>>>");
       },
   }).mount("#box");
</script>   
</body>
</html>

在这里插入图片描述

updated

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

注意:

此时数据是新的,但页面是新的
updated() {
console.log("页面name值:",document.querySelector("h1").innerText);
console.log("data中name值:",this.name);
console.log(">>>>updated>>>");
},

在这里插入图片描述

beforeUnmount

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

注意:

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

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
</style>
<script src="./js/vue.global.js"></script>
</head>
<body>
<div id="box">
   <h1>{{name}}</h1>
   <button @click="changeName()">修改</button>
   <hello v-if="isShow"></hello>
   <button @click="destroy">点我销毁</button>
</div>
<script type="text/javascript" >
   const {createApp} = Vue
   //自定义一个hello组件
   const hello = {
       data(){
           return {
               hello:'你好'
           }
       },
       template:`<h2>{{hello}}</h2>`,
       beforeUnmount() {
           console.log(this.hello);
           console.log(">>>>>beforeUnmount>>>>>");
       },
   }
   var app = createApp({
       components:{
           //注册组件
           hello:hello,
       },
       data(){
           return {
               name:'zhangsan',
               isShow:true,
           }
       },
       methods:{
           changeName(){
               this.name="lisi";
              
           },
           destroy(){
               console.log("hello组件销毁中...");
               this.isShow = false;
           }
       },
   }).mount("#box");
</script>  
</body>
</html>

在这里插入图片描述

unmounted

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

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

其所有子组件都已经被卸载。
所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。
unmounted() {
	console.log(">>>>>unmounted>>>>>");
}