vue - 生命周期第二次学习与理解

简介: 对于刚接触vue一两个月、才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期,直到前两天去面试,面试官让我说一下vue的生命周期。。。其实我的心中是有那张图的,但是因为学习、分析的年代久远,心中有图却不知道怎么表述,成了个能发声的哑巴,最后也就只能按顺序说出了那几个钩子函数,真是憋足了气!直到今天一鼓作气二刷生命周期,我才恍然大悟,原来我之前的理解中,潜意识里一直是把那几个钩子函数当做了vue的生命周期!简直了,想想那天,面试官肯定在心里把我鄙视死了吧!好了不扯了,直接说我今天看完后,自我感觉还很好的新的理解吧。

对于刚接触vue一两个月、才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期,

直到前两天去面试,面试官让我说一下vue的生命周期。。。

其实我的心中是有那张图的,但是因为学习、分析的年代久远,心中有图却不知道怎么表述,成了个能发声的哑巴,

最后也就只能按顺序说出了那几个钩子函数,真是憋足了气!

直到今天一鼓作气二刷生命周期,我才恍然大悟,原来我之前的理解中,潜意识里一直是把那几个钩子函数当做了vue的生命周期!

简直了,想想那天,面试官肯定在心里把我鄙视死了吧!

好了不扯了,直接说我今天看完后,自我感觉还很好的新的理解吧。

也许日后再深入接触后,会发现今天的理解也很浅显,但是至少今天比我前天好多了哈哈。

 

生命周期:就是从一个组件或者实例开始被初始化、创建开始到这个实例被销毁或者结束的一个过程。

     这个过程比如官网表述的:在过程中需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等

       同时,在这个过程中vue给我们提供了很多的方法,也就是所说的生命周期钩子函数。

     在实例生命周期的不同阶段借助这些钩子函数,用户在不同阶段添加自己的代码

由此:真正的生命周期是一个流程,而不是单单那几个钩子函数,钩子函数只是用来在流程的不同阶段帮助我们做更多的事情。

 

在我粗浅的理解下,我暂时把vue的生命周期统分成五大区块

一、创建(初始化)

二、查找与处理(找到组件并渲染)

三、挂载(插入)

四、更新(重新渲染并插入)

五、销毁(卸载所有)

 其中每一大块又分几个小的步骤,但是大体规律又是如出一辙:

  • 本区块开始前(一个区块流程开始的钩子告诉你)
  • 本区块开始中
  • 本区块开始后(一个区块流程完毕的钩子告诉你)

好像都是废话哈哈,但我真的对这一点的感受很深刻。

 

接下来一个一个来

就像我们人从生下来到死这么一个过程,要有这个流程,先得开始:

一、创建部分

