Vue 学习笔记 4.0 --- 生命周期函数

生命周期函数

个人认为在学习生命周期的时候,还是看图学习是最有效的,当然理论也得跟上, 本文的底部有我对周期图的中文注解

• 所有的 vue 组件,都是 vue 实例, 一个组件对应一个实例,并且接收相同的选项对象(一些根实例特有的选项除外)
• 实例生命周期也叫做 : 组件生命周期

生命周期介绍

vue 生命周期钩子函数

• 简单说 : 一个组件(实例) 从开始到最后消灭所经历的各种状态,就是一个组件(实例)的生命周期
• 生命周期钩子函数的定义 : 从组件被创建,到组件挂在到页面上运行,再到页面关闭组件被销毁,这三个阶段总是伴随着组件各种的事件,这些事件,统称为组件的生命周期函数 (简称 : 钩子函数)
• 开发人员可以通过 vue 提供的钩子函数,让我们写的代码参与到 vue 的生命周期里面来,让我们的代码在合适的阶段起到相应的作用

注意 :

1. 注意 : vue 在执行过程中 会自动调用 生命周期钩子函数, 我们只需要提供这些钩子函数即可
2. 注意 : 钩子函数的名称都是 vue 中规定好的

---

1.1 钩子函数 - beforeCreate

• 说明 : 在实例初始化之前,数据观测 和 event/watcher 事件配置之前被调用

• 组件实例刚被创建,组件属性计算之前, 例如 data 属性 methods 属性

• 注意 : 此时,无法获取 data 中的数据 和 methoids 中的方法

• 场景 : 几乎不用

---

1.2 钩子函数 - created (掌握)

• 说明 : 组件实例创建完成,属性已绑定, 可以调用 methods 中的方法、可以获取 data 值

• vue 实例生命周期 参考 1

• vue 实例生命周期 参考 2

• 使用场景 : 1-发送 ajax 2-本地存储获取数据

•  beforeCreate() {
       // 无法获取数据和事件
       console.warn('beforeCreate', this.msg, this.fn)
   },
   created() {
     console.warn('created', this.msg, this.fn)
   },
  

---

2.1 钩子函数 - beforeMounted()

• 说明 : 在挂载开始之前被调用 (挂载:可以理解DOM 渲染)

---

2.2 钩子函数 - mounted() (掌握)

• 说明 : 挂载之后, DOM 完成渲染

• 使用场景 : 1-发送 ajax 2-操作 DOM

• // 渲染DOM之前
   beforeMount() {
       // 渲染之前的  <h1 id="h1" @click="fn">{{ msg }}</h1>
     console.log(document.getElementById('h1'))
   },
   // 渲染DOM之后  <h1 id="h1">测试</h1>
   mounted() {
     console.log(document.getElementById('h1'))
   }
  

---

3.1 钩子函数 - beforeUpdated()

• 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
• 注意：此处获取的数据是更新后的数据，但是获取页面中的 DOM 元素是更新之前的

  小提示 : 打印 this.$el ,打开小三角是之后的,是因为打印是有监听的功能,展示的是后面更改之后的

---

3.2 钩子函数 - updated()

• 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

•  beforeUpdate() {
       // 更新之前的值  :  信息
     console.warn('beforeUpdate', document.getElementById('h1').innerText)
   },
   updated() {
       // 更新之后的值 : 信息1111
     console.warn('updated', document.getElementById('h1').innerText)
   }
  

---

4.1 钩子函数 - beforeDestroy()

• 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
• 使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

  created() {

   this.timerId =   setInterval(() => {
      console.log(1111);

      }, 500);
   },

 // 如果当组件销毁了,还不清除定时器会出现性能问题
 // 在浏览器中可以尝试销毁  vm.$destroy()
 // 最后销毁
beforeDestroy() {
      clearInterval(this.timerId)
 },

---

4.2 钩子函数 - destroyed()

说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

---

补充 : 使用钩子函数来完善 数据存储

created {
    this.list = localStorage.getItem('list')
}

---

回顾 : 看下面的阶段详解可以和底部的图一起看

生命周期 分为三个大阶段

先总后分

1. 挂载阶段 (进入页面阶段)

   利用 created 来更改 todoList 获取数据

   1. 第一个小阶段 : 完成数据初始化 (数据响应)
   beforeCreate(){} : 无法获取data里数据和methods里的事件
   场景: 不多
   
   非常重要!!
   created(){} : 可以拿到data里的数据 和 methods里的事件
   场景: 1-发送ajax  2-操作数据  3-获取本地数据  ( 操作数据 )
   
   1.2 第二个小阶段: 找模板 进行编译
   - 有没有el配置项 => 如果有 => 下一步
   => 如果没有 => vm.$mount('#app') => 下一步
   
   - 有没有template配置项 => 没有 => 将 el.outerHtml 作为模板进行编译
   => 如果有 => 用 template 来渲染
   
   总结: 
   1. 有没有template ? 
   => 有 => 用 template
   => 没有 => 用el
   2. vue 实例里没有template, 组件里会有template
   
   1.3 第三个小阶段 : 渲染DOM
   渲染 DOM 之前调用
   特点: 渲染之前 获取 
   //<h1>{{msg}}</h1>
   场景: 不要操作DOM (几乎不用)
   beforeMount(){}
   
   很重要!!
   渲染 DOM 之后调用 
   特点: 渲染之后: 
   <h1>测试信息</h1>
   场景: 1-操作DOM  2-发送ajax
   mounted(){}
   

2. 更新阶段 (数据改变更新视图阶段)

   //当数据发送变化,重新渲染页面
    并不是data里所有的数据发生变化,两个钩子函数就会调用, 而是页面用到的数据,才会重新刷新页面
   
    数据更新之前调用
   //特点: 获取DOM里的数据 => 测试信息
   beforeUpdate(){}
   
   数据更新之后调用
   // 特点: 获取DOM里的数据, 测试信息123
   updated(){}
   

3. 销毁阶段 (卸载阶段)

   提供模拟 销毁的方法 :  vm.$destory()
   作用: 清除程序员自己手写的一些方法, 比如定时器, 手动创建的DOM元素
   
   销毁之前
   beforeDestory(){
       clearInterval(timeId)
   }
   
   销毁之后
   destoryed(){}
   

   

   文章可能有些赘述,可能还有一些写的不够好的地方,有问题的话大家可以指出来, 如果感觉对你有些帮助的话点个赞吧, 哈哈哈哈. 大家共同进步!