浅谈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死亡,内存释放,所有数据,方法,指令…都不可用

你可能感兴趣的:(Vue.js,vue)