生命周期.png

常用的生命周期钩子：

  1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  2. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

  1. 销毁后借助Vue开发者工具看不到任何信息。
  2. 销毁后自定义事件会失效，但原生DOM事件依然有效。

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

    代码解析

    1. <body>
    2.  <div id="app">
    3.      <h1 :class="redBG">{{msg}}</h1>
    4.      <hello-com v-if='isShow'></hello-com>
    5.  </div>
    6.  <script>
    7.      let helloCom = Vue.component('hello-com', {
    8.          template: '<h1>{{msg}}</h1>',
    9.          data: function() {
    10.              return {
    11.                  msg: 'AAA'
    12.              }
    13.          },
    14.          beforeDestroy() {
    15.              //应用销毁之前
    16.              //此时还能访问到实例的组件和方法
    17.              console.log('beforeDestroy')
    18.              console.log(this.msg) //AAA
    19.          },
    20.          destroyed() {
    21.              //应用销毁之后
    22.              //此时还能访问到实例的组件和方法
    23.              //不要在这里操作数据和方法
    24.              console.log('destroyed')
    25.              console.log(this.msg)
    26.          }
    27.      })
    29.      let app = new Vue({
    30.          el: "#app",
    31.          data: {
    32.              msg: "Hellow",
    33.              redBG: "redBG",
    34.              isShow: true //控制组件销毁
    35.          },
    36.          methods: {
    37.              clickEvent() {}
    38.          },
    39.          comments: {
    40.              'hello-com': helloCom
    41.          },
    42.          beforeCreate() {
    43.              //Vue实例刚被创建 数据/事件都还没更新
    44.              console.log(this) //Vue
    45.              console.log(this.msg) //undefined
    46.              console.log(this.clickEvent) //undefined
    47.          },
    48.          created() {
    49.              //数据data和方法methods绑定到应用对象app上(还未渲染到视图)
    50.              console.log(this.msg) //Hellow
    51.              console.log(this.clickEvent) //fun
    52.          },
    53.          beforeMount() {
    54.              //渲染之前,根据数据生成Dom
    55.              let dom = document.querySelector(".redBG")
    56.              console.log(dom) //null
    57.          },
    58.          mounted() {
    59.              //渲染之后,可以获取数据生成的Dom对象
    60.              let dom = document.querySelector(".redBG")
    61.              console.log(dom) // </h1>
    62.          },
    63.          beforeUpdate() {
    64.              //数据更改但内容未更改
    65.              let dom = document.querySelector(".redBG")
    66.              console.log(dom.innerHTML)
    67.          },
    68.          updated() {
    69.              //内容更改完毕
    70.              let dom = document.querySelector(".redBG")
    71.              console.log(dom.innerHTML)
    72.          }
    73.      })
    74.  </script>
    75. </body>