Vue实例生命周期

Vue实例生命周期

  先来上一张vue官网的生命周期图：

一个vue实例在创建的时候会调用上面的钩子函数，vue的生命周期钩子函数有：

• beforeCreate

• created

• beforeMount

• mounted

• beforeUpdate

• updated

• beforeDestroy

• destroyed

  下面来一一讲解vue的生命周期钩子函数：

beforeCreate：

  vue实例创建前，el、data、methods都还未生成。

created：

  vue实例创建完成，这一阶段进行事件初始化，同时观测数据。注意：此时el还是读不到。

  这个阶段如果创建实例的时候没有填写el属性的话，将不会往下执行，直到调用$mount(el)，时才会继续向下执行。如上图所示。

 另外在实例中如果有template属性，将会把template编译成render函数，如果没有将会把外部的html作为模板编译。

beforeMount：

  挂载前，这一阶段$el属性已经添加进来，但是html中还是{ { data }}进行占位，还没有将数据进行挂载，以虚拟dom的形式存在。

mounted：

  挂载成功，虚拟dom被替换成真是dom，数据也已经进行挂载。

beforeUpdate：

  监听到数据变化，view并没有重新渲染。

updated：

  data中数据已经改变，触发重新渲染。

beforeDestory：

  vue实例仍然存在并且可以使用，解除事件监听和数据绑定等。

destoryed：

  vue实例已经销毁。

Vue生命周期总结

beforecreate: 可以在这加loading事件

created ：在这结束loading，还做一些初始化，实现函数自执行

mounted： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

beforeDestory： 你确认删除XX吗？

destoryed ：当前组件已被删除，清空相关内容