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() {
         // 渲染之前的  

    {{ msg }}

    console.log(document.getElementById('h1')) }, // 渲染DOM之后

    测试

    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 之前调用
    特点: 渲染之前 获取 
    //

    {{msg}}

    场景: 不要操作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(){}
    

    Vue 学习笔记 4.0 --- 生命周期函数_第1张图片

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

你可能感兴趣的:(vue,vue.js)