前端框架vue.js 学习

ゝ一纸荒年。 2022-06-09 12:11 311阅读 0赞

## **Vue.js 从懵逼到入门** ##

![这里写图片描述][SouthEast]

1、前端发展大事件  
浏览器性能弱，标准化程度低  
2008谷歌V8引擎诞生，前端的计算能力提升  
2009年国际标准化组织ECMA发布了第五代JS规范（ES5），前端的装备得到了整体性的提高  
2009年AngularJS诞生。  
2011年React和Ember诞生。  
2014年Vue.js诞生。  
2015年ECMA在发布了第6代JS代码规范（ES6），带来很多令人欣喜的功能特性。  
ES7-ES8….

2、啥是VUE？  
是一套构建用户界面（viwe）的MVVM框架  
3、MVVM （Model–view–viewmodel）来龙去脉  
MVC  
M（data model）  
业务逻辑、后台逻辑  
V(view):  
视图的架构、输出和展示，用户眼睛看到的内容。  
C(Controller层)  
操作model层的数据，并且返回给view层展示(如：onclick之后的数据变化)

![这里写图片描述][SouthEast 1]  
特点  
view层和model层强耦合  
Controller层（activity）既属于view也属于model  
造成代码混乱冗余、可读性差、不好管理  
MVP  
![这里写图片描述][SouthEast 2]  
1.特点：presenter层负责view的行为和传递行为数据给model（偏VIEW）  
2.优势：基本可以做到视图的内容由前端处理，便于管理，比如ajax加载的状态通过前端去显示和处理  
3.缺点：

*  没有形成统一的规范
 *  view的渲染和控制presenter处理，view层和presenter层耦合程度高

现官网模式  
**MVVM**  
![这里写图片描述][SouthEast 3]  
M（data model）  
业务逻辑、后台逻辑  
V(view):  
视图的架构、输出和展示，用户眼睛看到的内容。  
VM（view model）：value converter  
根据后台提供的数据对象，转换、整理成便于管理和更好低为视图层服务的对象  
描述和说明后台数据  
为后台提供服务，组织在视图层的 use cases(会具体描述用户与系统的交互行为和系统如何响  
应) 交互数据输出给后端  
Binder：  
Binder负责在V和VM之间进行协调和沟通，实现数据绑定  
能自动绑定，保持v vm层数据保持规范、一致  
官网模式对比  
页面请求 -> 后端加载FreeMarker模板 -> 解析 -> 使用数据模型来填充该模板 -> 再将最后的  
HTML页面输出给客户端 -> 浏览器渲染  
解析FreeMarker模板中变量的顺序如下:  
1,FreeMarker模板内建的变量;  
2,ValueStack中的变量;  
3,ActionContext中的变量;  
4,HttpServletRequest中的属性;  
5,HttpSession中的属性;  
6,ServletContext范围的属性.  
页面请求（异步优势) -> 服务器输出数据模型给客户端 -> 前台显示数据处理 -> 浏览器渲染  
4、为何出现、解决什么问题  
简化数据绑定（NG比较麻烦,控制器-模型-视图）  
开发大型单页面应用  
代码复用、提高效率、易维护（支持组件化，积木式编程，）  
提高可读性高（相较NG）  
规范化管理  
5、优势  
![这里写图片描述][SouthEast 4]  
**JavaScript框架中最快最小**  
全面优化过的 React 通常也会慢于开箱即用的 Vue  
![这里写图片描述][SouthEast 5]  
**学习曲线平缓，渐进式**  
React 学习曲线陡峭，在你开始学 React 前，你需要知道 JSX 和 ES6、需要学习构建系统  
Vue的应用模式简单到只有一条代码  
**可读性强**  
vue：templates React:JSX  
![这里写图片描述][SouthEast 6]  
![这里写图片描述][SouthEast 7]  
**容易与已有库项目整合**  
Vue-cli 脚手架  
能让你非常容易地构建项目(webpack、安装插件)  
**6、特性**  
**双向数据绑定**  
MVVM,视图模型（VM）中数据发生改变，用户视图(V)跟着变，用户视图(V)改变时，视图模型  
（ＶＭ）数据同时发发生改变  
底层Object.defineProperty对象  
vue.js主要利用了accessor descriptors的set和get来更新视图  
举个栗子  
defineProperty绑定实例  
![这里写图片描述][SouthEast 8]  
**组件化**  
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树  
![这里写图片描述][SouthEast 9]  
**虚拟DOM、提升页面刷新速度**  
JS已使用V8引擎，速度之快与JAVA是一个量级，浏览器性能的耗费主要用在DOM的操作上（重绘  
、重排）  
**真实的DOM渲染为何慢？**  
**DOM本身是个非常复杂的对象，慢！**  
**JS访问和处理DOM，慢！**  
DOM对象是给JS操作HTML提供API，两个相互独立的功能只要通过接口彼此连接  
![这里写图片描述][SouthEast 10]  
**渲染页面，最慢！**  
DOM渲染到页面，调用浏览器渲染引擎，浏览器调用layout算法和调用 CSS 重算算法  
，然后输出（重绘、重新、组合）。  
**什么是虚拟DOM(VDOM)**  
![这里写图片描述][SouthEast 11]  
**虚拟DOM原理**  
1、用 JavaScript 对象结构模拟 DOM 树的结构，然后用这个树构建一个真实  
DOM 树  
2、当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较  
，记录两棵树差异  
3、步骤2记录的差异应用到步骤1所构建的真实DOM树上，视图就更新了  
**VDOM为何快？–最小化实现DOM渲染**  
比如：表格的更新，VDOM将直接更新单中文本内容，杜绝对表格重新渲染的可能性  
使用createDocumentFragment方法（创建文档碎片节点）创建dom片段，一次性处理  
10个元素的循环  
![这里写图片描述][SouthEast 12]

