浅谈Vue生命周期

生命周期&钩子函数

官方图片(2.x)

先简单介绍一下流程

pre： new Vue()

为Vue实例分配内存空间, Vue生命周期开启

no.1：beforeCreate()

这是Vue生命周期第一个钩子函数，这时的vm就像一个空壳

• 开始初始化Vue的数据及事件, 并对其数据进行监控

no.2： created()

此时所有的对象和属性都已编译到了内存之中，所有我们可以通过this.property读取到数据

• 开始寻找挂载点-el属性，如果没有找到, 则查看vm.$mount(el), 这是一个回调函数
• 继续寻找模板-template，如果没有找到, 则将el的父节点作为默认模板
• 将编译好的模板放到内存

no.3： beforeMount()

此时的模板仍然没有被渲染到html，故此我们此时无法直接对DOM树进行操作

• 在此钩子函数中, 将为创建vm.$el, 并用el将其替换

no.4：mounted()

内存中的模板已经被渲染到html，此刻可以任意的操作DOM元素

• 等待数据的改变，或是vue实例的销毁

no.5：beforeUpdate()

当数据（vm监控到的任一数据）发生变化，即触发该钩子

• 我们知道，vue在beforeCreate钩子初始化时，就对所有内存中的数据进行了监控，一旦其发生变化，dom也将立即随之变化，这种机制的实现暂时不谈
• 稍加思考，就能知道，此刻的dom是不会发生变化的，毕竟是在更新前嘛，然而远不是你想的那样简单

no.6：updated()

vm已经知晓了哪个属性发生了变化

• 将内存中虚拟的DOM树更新（渲染）
• 谁都知道，这里的重新渲染，绝不是真的彻底渲染，那样太傻了
• 重新回到mounted() 钩子

no.7：beforeDestroy()

内存地址遭到破坏 - 进程死亡
可以是人为的手动关闭浏览器，可以是服务器停掉了，也可能是发生了物理破坏

• 此时，vm的所有数据，方法，指令…都可用
• 我们可以在这里做一些缓存记录，保存本次的信息，不至于数据丢失

no.8：destroyed()

进程彻底死亡，vm死亡，内存释放，所有数据，方法，指令…都不可用