四个阶段 八个钩子函数 父子组件中的先后顺序 激活失活 10个钩子函数

1.什么是组件生命周期

一个组件从 创建 到 销毁 的整个过程就是生命周期

2. 生命周期函数(钩子函数) 四个阶段 (一个阶段两个钩子函数) 八个钩子

vue 框架内置函数，随着组件的生命周期，自动 按次序 执行

**作用：**特定的时间点，执行某些特定的操作

场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

3.生命周期函数(钩子函数) 四个阶段:

● 初始化 => 创建组件 => beforeCreate created
● 挂载 => 渲染显示组件 => beforeMount mouted
● 更新 => 修改了变量 => 触发视图刷新 => beforeUpdate updated
● 销毁 => 切换页面 => 会把组件对象从内存删除 => beforeDestory destoryed
官网参考

4.生命周期函数执行过程 ## 钩子函数 必会 初始代码参考

4个阶段 初始化 挂载 更新 销毁
created () 90% 挂载 发ajax 可以访问data中定义的数据
mounted () 5% 挂载 可以访问dom元素
destroyed () 5% 销毁 清空定时器 取消事件绑定
Vue 的父组件和子组件生命周期钩子函数执行顺序

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：
加载渲染过程：

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程：
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程：
父 beforeUpdate -> 父 updated

销毁过程：
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

总结：

子的生命周期都会被先结束，父的才结束。先由父到子，再从子到父。
生命周期遵从“从外到内，再从内到外，mixins先于组件”的原则。
总的来说，从创建到挂载，是从外到内，再从内到外，且mixins的钩子函数总是在当前组件之前执行

子组件

 <template>
  <div>
    <ul id="myUl">
      <li v-for="(item, ind) in arr" :key="ind">{
    
    {
    
     item }}</li>
    </ul>
    <button
      @click="arr.push(Math.random() * 10)"
    >
      增加一个元素
    </button>
  </div>
</template>

<script>
export default {
    
    
  data () {
    
    
    return {
    
    
      msg: "我是变量",
      arr: [1, 2, 3, 4]
    }
  },
  beforeCreate () {
    
    
    // 1. 创建前
    console.log("beforeCreate --- 实例初始化前")
    console.log(this.msg) // undefined
  },
  created () {
    
    
    // 2. 创建后=> 发送ajax请求
    console.log("created ---  实例初始化后")
    console.log(this.msg) // "我是变量"
    
    // 给对象添加属性
    this.timer = setInterval(()=>{
      console.log(Date.now())
    }, 1000)
    this.fn = ()=>{
    
     console.log(Date.now())}
    document.addEventListener('mousemove', this.fn)
  },
  beforeMount () {
    
    
    // 3. 挂载前
    console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前")
    console.log(document.getElementById("myUl")) // null
    // console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
  },
  mounted () {
    
    
    // 4. 挂载后=> 操作dom
    console.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上 ")
    // console.log(document.getElementById("myUl").children[1].innerHTML)
    console.log(document.querySelector('#myUl').children[1].innerText)
  },
  beforeUpdate () {
    
    
    // 5. 更新前
    console.log("beforeUpdate --- 数据更新, 页面更新前")
    // 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
    // console.log(document.getElementById("myUl").children[4].innerHTML) // 报错
  },
  updated () {
    
    
    // 6. 更新后
    console.log("updated --- 数据更新, 页面更新后")
    console.log(document.getElementById("myUl").children[4].innerHTML)
  },
  beforeDestroy () {
    
    
    // 7. 销毁前
     // (清除定时器 / 解绑js定义的事件)
    console.log("beforeDestroy --- 实例销毁之前调用")
  },
  destroyed () {
    
    
    // document.removeEventListener('mousemove', 回调函数的名字)
    document.removeEventListener('mousemove', this.fn)
    // clearInterval(this.timer)
    // 8. 销毁后
    // (清除定时器 / 解绑js定义的事件)
    console.log("destroyed --- 销毁完成")
  }
};
</script>

父组件

<template>
  <div>
    <MyCom v-if="isShow"/>
    <hr>
    <button @click="isShow = !isShow">销毁Life组件</button>
  </div>
</template>

<script>
import MyCom from './MyCom'
export default {
    
    
  data(){
    
    
    return {
    
    
      isShow: true
    }
  },
  components: {
    
    
    MyCom
  }
};
</script>

5.生命周期的钩子函数是可选的

问父组件的8个钩子和子组件的8个钩子的先后执行的顺序？
父created 子created？ 父组件先执行
(实例化 beforeCrete -->created)父组件先执行 —> 子组件后执行
父mounted 子mounted？ 子组件先执行
(注意点:父组件先执行了 beforeMount 挂载前) (挂在后) —>子组件先挂载到页面上 父组件后挂在到页面上

5.1根据 5.2 + 5.3代码分析得出规律

a. 父组件初始化{created}完成后 —> {beforeMount 挂载前} 父组件先挂载到网页之前(此阶段不能操作Dom树)---->子组件才开始初始化{created}完成后 —> {beforeMount 挂载前} 父组件先挂载到网页之前(此阶段不能操作Dom树) . (上面的created 阶段可以操作数据)

b. 当标题a执行完成后 子组件先挂载到真实的页面上去 父组件随后执行