![这里写图片描述][SouthEast 13]  
**便于扩展的插件系统**  
vux vue-router vue-resource axios  
**7、前后端分离实例**  
旧代码说明、结构分析  
旧代码特点  
工作模式  
新代码说明、结构分析

新代码特点  
工作模式  
**8、数据绑定实例**  
官网列表筛选  
**9、介绍SCM架构**  
nodejs + webpack + vue + vue-router + vue-resource + vuex + elementUI+ 众多依赖  
nodejs:搭建前端运行环境  
webpack:编译、打包工具，运行环境热更新，生成环境实现按需动态打包  
vuex:将数据模型完全和模板分开，负责状态管理，生成全局可复用的数据和数据处理操作  
vue-resource: ajax  
vue-router:路由管理，实现单页面应用  
elementUI：使用第三方组件UI，使用这些组件我们只负责数据模型和逻辑  
vue-devtools调试  
localhost:8088/Logon.do  
admin abcd.1234  
**10、SCM枚举值管理功能实例**

[SouthEast]: /images/20220609/ce4b23fc8b8d4d14860a0136bdedc5a8.png
[SouthEast 1]: /images/20220609/d9d43f016d374142867217adc59c789b.png
[SouthEast 2]: /images/20220609/554fdd4b4d074205b6d5fef7fe38d480.png
[SouthEast 3]: /images/20220609/b09c864989154b09b009b31cc2ef60bd.png
[SouthEast 4]: /images/20220609/86d2367f446a4e7e9a86d97eb4058b93.png
[SouthEast 5]: /images/20220609/e2a0652e953748efaba24ed531f9cfaa.png
[SouthEast 6]: /images/20220609/9cedca49ae724b588c9576610c372fe0.png
[SouthEast 7]: /images/20220609/8ee8e9c238ab43afbf5133c78163179b.png
[SouthEast 8]: /images/20220609/acbdfb35a50f4f79b59edfd0203f4e78.png
[SouthEast 9]: /images/20220609/ee4680ce512d4ade8ce17e2c5f90345d.png
[SouthEast 10]: /images/20220609/286456a250f549f0a366e7eee8e0b9aa.png
[SouthEast 11]: /images/20220609/871c18cf52714c9fb6d742e48e8adf17.png
[SouthEast 12]: /images/20220609/c9eda22de178441fae18835b18135f92.png
[SouthEast 13]: /images/20220609/0668fd5046b148598d52982af1b880d0.png