最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容。 一、钩子函数在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁出现,也相信给很多初学者带来了困扰。那到底什么是钩子函数呢? 按我个人的理解,钩子函数就是一个函数,就是在vue实例在某个时间点自动执行的函数。钩子函数钩子函数,就是挂载一些东西的,我们把需要实现的一些功能代码写在对应的钩子函数中,当生命周期在执行的时候,就能执行我们挂载的代码。 钩子函数的实现,基本原理就是callback,回调函数。 二、vue生命周期图示(注释)原图是从vuejs官方文档上拷下来的,自己用ps写了一点注释。 三、vue生命周期详细解析1. 实例化vue(组件)对象:new Vue()2. 初始化事件和生命周期 init events 和 init lifecycle3. beforeCreate函数:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 即此时vue(组件)对象被创建了,但是vue对象的属性还没有绑定,如data属性,computed属性还没有绑定,即没有值。此时还没有数据和真实DOM。属性还没有赋值,也没有动态创建template属性对应的HTML元素(二阶段的createUI函数还没有执行) 4. 挂载数据(属性赋值)包括 属性和computed的运算,通过依赖注入导入依赖 5. Created函数:此时vue对象的属性有值了,但是DOM还没有生成,$el属性还不存在。 即:data,computed都执行了。属性已经赋值,但没有动态创建template属性对应的HTML元素,所以,此时如果更改数据不会触发updated函数 如果:数据的初始值就来自于后端,可以发送ajax,或者fetch请求获取数据,但是,此时不会触发updated函数 6. 检查1)检查是否有el属性 完成了全局变量$el的绑定。 2)检查是否有template属性 检查配置中的template项,如果没有template进行填充被绑定区域,则被绑定区域的el对象的outerHTML(即整个#app DOM对象,包括< div id=”app” >和< /div>标签)都作为被填充对象替换掉填充区域 即:如果vue对象中有 template属性,那么,template后面的HTML会替换$el对应的内容。如果有render属性(渲染),那么render就会替换template。 即:优先关系时: render > template > el 7. beforeMount函数:模板编译(template)、数据挂载(把数据显示在模板里)之前执行的钩子函数 此时 this.$el有值,但是数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换 8. 模板编译:用vue对象的数据(属性)替换模板中的内容9. Mounted函数:模板编译完成,数据挂载完毕 即:此时已经把数据挂载到了页面上,所以,页面上能够看到正确的数据了。 一般来说,我们在此处发送异步请求(ajax,fetch,axios等),获取服务器上的数据,显示在DOM里。 10. beforeUpdate函数:组件更新之前执行的函数,只有数据更新后,才能调用(触发)beforeUpdate,注意:此数据一定是在模板上出现的数据,否则,不会,也没有必要触发组件更新(因为数据不出现在模板里,就没有必要再次渲染) 数据更新了,但是,vue(组件)对象对应的dom中的内部(innerHTML)没有变,所以叫作组件更新前。(数据更了,模板没更新) 11. updated函数:组件更新之后执行的函数 vue(组件)对象对应的dom中的内部(innerHTML)改变了,所以,叫作组件更新之后 12. beforeDestroy:vue(组件)对象销毁之前13. destroyed:vue组件销毁后 |
|