vue生命周期

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

钩子函数

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

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

分类：4大阶段8个方法

• 初始化
• 挂载
• 更新
• 销毁

阶段	方法名	方法名
初始化	beforecreate 初始化前	created 初始化后
挂载	beforeMount 挂载前	mountd 挂载后
更新	beforeUpdate 更新前	updated 更新后
销毁	beforeDestroy 销毁前	destroyed 销毁后

初始化阶段

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.Init Events & Lifecycle – 初始化事件和生命周期函数

3.beforeCreate – 生命周期钩子函数被执行

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

6.接下来是编译模板阶段 –开始分析

7.Has el option? – 是否有el选项 – 检查要挂到哪里

没有. 调用$mount()方法

有, 继续检查template选项

1.beforeCreate 获取到data和methods之前

2.created  获取到data和methods 之后

  // 一. 初始化
  // new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
  beforeCreate() {
    console.log("beforeCreate -- 执行");
    console.log(this.msg); // undefined
  },
  // data和methods初始化以后
  // 场景: 网络请求, 注册全局事件
  created() {
    console.log("created -- 执行");
    console.log(this.msg); // hello, Vue
  },

挂载阶段

1.template选项检查

有 - 编译template返回render渲染函数

无 – 编译el选项对应标签作为template(要渲染的模板)

2.虚拟DOM挂载成真实DOM之前

3.beforeMount – 生命周期钩子函数被执行

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行

1beforemount  真实DOM挂载之前  

2.mountd  真实DOM挂载后

  // 真实DOM挂载之前
  beforeMount() {
    console.log("beforeMount -- 执行");
    console.log(document.getElementById("myP")); // null

    this.msg = "重新值";
  },
  // 真实DOM挂载以后
  // 场景: 挂载后真实DOM
  mounted() {
    console.log("mounted -- 执行");
    console.log(document.getElementById("myP")); // p
  },

更新阶段

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

1.当data发生变化后触发beforeUpdate

beforeUpdate  拿到更新之前的数据

updated  拿到更新之后的数据

  // 更新 当data的数据发生改变
  // 更新之前
  beforeUpdate() {
    console.log("beforUpdate --被执行");
    console.log(document.querySelectorAll("#myUl>li")[4]);
  },
  // 获取更新后的
  updated() {
    console.log("update -- 被执行");
    console.log(document.querySelectorAll("#myUl>li")[4]);
  },

销毁阶段

1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2.beforeDestroy – 生命周期钩子函数被执行

3.拆卸数据监视器、子组件和事件侦听器

4.实例销毁后, 最后触发一个钩子函数

5.destroyed – 生命周期钩子函数被执行  

 beforeDestory  组件DOM被销毁时触发

destoryed   组件DOM被销毁后