vue 之 生命周期(钩子)

生命周期函数:是由vue框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行.

 

vue组件的生命周期函数,可以分为三大类:

第一个阶段:初始化阶段

1>beforeCreate  (vue实例初始化)

2>created (初始化完成,发送ajax)

3>beforeMount (模版和数据结合挂载页面没有渲染)

4>mounted  (页面挂载后,页面以渲染,操作DOM)

第二个阶段:运行时阶段

7>beforeUpdate (数据开始改变没渲染前)

8>update  (重新渲染)

第三个阶段:销毁阶段

5>beforeDestroy (实例没销毁前执行)销毁阶段

6>destroyed  (实例销毁后执行)

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<template>   <div>     <h2>生命周期</h2>     <h3>{{ name }}</h3>     <!--若优先销毁,这里的点击就无效了,因为事件,监听什么都会被销毁-->     <h1 @click="test = 'ls'">{{ test }}</h1>     <button @click="$destroy()">销毁</button>   </div> </template> <script> export default {   data() {     return {       name: "张三",       test: "张三",     };   },   //----------------第一阶段----------------------   //data数据初始化之前,组件还没有数据   beforeCreate() {     console.log(this.name); //输出结果:undefined   },   //data数据初始化之后,可以获取到组件的数据   //场景:发生ajax请求   created() {     console.log(this.name); //输出结果:张三       //该段代码是为了测试销毁后的作用     this.timer = setInterval(() => {       console.log("好嗨哦");     }, 1000);   },   //挂载/渲染之前   beforeMount() {     console.log(document.querySelector("h3")); //输出结果:null   },   //挂载/渲染完成   //场景:操作DOM,一般不用操作DOM   mounted() {     console.log(document.querySelector("h3")); //输出结果:有元素节点   },   //----------------第二阶段----------------------   //更新之前   beforeUpdate() {     console.log(document.querySelector("h1").innerHTML);   },   //更新之后   updated() {     console.log(document.querySelector("h1").innerHTML);   },   //----------------第三阶段----------------------   //销毁之前   beforeDestroy() {     console.log("销毁之前");     clearInterval(this.timer);   },   destroyed() {     console.log("销毁之后");   }, }; </script> <style></style>

　　

动态组件(keep-alive) (在服务器渲染期间不被调用)

9>activated (被keep-alive缓存的组件激活时调用)

10>deactivated  (被keep-alive 缓存的组件停用时调用)

11>beforeUnmount  (在卸载组件实例之前调用,在该阶段,实例完全正常)