new Vue(  这句代码,初始化一个vue实例,开始创建一个vue对象

 生命周期开始,init event初始化事件,为当前实例做基础配置;

 

创建之前,这里提供一个钩子函数,beforeCreate 开始创建钩子,

  这个时候还啥也没做呢,页面一片空白,可以在页面中先展示一个loading组件,给用户一个友好体验;

 

创建中,init injections & reactivity 创建过程中,data属性被成功绑定,dom未生成;

 

创建之后,这里提供一个钩子函数,created 创建完毕钩子,

  这个时候vue对象实例化完毕,dom依旧未生成,页面空白,

  但是,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。

  可以在这里ajax获取数据赋给data属性了,以便日后使用;

 

二、查找部分

也就是new Vue()括号里边的参数开始被执行解析的过程:

 

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

 

new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

查找el属性的对应内容,el对应的DOM 元素作为 Vue 实例的挂载目标

  如果值可以被找到,那么实例将立即进入编译过程

  如果找不到,就去查是否在括号后边挂载了$.mount()并有内容,用于手动开启编译

    以上官网解说:“如果在实例化时存在el这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。”

    官网:https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-DOM

  如果都没找到,生命周期结束;

 

如果顺利的都找到了,就继续往下查找{}内的下一个属性template

  如果template对应的值当中有组件或者有html内容,那么也算查找成功,

  如果为空,继续查找render属性值是否为空

 

紧接着,如果{}选项中存在渲染函数render,

  那么template将被忽略,因为render渲染函数是字符串模板的代替方案,

    render可以让你发挥 JavaScript 最大的编程能力,而不用写template的静态模板

  如果没有或为空,template字符串模板将会替换挂载的元素,即el的属性值

    挂载元素el的内容都将被忽略,除非模板template的内容有分发插槽。

  如果template和render都不存在,则生命周期结束。

 

查找阶段汇总:

  Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

 

至此,食材都准备好了,vue大厨开始开工吧!

此时,将template里的内容放到render函数中开始渲染处理,即执行render方法渲染template里的内容。

(这里是对vue的语法进行解析吗?)

 

题外话:

el其实就是日后要挂载vue组件的一个目标点,如果连目标都找不到,还活着干嘛,干脆结束

template/render就是日后要做的事情,如果都不知道自己接下来要去做什么,还活着干嘛,干脆也结束

 

菜都准备好了总要上桌吧!

所有的dom结构都被渲染好了,vue语法也被解析成正常的html内容了,总要放到页面展示了吧:

三、挂载部分

开始挂载之前,这里提供一个钩子函数,beforeMount挂载前钩子,

  编译template里的内容并在虚拟dom中执行,页面上依旧没有任何展示;

 

挂载中,要做的事就是创建vm$.el,并替换到el元素,

  这一段我也不是太理解,大概感觉就是将#app的那段空的div换成刚才vue生成好的虚拟dom;

 

挂载完毕,这里提供一个钩子函数,mounted挂载完毕钩子,

  el 被新创建的 vm.$el 替换,并挂载到实例上去

  至此,所有的dom结构和数据都被展示到页面当中,

    这时可以做一些事情,比如关掉之前展示的loading;

 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

 

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

 

nextTick:在dom结构更新后使用这个方法获取最新的dom结构  

 

 

生命周期到这里,也算初步完成了他的使命,

  如果是一个纯静态页不做任何修改展示的话,根本没必要用到生命周期的后两区块内容了。

但是如果在mounted之后再对实例中的data属性做操作的话,就会走进生命周期的另一个阶段:更新

四、更新部分

依旧是那个套路,触发了更新的开关后,会给一个开始更新的回调:

更新之前,这里有一个钩子函数,beforeUpdate开始更新前钩子,

  在这个钩子里可以提供一个弹窗提示用户确认跟新啥的。或者再展示一个loading;

  也可以手动移除已添加的事件监听器

 

更新中,vue实例要开始将旧数据替换为新数据,在虚拟dom中重新渲染,

  虚拟dom开始改变,但是页面这时没有任何变化,因为只是改的虚拟dom,还并未真正修改dom结构;

 

更新完毕,这里有一个钩子函数,updated更新后钩子,

  这时真正的dom结构被彻底替换,页面展示上也会发生改变,

    在这个钩子里可以提供一个弹窗告诉用户更新完毕。同时去掉loading弹层啥的;

 

注意: updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated

 

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

 

  

 

如果执行了vm.$destory,就会进入到最后一个部分

五、销毁部分

同上

开始销毁vue实例之前,会有一个钩子函数提示开发者组件要开始销毁:beforeDestory开始销毁钩子,

  在这个钩子中我们可以提醒用户是否删除等,或者做一些开发者与业务有关的相关操作;

 

销毁中,vue这时的主要目标就是卸载,就像人要洗澡前各种脱一样(具体就不要想象了!),

  他要卸载在身上的各种监听、各种事件, 各种绑定以及各种子组件实例销毁,感觉像毁灭一切

    比如watchers(我没用过没有发言权)、子组件child components、事件event;

 

销毁后,这时再次提供最后一个钩子函数,destoryed销毁完毕,

  在这里我们可以提示用户删除完毕啥的,也可以清空我们自己的定时器或者做一些其他善后工作;

 

到这一步,此次整个vue实例的生命周期就彻底结束了。

 

以上,仅是自己了解vue后再刷生命周期图的二次理解,仅代表个人的理解,

不一定完全正确,欢迎指正,最后也别全信。毕竟绝知此事要躬行。

 

最后,贴一张一刷时自己备注的官网生命周期图,对照着图再去理解我的总结应该更好。

 

 

哇塞,认真学习了16分钟,记录草稿后,加上自己理解对树讲述了两遍后,一口气2000字的心得写下来了。

真的是画竹要先胸有成竹才行!

2018-06-09  14:07:16

目录
打赏
0
0
0
0
4
分享
相关文章
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
115 0
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
131 17
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
71 1
Vue框架中常见指令的应用概述。
通过以上的详细解析,你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一,无论是构建简单的静态网站还是复杂的单页面应用,你都会经常用到。记住,尽管Vue提供了大量预定义的指令,你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器,让编码变得更轻松、更愉快吧!
34 1
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
86 0
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
42 0
vue 的实例生命周期
vue 的实例生命周期
83 0
08Vue - Vue实例(实例生命周期)
08Vue - Vue实例(实例生命周期)
63 0
08Vue - Vue实例(实例生命周期)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问