VUE的生命周期解析

VUE的生命周期解析

生命钩子意义

• 就是在描述这个 Vue 实例的过程
• 其实钩子就是在 不同时期执行的回调函数
• 本意就是在 Vue 中给我们提供一个写代码的地方

VUE的生命周期

• beforeCreate

  • 在实例创建之前执行
  • 在代码执行创建 new Vue 的时候，最先执行的代码
  • 所以这里什么都拿不到
  • 因为在这里的时候，什么都没有做，刚刚开始准备要进行实例化
  • 基本不用

• created

  • 实例化完成之后
  • 因为实例化已经完成了，但是还没有开始根据自己的数据去渲染 DOM 结构
  • 这个时候能拿到所有配置项里面的数据，拿不到 EL，DOM结构
  • 基本上每个项目都有 100%使用
  • 一半在这里做的大部分是初始数据的请求

• beforeMount 在挂载之前执行

  • 在挂载之前做的第一件事情是什么
    • 在挂载之前先要获得一个原始模版

        <div id="app">
        	{{ msg }}
        </div>
  

  • 在拿到原始模版的 HTML 结构以后就执行了这个函数

  • 这个时候我们能拿到一个 this.$el 来表示这个模版

  • 很少用，因为替换之前我们拿不到准确的内容

• mounted 在挂载之后执行

  • 当我把模版中的内容替换好了以后，去执行
  • 模版已经替换好了，那么就可以拿到有一个替换好的 HTML 结构
  • 一半来说用的不是太多 40%
  • 一般是在结构搭建好以后对某些元素进行特殊处理的时候使用

• beforeUpdate 是在当前实例更新前

  • 更新前执行的回调函数
  • 因为 $el 是个引用数据类型，所以不能直接打印他，因为打印出来的东西也是更新后的
  • 使用率40%

• updated 是在当前实例更新后

  • 更新后执行的回调函数
  • 可以打印 $el 了，因为就是更新后的
  • 使用率40%

• beforeDestroy 销毁前执行

  • 使用率5%

• destroyed 销毁后执行

  • 基本不使用