• 生命周期的使用

    第一节： 初始化

      1.  beforeCreate

    初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

    vue实例中的el，data，data中的message都为undefined。

      1.  created

    实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

    主要应用：调用数据，调用方法，调用异步函数

      1.  beforeMount

    载入前（完成了data和el数据初始化），可是页面中的内容仍是vue中的占位符，data中的message信息没有被挂在到Bom节点中，在这里能够在渲染前最后一次更改数据的机会，不会触发其余的钩子函数，通常能够在这里作初始数据。这个阶段操作DOM是不奏效的。

      1.  mounted

    载入后html已经渲染(ajax请求能够放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去。

    第二节： 更新状态

    2.1 beforeUpdate

    状态完成更新之前（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。

    2.1 updated

    数据已经更改完成，dom也从新render完成。

    第三节： 销毁实例

    Vm.$destroy()：销毁后自定义事件会失效，但原生DOM事件依然有效。销毁后会调用下面两个钩子。

    2.1 beforeDestroy

    销毁前执行（$destroy方法被调用的时候就会执行）,通常在这里善后:清除计时器、清除非指令绑定的事件等等…’)。

    2.2 destroyed

    销毁后 （Dom元素存在，只是再也不受vue控制）,卸载watcher，事件监听，子组件

    第四节： 生命周期总结

    常用的生命周期钩子：

    1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

          2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

    关于销毁Vue实例：

    1.销毁后借助Vue开发者工具看不到任何信息。

    2.销毁后自定义事件会失效，但原生DOM事件依然有效。

    3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

    1. <html lang="en">
    2.  
    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>Documenttitle>
    8.     <script src="../js/vue.js">script>
    9. head>
    10.  
    11. <body>
    12.  
    13.     <div id="root">
    14.         计算器:{{num}}
    15.         <br>
    16.         <span>{{num2}}span>
    17.         <button @click="add">点我+1button>
    18.     div>
    19.     <script>
    20.         new Vue({
    21.             el: "#root",
    22.             data: {
    23.                 num: 0,
    24.                 num2:100,
    25.             },
    26.             methods: {
    27.                 add() {
    28.                     setInterval(() => {
    29.                         this.num++;
    30.                     }, 1000)
    31.                 }
    32.             },
    33.             // data,event事件调用之前调用，此时的data还未初始化
    34.             // 创建之前   初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
    35.             // vue实例中的el，data，data中的message都为undefined。
    36.             beforeCreate() {
    37.                 console.log("beforecreate", this.num);
    38.             },
    39.             // 实例已经创建，data，event都已经准备好，但是挂载还没未开始页面不显示
    40.             // 创建完成  实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，
    41.             // 属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 
    42.             // 主要应用：调用数据，调用方法，调用异步函数
    43.             created() {
    44.                 console.log("created", this.num);
    45.             },
    46.             // 挂载 页面完成挂载后调用此钩子 载入后html已经渲染(ajax请求能够放在这个函数中)，
    47.             // 把vue实例中的data里的message挂载到BOM节点中去。
    48.             mounted() {
    49.                 console.log("mounted", this.num);
    50.                 setInterval(() => {
    51.                     this.num++;
    52.                 }, 1000)
    53.             },
    54.             // 状态完成更新之前（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom
    55.             // 与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。
    56.             beforeUpdate() {
    57.                 console.log("beforUpdate", this.num);
    58.             },
    59.             // 数据已经更改完成，dom也从新render完成。
    60.             updated() {
    61.                 console.log("updataed", this.num);
    62.             },
    63.             beforeDestroy() {
    64.                 console.log("beforeDestroy", this.num);
    65.             },
    66.             destroyed() {
    67.                 console.log('destroyed')
    68.             },
    69.         })
    70.     script>
    71.  
    72.  
    73. body>
    74.  
    75. html>

  • 相关阅读:
    ES6和CommonJS导入导出语法区别
    使用亚马逊云服务器在 G4 实例上运行 Android 应用程序
    两数相加 js
    【深入MaxCompute】人力家：借助Information Schema合理治理费用
    tensorflow-gpu版本安装及深度神经网络训练与cpu版本对比
    半正定矩阵的对角元素不小于该矩阵的最小特征值
    如何将项目部署到服务器上(全套教程)
    Jmeter 快速生成测试报告，学会领导主动给你加薪
    如何用CSS画一个三角形？
    vs2019生成c++库文件警告dll链接不一致
  • 原文地址：https://blog.csdn.net/m0_59359854/article/details/126268732