• Vue的生命周期

    说明：Vue生命周期是学习Vue非常重要的知识点，其中生命周期钩子在程序开发中有着十分重要的地位。

    目录

    一、生命周期图解

    二、八个重要阶段 

    1.beforeCreate( 创建前 )

    2.created ( 创建后 ）

    3.beforeMount（挂载前）

    4.mounted（挂载完成）

    5.beforeUpdate（修改前）

    6.updated（更新后）

    7.beforeDestroy（销毁前）

    8.destroyed（销毁后）

    三、代码演示

    前言： 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

    一、生命周期图解

    二、八个重要阶段 

    1.beforeCreate( 创建前 )

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

    1. interface ComponentOptions {
    2.   beforeCreate?(this: ComponentPublicInstance): void
    3. }

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

    注意，组合式 API 中的 setup() 钩子会在所有选项式 API 钩子之前调用，beforeCreate() 也不例外。

    2.created ( 创建后 ）

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

    1. interface ComponentOptions {
    2.   created?(this: ComponentPublicInstance): void
    3. }

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

    3.beforeMount（挂载前）

    在组件被挂载之前调用。

    1. interface ComponentOptions {
    2.   beforeMount?(this: ComponentPublicInstance): void
    3. }

     

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

    这个钩子在服务端渲染时不会被调用。

    4.mounted（挂载完成）

    在组件被挂载之后调用。

    1. interface ComponentOptions {
    2.   mounted?(this: ComponentPublicInstance): void
    3. }

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

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

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

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

    5.beforeUpdate（修改前）

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

    1. interface ComponentOptions {
    2.   beforeUpdate?(this: ComponentPublicInstance): void
    3. }

    这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

    6.updated（更新后）

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

    1. interface ComponentOptions {
    2.   updated?(this: ComponentPublicInstance): void
    3. }

    父组件的更新钩子将在其子组件的更新钩子之后调用。

    这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

    7.beforeDestroy（销毁前）

    在实例销毁之前调用，实例仍然完全可用，

    1. 这一步还可以用this来获取实例，
    2. 一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

    8.destroyed（销毁后）

    在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

    三、代码演示

    1. DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Vue的数据模型title>
    8.     <script src="../js/vue.js">script>
    9.   head>
    10.   <body>
    11.     <div id="app">
    12.       {{msg}}
    13.       <button @click="test">按钮button>
    14.       <ul id="My">
    15.         <li>111li>
    16.       ul>
    17.     div>
    18.  
    19.     <script>
    20.       let vm = new Vue({
    21.         el: "#app",
    22.         data: {
    23.           msg: "hello",
    24.           //   time: new Date(),
    25.           msg: true,
    26.         },
    27.         methods: {
    28.           test() {
    29.             console.log("点击按钮-----");
    30.           },
    31.         },
    32.         //钩子函数,生命周期，在beforeCreate这个阶段，
    33.         //现在属性msg数据还没有绑定到实例对象vm上，所以数据不能输出来
    34.         //钩子函数在new Vue()之后执行 Vue内部给实例添加了一些属性(data)和方法(methods)
    35.         //钩子函数在data和methods之前执行
    36.  
    37.         beforeCreate() {
    38.           //属性或方法声明了，但没有和实例绑定
    39.           console.log(
    40.             "beforeCreated函数执行了,---但此时获取不到实例内的属性和方法",
    41.             this.msg
    42.           ); //输出：undefined
    43.         },
    44.         //生命周期，在created这个阶段属性msg数据绑定到vm实例对象上
    45.         //data和methods之后执行
    46.         created() {
    47.           //属性和方法绑定到实例上，可以通过实例进行调用
    48.           console.log(
    49.             "created执行了,---此时可以获取data和methods中的变量值",
    50.             this.msg
    51.           ); //输出：'hello
    52.         },
    53.  
    54.         /* 2.挂载 */
    55.         //虚拟dom挂载成真实dom之前,不可以操作dom
    56.         //使用场景，预处理data,不会触发update钩子函数
    57.         beforeMount() {
    58.           console.log(
    59.             "beforeMount执行了,---但此时获取不到真实的DOM节点",
    60.             "挂载之前"
    61.           );
    62.           console.log(document.getElementById("app"));
    63.         },
    64.         //虚拟dom挂载完毕变成真实dom,此处可以可以操作dom节点
    65.         mounted() {
    66.           console.log("mounted执行了,---此时可以获取到真实的DOM", "挂载后");
    67.           console.log(document.getElementById("app"));
    68.         },
    69.  
    70.         /*2.更新*/
    71.         //更新前
    72.         beforeUpdate() {
    73.           console.log(document.querySelectorAll("#My>li"));
    74.           console.log(
    75.             "beforeUpdate函数执行了,---此时获取不到更新的真实DOM",
    76.             this.msg
    77.           );
    78.         },
    79.         //更新后
    80.         //场景：获取到更新的真实DOM节点
    81.         updated() {
    82.           console.log(document.querySelectorAll("#My>div"));
    83.           console.log(
    84.             "update函数执行了,---此时可以获取到更新的真实DOM",
    85.             this.msg
    86.           );
    87.         },
    88.  
    89.         /*销毁*/
    90.         //销毁监听
    91.         beforeDestroy() {
    92.           console.log("beforeDestroy函数执行了", this.msg);
    93.         },
    94.         destroyed() {
    95.           console.log("destroy函数执行了", this.msg);
    96.         },
    97.       });
    98.       setInterval(() => {
    99.         vm.$destroy();
    100.       }, 5000);
    101.     script>
    102.   body>
    103. html>

     本周出了点意外给忘掉了o(╥﹏╥)o。。。抱歉！抱歉！

  • 相关阅读:
    新手使用php7的加密方法来保护代码的安全性
    【编程之路】面试必刷TOP101：动态规划（72-77，Python实现）
    Perl的LWP::UserAgent库爬虫程序怎么写
    【问题】在安装torchvision的时候，会自动安装torch？
    Vue3 计算属性和侦听器实战（computed、watch）——简易点餐页面
    Kubernetes:kube-apiserver 之 scheme（二）
    带你读论文丨S&P2019 HOLMES Real-time APT Detection
    LAXCUS分布式操作系统6.0 RP1版本正式发布
    程序人生 | 编程的上帝视角应该怎么去找
    苹果允许用户轻松删除账户，真删还是假删？
  • 原文地址：https://blog.csdn.net/m0_46420244/article/details/126926753