生命周期、钩子函数

生命周期

定义

指的是vue实例对象从创建到销毁的过程。

 

阶段示意图

 

 

 

阶段

创建前(beforeCreate)

vue实例初始化之前调用，此时由于数据观察和事件配置都还没有准备好，此时访问不到实例中的data、el以及methods中的方法，还是undefined状态，DOM元素未加载，因此不能获取DOM元素，但是可以访问vm实例。

创建后(created)

vue实例初始化之后调用，此阶段实例已经创建，已经完成了data数据的初始化，数据观测、属性和方法的运算，watch/event事件回调，因此可以访问methods中的方法，可以获取computed中的计算属性，可以访问并且改变data中的数据，并且修改后可以通过vue的响应式绑定体现在页面上。此时DOM元素未加载，因此不能获取DOM元素，属性el不存在。

载入前(beforeMount)

挂载到DOM树之前调用，此时DOM元素未加载，因此不能获取DOM元素，render函数首次被调用生成虚拟DOM，编译模板把data里面的数据和模板生成HTML,完成了el和data初始化，但此时还未将编译出的HTML渲染到页面上。此阶段用$refs返回为undefined，因为还未挂载。

<template>
  <p ref="getRandomNum">获取随机数</p>
</template>
<script>
   export default {
     beforeMount() {
       //返回undefined,此时还未挂载
       console.log(this.$refs.getRandomNum)
     }
  }
</script>

载入后(mounted)

挂载到DOM树之后调用，此时进入到挂载完毕阶段，此时数据能成功渲染，DOM元素也能加载出来，html片段代码加上ref属性可以获取到DOM元素。mounted在整个实例声明内只会执行一次，此阶段把虚拟DOM变成真实DOM。此时可使用$refs。

此钩子使用次数最多，一般用于以下场景

1.发送ajax请求获取数据

2.开启定时器

3.添加一些事件

<template>
  <p ref="geWeather">{{isSunny?"晴天":"雨天"}}</p>
</template>
<script>
   export default {
     data() {
       return {
         isSunny:true
       }
     },
     mounted() {
       //返回"获取天气",此时完成挂载
       console.log(this.$refs.geWeather)
       
       this.timer = setInterval(()=>{
         this.isSunny=!this.isSunny
       },2000);
     }
  }
</script>

更新前(beforeUpdate)

页面上数据更新之前调用(不是vm上的数据)，当vue实例中data的数据被修改时，触发beforeUpdate钩子函数，会自动更新渲染视图。发生在虚拟DOM重新渲染和打补丁之前，不会触发附加的重复渲染过程。

<template>
  <p ref="geWeather">{{isSunny?"晴天":"雨天"}}</p>
</template>
<script>
   export default {
     data() {
       return {
         isSunny:true
       }
     },
     mounted() {
       //返回"获取天气",此时完成挂载
       console.log(this.$refs.geWeather)
       //每隔2s取反
       this.timer = setInterval(()=>{
         this.isSunny=!this.isSunny
       },2000);
     },
     beforeUpdate() {
       //打印true对应的是雨天，false对应的是晴天，与逻辑相反，
       //说明页面更新前，VM的数据更新了，但界面数据没有更新
       console.log(this.isSunny,this.$refs.geWeather.innerHTML);
     }
  }
</script>

更新后(updated)

页面上数据更新之后调用(不是vm上的数据)，此时视图上的内容已经是最新的内容，数据驱动DOM更新，DOM元素上的数据已经同步更新。该钩子在服务器端渲染期间不被调用。当前阶段可以访问真实的DOM结构，以通过$refs来访问到真实的DOM结构。

销毁前(beforeDestroy)

vue实例销毁之前调用，清除vue实例和DOM的关联，解绑事件，清除定时器，调用实例的destroy()方法可以销毁当前的组件，销毁之前会触发此钩子函数。 销毁之前还可以访问到DOM结构 以及相关的数据(data)。

<template>
  <p ref="geWeather">{{isSunny?"晴天":"雨天"}}</p>
</template>
<script>
   export default {
     data() {
       return {
         isSunny:true,
         timer:null
       }
     },
     mounted() {
       //返回"获取天气",此时完成挂载
       console.log(this.$refs.geWeather)
       //每隔2s取反
       this.timer = setInterval(()=>{
         this.isSunny=!this.isSunny
       },2000);
     },
     beforeDestory() {
       clearInterval(this.timer);
       this.timer=null;
     }
  }
</script>

销毁后(destroyed)

vue实例销毁之后调用，成功销毁后会调此钩子函数，调用后所有的事件监听器都会被移除，所有的子实例也会被销毁，组件中的所有data、methods以及过滤器、指令等，都将不可用。该钩子在服务器端渲染期间不被调用。

 

<template>
  <p ref="geWeather">{{isSunny?"晴天":"雨天"}}</p>
  <button @click="destoryBtn">手动销毁</button>
</template>
<script>
   export default {
     data() {
       return {
         isSunny:true,
         timer:null
         
       }
     },
     methods:{
       destoryBtn() {
         this.$destroy();
       }
     },
     mounted() {
       //返回"获取天气",此时完成挂载
       console.log(this.$refs.geWeather)
       //每隔2s取反
       this.timer = setInterval(()=>{
         this.isSunny=!this.isSunny
       },2000);
     },
     beforeDestory() {
       clearInterval(this.timer);
       this.timer=null;
     },
     destroyed() {
       console.log("销毁之后");
     }
  }
</script>

 

钩子函数

定义

vue框架内置的一些函数，随着vue生命周期不同阶段，自动执行

 

四大阶段、八大方法

阶段	方法
初始化	beforeCreate、created
挂载	beforeMount、mounted
更新	beforeUpdate、updated
销毁	beforeDestroy、destroyed