c . 父子组件执行页面操作后 才回在 {created里面使用数据}父组件比子组件先拿到并使用数据(注意点: 虽然子组件先挂载到页面但是数据是后执行的, )

注意点:后面两步操作

完整的

5.2子组件 钩子函数

<template>
  <div>
    <ul id="myUl">
      <li v-for="(item, ind) in arr" :key="ind">{
    
    {
    
     item }}</li>
    </ul>
    <button @click="arr.push(Math.random() * 10)">增加一个元素</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      msg: "我是子组件变量",
      arr: [1, 2, 3, 4],
    };
  },
  beforeCreate() {
    
    
    // 1. 创建前
    console.log("beforeCreate --- 子组件实例初始化前");
    console.log(this.msg); // undefined
  },
  created() {
    
    
    // 给对象添加属性

    // this.timer = setInterval(() => {
    
    
    //   console.log(Date.now());
    // }, 1000000);
    this.fn = () => {
    
    
      console.log("子组件" + Date.now());
    };
    document.addEventListener("mousemove", this.fn);
    // 2. 创建后=> 发送ajax请求
    console.log("created ---  子组件实例初始化后");
    console.log(this.msg); // "我是变量"
  },
  beforeMount() {
    
    
    // 3. 挂载前
    console.log("beforeMount --- vue的虚拟DOM, 子组件挂载到真实的网页之前");
    console.log(document.getElementById("myUl")); // null
    // console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
  },
  mounted() {
    
    
    // 4. 挂载后=> 操作dom
    console.log("mounted --- vue的虚拟DOM, 子组件 +挂载到真实的网页上 ");
    // console.log(document.getElementById("myUl").children[1].innerHTML)
    console.log(document.querySelector("#myUl").children[1].innerText);
  },
  beforeUpdate() {
    
    
    // 5. 更新前
    console.log("beforeUpdate --- 子组件数据更新, 页面更新前");
    // 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
    // console.log(document.getElementById("myUl").children[4].innerHTML) // 报错
  },
  updated() {
    
    
    // 6. 更新后
    console.log("updated --- 子组件数据更新, 页面更新后");
    console.log(document.getElementById("myUl").children[4].innerHTML);
  },
  beforeDestroy() {
    
    
    // 7. 销毁前
    // (清除定时器 / 解绑js定义的事件)
    console.log("beforeDestroy --- 子组件实例销毁之前调用");
  },
  destroyed() {
    
    
    // document.removeEventListener('mousemove', 回调函数的名字)
    document.removeEventListener("mousemove", this.fn);
    clearInterval(this.timer);
    // 8. 销毁后
    // (清除定时器 / 解绑js定义的事件)
    console.log("destroyed --- 子组件销毁完成");
  },
};
</script>

<style></style>

5.3父组件 钩子函数

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h1>生命周期-父组件</h1>
    <MyCom v-if="show" />
  </div>
</template>

<script>
// 导入->注册->使用
import MyCom from "./MyCom.vue";
export default {
    
    
  data() {
    
    
    return {
    
    
      msg: "我是变量父组件的",
      arr: [1, 2, 3, 5],
      show: true,
    };
  },
  components: {
    
     MyCom },
  beforeCreate() {
    
    
    // 1. 创建前
    console.log("beforeCreate --- 父组件实例初始化前");
    console.log(this.msg); // undefined
  },
  created() {
    
    
    // 给对象添加属性

    // this.timer = setInterval(() => {
    
    
    //   console.log(Date.now(), "父");
    // }, 1000000);
    this.fn = () => {
    
    
      console.log("父组件" + Date.now());
    };
    document.addEventListener("mousemove", this.fn);
    // 2. 创建后=> 发送ajax请求
    console.log("created ---  父组件实例初始化后");
    console.log(this.msg); // "我是变量"
  },
  beforeMount() {
    
    
    // 3. 挂载前
    console.log("beforeMount --- vue的虚拟DOM, 父组件挂载到真实的网页之前");
    console.log(document.getElementById("myUl")); // null
    // console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
  },
  mounted() {
    
    
    // 4. 挂载后=> 操作dom
    console.log("mounted --- vue的虚拟DOM, 父组件  挂载到真实的网页上 ");
    // console.log(document.getElementById("myUl").children[1].innerHTML)
    console.log(document.querySelector("#myUl").children[1].innerText);
  },
  beforeUpdate() {
    
    
    // 5. 更新前
    console.log("beforeUpdate --- 父组件数据更新, 页面更新前");
    // 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
    // console.log(document.getElementById("myUl").children[4].innerHTML) // 报错
  },
  updated() {
    
    
    // 6. 更新后
    console.log("updated --- 父组件数据更新, 页面更新后");
    console.log(document.getElementById("myUl").children[4].innerHTML);
  },
  beforeDestroy() {
    
    
    // 7. 销毁前
    // (清除定时器 / 解绑js定义的事件)
    console.log("beforeDestroy --- 父组件实例销毁之前调用");
  },
  destroyed() {
    
    
    // document.removeEventListener('mousemove', 回调函数的名字)
    document.removeEventListener("mousemove", this.fn);
    clearInterval(this.timer);
    // 8. 销毁后
    // (清除定时器 / 解绑js定义的事件)
    console.log("destroyed --- 父组件销毁完成");
  },
};
</script>

<style></style>