vue的生命周期都做了什么？

beforeCreate

Vue 实例创建之前会执行它，此时 data 和 methods 中的数据或方法还未初始化，无法调用

示例代码：

<script>
export default {
  data() {
    return {
      msg: "小猪课堂",
    };
  },
  beforeCreate() {
    console.info("-----beforeCreate-----");
    console.info("data", this.msg);
    console.info("methods", this.getMsg);
  },
  methods: {
    getMsg() {
      return
    },
  },
};
</script>

输出结果：

created

该钩子函数是在 Vue 实例化之后执行的，此时 data 和 methods 已经初始化完成了，可以供我们调用，但是模板还没有编译，也就是我们还不能获取到 DOM。

示例代码：

created() {
  console.info("-----created-----");
  console.info("data", this.msg);
  console.info("methods", this.getMsg);
  console.info("el", this.$el);
},

输出结果：

可以看到 data 和 methods 可以获取到了，但是 el 节点还不能获取，因为此时模板渲染还没有开始。

beforeMount

该钩子函数在模板渲染之前调用，也就是 DOM 节点挂载到真实 DOM 树之前调用。此模板进行编译，会调用 render 函数生成 vDom，也就是虚拟 DOM，此时我们同样无法获取 DOM 节点。

示例代码：

beforeMount(){
  console.info("-----beforeMount-----");
  console.info("el", this.$el);
},

输出结果：

可以看到此时我们同样是无法获取 DOM 节点的，因为此时只存在 VDOM，还在 JS 级别。

mounted

执行该钩子函数时，我们的模板编译好了，而且挂载到真实 DOM 树上面去了，也就是我们的页面可以显示了。

示例代码：

mounted(){
  console.info("-----mounted-----");
  console.info("el", this.$el);
},

输出结果：

beforeUpdate

该函数在 data 数据发生变化之后调用，此时 data 里面的数据已经是最新的了，但是页面上 DOM 还没有更新最新的数据。

示例代码：

beforeUpdate() {
  console.info("-----beforeUpdate-----");
  console.info("data", this.msg);
},
methods: {
  getMsg() {
    return;
  },
  changeMsg() {
    this.msg = "更改后的小猪课堂";
  },
},

输出结果：

updated

该钩子函数会在 data 数据更新之后执行，而且此时页面也渲染更新完成了，显示的就是最新的数据。

示例代码：

updated(){
  console.info("-----updated-----");
  console.info("data", this.msg);
},
methods: {
  getMsg() {
    return;
  },
  changeMsg() {
    this.msg = "更改后的小猪课堂";
  },
},

输出结果：

注意：不要在 updated 中修改 data 数据，很容易造成死循环。

beforeDestroy

此钩子函数发生在 Vue 组件实例销毁之前，此时组件实际上还没有被销毁，还可以正常使用。我们通常会在这个钩子函数里面解除一些全局或者自定义事件。

示例代码：

beforeDestory(){
  console.info("-----beforeDestory-----");
  console.info("组件销毁之前");
},

destroyed

此钩子函数会在组件实例销毁之后执行，此时所有的组件包括子组件都被销毁了。

示例代码：

destroyed(){
  console.info("-----destroyed-----");
  console.info("组件被销毁");
},

通常这个时候只剩下了 DOM 空壳了。

补充

通常情况下我们切换路由等一些操作时，组件都会被销毁，切换回来的时候组件又重新渲染。但是有时候我们为了提高性能，我们可以在切换路由的时候不必销毁组件，这个时候我们就需要用到 Vue 的一个内置组件 keep-alive。

使用 keep-alive 组件包裹后的组件则不会被销毁，使用 keep-alive 这种方式之后，我们便会多出两个生命周期函数。

10.1 activated

页面渲染的时候执行。

示例代码：

<keep-alive>
  <router-view />
</keep-alive>
activated(){
  console.log("home 组件被渲染")
}

输出结果：

上段代码中我们将路由组件使用 keep-alive 包裹了起来，当我们第一次渲染组件的时候会执行组件的 mounted 钩子函数，但是当我们不停切换路由的时候，mounted 钩子函数没有被执行了，只执行了 activated 钩子函数，说明组件并没有被销毁。

10.2 deactivate

页面被隐藏或者页面即将被替换成新的页面时被执行。

示例代码：

deactivated(){
  console.info("deactivated 被执行")
}

输出结果：

当我们的组件将要被切换走的时候，会执行此钩子函数，有点类似于 beforeDestroy 钩子函数，但是效果完全是不一样的。