《一句话理解Vue核心内容》阅读笔记

2023-05-15,,

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架

在解释什么是渐进式框架之前,有必要了解一下什么是框架

在最初的前端开发中,我们利用JS获取HTML中的DOM元素;这样的方式虽然简单实用,但随着业务需求的增加,会使得代码变得混乱,难以维护。

比方说,现在有一个需求:

有一张图片,在被点击时,可以记录下被点击的次数。

接下来,需求稍微发生了点变动

要求有两张图片,分别被点击时,可以记录下各自的点击次数。

这时只需要把原先的代码复制一份就可以了

但当这个需求的图片变成了五张时,虽然通过复制粘贴代码也可以实现该需求,但此时代码就会变得臃肿,虽然在接受的范围内,但此时如果再进行需求的变更

还是五张照片分别记录被点击次数,不过这样单独罗列五张图片似乎太占空间,现在只需要存在一个图片的位置,通过选择按钮来切换被点击的图片。

这个需求看上去很微小,但却可能导致你的代码清空重写;此时,可发现使用JS获取DOM元素所存在的不足之处

为了应对这种情况,可以将代码的组织结构分为三个板块,数据(M)/ 视图(V)/ 逻辑控制(*)

数据板块:只含有数据内容
视图板块:负责更改样式
逻辑控制:建立数据板块和视图板块间的联系

这样的代码组织结构好处在于,发生需求更改时,只需要对相应的板块作出更改。

这种开发模式也就是常说的MV模式,MVC / MVVM / MVP 等都是由其衍生的;这种模式的主要目的在于,让视图与数据不会发生直接联系;由此可知,“DOM流”的缺陷在于把dom当作Model,直接从dom中获取数据,然后通过dom来修改视图,这其实是将视图与模型混在一起了,不利于代码的维护。

因此,MV* 的代码组织方式慢慢变成了框架;一个团队中选择框架的重要原因在于可以提前设定好代码的组织结构,让实际的项目开发有一个相对明确的方式,而不需要担心某个个体其特有的编码习惯或疏忽造成代码的混乱。

以上就是对框架的认识。严格来说,Bootstrap 并不能称作一个框架,它其实算是 CSS 的一个工具集,主要用于界面的美化;Jquery 也只是把一些重复的操作作了简化,以及兼容性的解决,所以只是一个方便操作的JS库。

在学习中,我们没必要一开始就全部搞懂Vue的功能和组件,先从核心开始学习,再逐渐扩展。同时,在使用中,我们也没必要把全部组件都拿出来,需要什么用什么就是了,而且Vue也可以很方便的与其他已有项目或框架相结合使用。

《一句话理解Vue核心内容》阅读笔记的相关教程结束。

《《一句话理解Vue核心内容》阅读笔记.doc》

下载本文的Word格式文档,以方便收藏与打印。