21、Vue的生命周期

---

1、什么是Vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

2、生命周期图示

3、举例使用生命周期函数

3.1、beforeCreate(创建前)

表示实例完全被创建之前会执行的函数，data和methods的数据并没有初始化。
举例1：当我们不使用beforeCreate时，使用fn自定义函数是可以打印出msg的：

<div id="app">
      <button @click="fn">点我打印msg</button>
  </div>
  <script src="./学习例子/vue2.6.js"></script>
  <script>
      new Vue({
        el:"#app",
        data:{
          msg:"use beforeCreate"
        },
        methods:{
          fn(){
            console.log(this.msg)
          }
        }
      })
  </script>

举例2：当我们使用beforeCreate的时候：

<div id="app">
      <button @click="">点我打印msg</button>
  </div>
  <script src="./学习例子/vue2.6.js"></script>
  <script>
      new Vue({
        el:"#app",
        data:{
          msg:"use beforeCreate"
        },
        beforeCreate(){
          console.log("-------")
          console.log(this.msg)
        },
      })
  </script>

可以看到我们的生命周期函数是会直接执行的，不用在#app中调用的。
通过例子以及查找资料，我们知道beforeCreate这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都是不能获得到。

3.2、created(创建后)

data和methods已经初始化好了，如果要调用data中的属性或methods中的方法，可以在created中调用。但是不能获取到dom元素，因为此时的元素并没有挂载上去。

<div id="app">
    <h1 ref="m">{{msg}}</h1>
  </div>
  <script src="./学习例子/vue2.6.js"></script>
  <script>
      new Vue({
        el:"#app",
        data:{
          msg:"use create"
        },
        methods:{
          fn(){}
        },
        created(){
          console.log("use created");
          console.log(this.msg);
          console.log(this.fn)
          console.log(this.$refs.m)
        }
      })
  </script>

3.3、beforeMount(载入前)

在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时模板已经在内存中编译好了，但是还没有挂载到页面中去，此时的页面还是旧的，因此此时还是无法获取到dom元素的。

<div id="app">
    <h3 ref="m">{{msg}}</h3>
  </div>
  <script src="./学习例子/vue2.6.js"></script>
  <script>
      new Vue({
        el:"#app",
        data:{
          msg:"use beforeMount"
        },
        created(){
          console.log("use beforeMount");
          console.log(this.$refs.m)
        }
      })
  </script>

3.4、mounted（载入后）

组件已经脱离了创建阶段，进入到了运行阶段，如果需要操作DOM节点，最早要在mounted中进行。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

<div id="app">
    <h3 ref="m">{{msg}}</h3>
  </div>
  <script src="./学习例子/vue2.6.js"></script>
  <script>
      new Vue({
        el:"#app",
        data:{
          msg:"use mounted"
        },
        mounted(){
          console.log("use mounted");
          console.log(this.$refs.m)
        }
      })
  </script>

3.5、beforeUpdate（更新前）

在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

<div id="app">
    <h3 ref="m">{{msg}}</h3>
    <button @click="fn">点我修改h3中内容</button>
  </div>
  <script src="./学习例子/vue2.6.js"></script>
  <script>
      new Vue({
        el:"#app",
        data:{
          msg:"use beforeUpdate"
        },
        methods:{
          fn(){
            this.msg = "修改后的msg";
          }
        },
        beforeUpdate(){
          console.log("use beforeUpdate");
          console.log(this.$refs.m)
          console.log(this.$refs.m.innerText)
        }
      })
  </script>

通过上面的例子，我们可以看到beforeUpdata不会自动执行，只有数据发生修改的时候才会执行，同时我们的beforeUpdata执行的时候，其里面的内容还是未发生变化的，从 上面的例子中我们看到this.$refs.m.innerText中的值还是未修改前的use beforeUpdata。

3.6、updated（更新后）

数据和页面已经保持了同步，都是最新的内容。由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

<div id="app">
    <h3 ref="m">{{msg}}</h3>
    <button @click="fn">点我修改h3中内容</button>
  </div>
  <script src="./学习例子/vue2.6.js"></script>
  <script>
      new Vue({
        el:"#app",
        data:{
          msg:"use updated"
        },
        methods:{
          fn(){
            this.msg = "修改后的msg";
          }
        },
        updated(){
          console.log("use updated");
          console.log(this.$refs.m)
          console.log(this.$refs.m.innerText)
        }
      })
  </script>

3.7、beforeDestroy（销毁前）

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

<div id="app">
    <son v-if="bool"></son>
    <button @click="bool=!bool">点我删除/添加子组件</button>
  </div>
  <script src="./学习例子/vue2.6.js"></script>
  <script>
      var son = {
        template:`
        <div>
          <h3>这是生命周期函数演示</h3>
          <h4 ref="m">{{msg}}</h4>
        </div>
        `,
        data(){
           return {
             msg:"use beforeDestroy"
           }
        },
        beforeDestroy(){
          console.log("-- beforeDestroy--")
          console.log("data的数据：",this.msg);
          console.log("页面的数据：",this.$refs.m.innerText);
        }
    }
      new Vue({
        el:"#app",
        data:{
          bool:true,
        },
        components:{
          "son":son
        },
       
      })
  </script>

当我们删除子组件的时候，就会执行beforeDestory生命周期函数，此时data的内容还能够使用。

3.8、destroyed（销毁后）

组件已经完全被销毁，此时所有的数据和方法、指令等等，都不可以用了。

<div id="app">
    <son v-if="bool"></son>
    <button @click="bool=!bool">点我删除/添加子组件</button>
  </div>
  <script src="./学习例子/vue2.6.js"></script>
  <script>
      var son = {
        template:`
        <div>
          <h3>这是生命周期函数演示</h3>
          <h4 ref="m">{{msg}}</h4>
        </div>
        `,
        data(){
           return {
             msg:"use destroyed"
           }
        },
        destroyed(){
          console.log("-- destroyed--")
          console.log("data的数据：",this.msg);
          console.log("页面的数据：",this.$refs.m.innerText);
        }
    }
      new Vue({
        el:"#app",
        data:{
          bool:true,
        },
        components:{
          "son":son
        },
       
      })
  </script>

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