vue 之 生命周期(钩子)

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

 

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

第一个阶段:初始化阶段

1>beforeCreate  (vue实例初始化)

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

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

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

第二个阶段:运行时阶段

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

8>update  (重新渲染)

第三个阶段:销毁阶段

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

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

 

<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  (在卸载组件实例之前调用,在该阶段,实例完全正常)