• Vue学习：vue生命周期

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

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

    测试页面:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <style type="text/css">
    9.     </style>
    10.     <script src="./js/vue.global.js"></script>
    11. </head>
    12.  
    13. <body>
    14.     <div id="box">
    15.         <h1>{{name}}</h1>
    16.     </div>
    17.     <script type="text/javascript" >
    18.         const {createApp} = Vue
    19.         var app = createApp({
    20.             data(){
    21.                 return {
    22.                     name:'zhangsan',
    23.                 }
    24.             },
    25.         }).mount("#box");
    26.     </script>
    27. </body>
    28. </html>

     

    3.1. beforeCreate

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

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

     

    1. beforeCreate() {
    2.  console.log(this.name);
    3.  console.log(">>>>>beforeCreate>>>>>");
    4. }

    3.2 created

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

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

    1. created(){
    2. console.log(this.name);
    3. console.log(">>>>>create>>>>>");
    4. }

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

     

    3.3 beforeMount

    在组件被挂载之前调用。

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

    注意:

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

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

    3. 获取不到真实DOM元素

    1. beforeMount() {
    2. console.log( document.querySelector("h1"));
    3. console.log(">>>>beforeMount>>>>");
    4. }

     

    3.4 mounted

    在组件被挂载之后调用。

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

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

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

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

    注意:

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

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

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

    1. mounted() {
    2. console.log( document.querySelector("h1"));
    3. console.log(">>>>mounted>>>>>");
    4. }

     

     

    3.5 beforeUpdate

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

    注意:

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5. <meta charset="UTF-8">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8. <title>Document</title>
    9. <style type="text/css">
    10. </style>
    11. <script src="./js/vue.global.js"></script>
    12. </head>
    13. <body>
    14. <div id="box">
    15.    <h1>{{name}}</h1>
    16.    <button @click="changeName()">修改</button>
    17. </div>
    18. <script type="text/javascript" >
    19.    const {createApp} = Vue
    20.    var app = createApp({
    21.        data(){
    22.            return {
    23.                name:'zhangsan',
    24.            }
    25.        },
    26.        methods:{
    27.            changeName(){
    28.                this.name="lisi";
    29.            }
    30.        },
    31.        beforeUpdate() {
    32.            console.log("页面name值:",document.querySelector("h1").innerText);
    33.            console.log("data中name值:",this.name);
    34.            console.log(">>>>beforeUpdate>>>");
    35.        },
    36.    }).mount("#box");
    37. </script>   
    38. </body>
    39. </html>

     

    3.6 updated

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

    注意:

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

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

     

     

    3.7 beforeUnmount

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

    注意:

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5. <meta charset="UTF-8">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8. <title>Document</title>
    9. <style type="text/css">
    10. </style>
    11. <script src="./js/vue.global.js"></script>
    12. </head>
    13. <body>
    14. <div id="box">
    15.    <h1>{{name}}</h1>
    16.    <button @click="changeName()">修改</button>
    17.    <hello v-if="isShow"></hello>
    18.    <button @click="destroy">点我销毁</button>
    19. </div>
    20. <script type="text/javascript" >
    21.    const {createApp} = Vue
    22.    //自定义一个hello组件
    23.    const hello = {
    24.        data(){
    25.            return {
    26.                hello:'你好'
    27.            }
    28.        },
    29.        template:`<h2>{{hello}}</h2>`,
    30.        beforeUnmount() {
    31.            console.log(this.hello);
    32.            console.log(">>>>>beforeUnmount>>>>>");
    33.        },
    34.    }
    35.    var app = createApp({
    36.        components:{
    37.            //注册组件
    38.            hello:hello,
    39.        },
    40.        data(){
    41.            return {
    42.                name:'zhangsan',
    43.                isShow:true,
    44.            }
    45.        },
    46.        methods:{
    47.            changeName(){
    48.                this.name="lisi";
    49.               
    50.            },
    51.            destroy(){
    52.                console.log("hello组件销毁中...");
    53.                this.isShow = false;
    54.            }
    55.        },
    56.    }).mount("#box");
    57. </script>  
    58. </body>
    59. </html>

     

    3.8 unmounted

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

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

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

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

    1. unmounted() {
    2. 	console.log(">>>>>unmounted>>>>>");
    3. }

  • 相关阅读:
    使用CDN构建读取缓存设计
    通俗易懂的ChatGPT原理简介
    rsm包设计响应面试验并做数据分析
    【后端】韩顺平Java学习笔记（入门篇）
    java计算机毕业设计健康食谱系统服务器端源码+mysql数据库+系统+lw文档+部署
    一个开源完全免费的无损视频或音频的剪切/裁剪/分割/截取和视频合并工具
    【MyAndroid】viewpage+cardView卡片海报效果展示--100个经典UI设计模板(99/100)
    python基础项目实战-PyQt5制作俄罗斯方块
    threejs 镜子案例Reflector 创建镜子+房子搭建+小球移动
    Java语言的过滤数据流
  • 原文地址：https://blog.csdn.net/H215919719/article/details/127667390