Vue(6)——生命周期

Vue生命周期

Vue生命周期：一个Vue实例从创建到销毁的整个过程。

生命周期的四个阶段：创建、挂载、更新、销毁。

---

生命周期函数（钩子函数）

Vue生命周期中，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定阶段运行自己的代码。

  <div id="app">
    <h3>{{title}}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{count}}</span>
      <button @click="count++">+</button>
    </div>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器',
      },
      //创建阶段
      beforeCreate() {
        console.log(' beforeCreate响应式数据准备号之前', this.count);
      },
      created() {
        console.log('created响应式数据准备好之后', this.count);
        //可以开始发送初始化的请求
      },
      //挂载阶段（渲染模版）
      beforeMount() {
        console.log('beforeMount模版渲染之前', document.querySelector('h3').innerHTML);
      },
      mounted() {
        console.log('mounted模版渲染好之后', document.querySelector('h3').innerHTML);
      },
      //更新阶段
      beforeUpdate() {
        console.log('更新前', document.querySelector('span').innerHTML);

      },
      updated() {
        console.log('更新后', document.querySelector('span').innerHTML);

      },
      //卸载阶段
      beforeDestroy() {
        console.log('卸载前');
      },
      destroyed() {
        console.log('卸载后');
      }
    })
  </script>

卸载阶段是在关闭浏览器时才会执行。可以在控制台调用实例.$destroy().