现代页面组成： 编写结构（UI【html】）、美化样式（css）、处理交互（javascript）
0x00 前沿【为什么？】
javascript操作dom —— template + javascript —— react & Vue
前段技术演变
《1》javascript原生操作dom， 通过web API的原生方法
缺点：（1）原生js操作dom繁琐，效率低（DOM-UI操作UI）（2）javascript直接操作dom，浏览器会进行大量的重绘重排 （3）原生js没有组件化编码方案，代码复用率低
《2》 jQuery + 模板引擎 ，不用手动拼接字符串来渲染网页结构
缺点：（1）需要定义大量模板结构 （2）缺少语法高亮和智能提示 （3）数据变化时需要手动调用模板更新
业务增加时，dom操作频繁的性能问题还是没有解决
有点：屏蔽了dom api之间的兼容性，提供了Dom操作的效率和体验
《3》Vue/React 数据驱动视图（数据变化页面自动更新）
优点：（1）高效性能：虚拟dom， 不总是直接操作dom，然后使用dom diffing算法，最小化页面重绘（2）代码管理：组件化，提高了代码的复用以及管理。
总结： 1）提供项目的运行性能 2）提高代码管理 3）重塑架构
0x01定义： 【是什么？】
共同：
1）是一款/声明式/、/组件化/模型构建UI的javascript库。
2）都是通过虚拟DOM来进行优化dom的操作【底层实现不同】
3）组件之间都是可以通过props来传递数据的。
声明式渲染：Vue/React 基于标准 HTML 拓展了一套模板语法/JSX，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue/React 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。
####### 渐进式框架
1）无需构建步骤，渐进式增强静态的html
2）在任何页面中作为 Web Components 嵌入
3）单页应用（SPA）
4）全栈/服务端渲染（SSR）
5）jamstack/静态站点生成（SSG）
6）开发桌面端、移动端、WebGL、甚至命令行终端的界面。
数据流向方面：
1）React 单向数据流，通过改变state更新View。 props传递数据到子组件；
2）Vue 双向数据绑定， props传递数据到子组件， 里面有还有ref， watch等监听model变化。 reactive的响应性。
工具栈
Vue 工具
Vue 核心库
Vue-router 路由方案
Vuex 状态管理方案### Tips：这个是针对整个项目的数据管理，是不是单个组件
Vue组件库 （快速搭建页面UI效果的方案）
——————
辅助工具
——————
Vue-cli 生成Vue项目脚手架， 基于webpack
vite 全新的脚手架 ， 提高了构建项目的以及开发的效率
vue-devTools 浏览器插件，调试工具，主要是看UI
vetur vscode代码高亮工具
组成：
构建用户界面的一套完整的解决方案
Vue：
1）指令：用于辅助开发者渲染页面的模板语法
2）数据驱动视图： 数据源变化、页面结构自动重新渲染
3）事件绑定：用于处理用户和网页之间的交互行为
4）完整的组成部分：Vue + Vue router + Vuex + Vue 组件库
5）调试工具： vue-cli + Vue-devTools
React:
- 数据驱动视图
2）完成的组成部分： React + React router + redux + react dome(组件库)
3）调试工具 create-react-app 脚手架 + React developer tools
组成的不同，造成编码上的差异
编码文件组合：
Vue ： 使用了template + Vue + 数据逻辑（js）或者 vue + jsx + 数据逻辑
React ： react + jsx + 数据逻辑
小结：Vue栈的功能比React栈的稍微多点，所以，写法多了一种。 都是推荐使用第一种。
特性：
Vue:
1）数据驱动视图
2）双向数据绑定
React:
只有数据驱动视图
Tips: 数据驱动视图是
单向的数据绑定
Tips: 双向绑定数据的好处：开发者不需要手动操作DOM元素来获取表单元素（UI）最新的值。【ui能够驱动数据】
架构上：
Vue: MVVM
View: 表示当前页面所渲染的Dom结构
Model： 表示当前页面渲染时所依赖的数据源
ViewModel 表示vue的实例，是mvvm的核心。 —— 到时候看看和我们的swift以及oc上有什么区别的地方。
【vm : 包含了领域模型（Domain Model）和视图的状态（State）】
1）当数据源发生变化时，会被VM监听到，VM会根据最新的数据源绑定机制更新到View上
2）当表单元素的值发生变化时， 通过绑定机制出发VM， 然后更新model
React：MVP 【么有双向绑定（没有双向绑定的mvvm）】
model -> presenter -> view ， presenter中很好的通过state来更新view， 通知接收view上的点击时间来更新model。
MVP和MVVM区别: 它使用 数据绑定(Data Binding)、依赖属性(Dependency Property)、命令(Command)、路由事件(Routed Event) 来搞定与view层的交互, 当ViewModel对Model进行更新的时候，会通过数据绑定更新到View.
版本变化：
Vue 从2到3
新增： 组合式API， 多根节点组件 、更好的TS支持。。。
废弃：过滤器、off, $once ... 实例方法
调试工具：
都是有最终这个组件内容的一个调试工具。
react ： react developer Tools : 里面组成： components当前UI组成， profier 性能问题
vue : vue.js devtools Vue中只有有关components的UI组成
iOS 中的调试工具： UI工具在xcode输出串口的左上角的地方，也可以使用第三份的UI查看工具lookin ， 性能问题： profiler，当然还有其他的工具。
Android调试工具：UI components工具 SwissArmyKnife ，当然还有其他的，有时间再研究一下。
react native : 这个是有一个react debuger的工具的， 好像不太好用在图层上面。 有机会再进行研究一下。
flutter ： UI调试工具。
调试逻辑的方式：
1）断点
2）打印log
0x02 简单开始项目环境
1、创建虚拟DOM的方式
Vue:
-
通过new Vue 创建
React：
1）通过React.createElement('xx', {id: 'xx'}, 'xx') js原生方法
- 通过jsx方式
React中jsx创建方式
jsx = js + xml
它不是一个字符串， 也不是html/xml 标签， 它最终产生一个js对象。
jsx使用的注意：
1）定义虚拟dom的时候不要使用引号
2）标签中混入js表达式要用{}
3）样式类名指定不要用class， 要用className。
4） 内联样式， 要用style={{key: value}} 的形式去写
5）虚拟DOM必须只有一个根标签
6）标签必须闭合
7）标签首字母
（1）小写开头，则将该转化为html中的同名元素，若html中没有该标签，则报错
（2）大写开头， react去渲染对应的组件，若组件没有定义，则报错。
template : 模板引擎方面， 这个可以去了解一下art-template 等模板引擎。
jsx是一种语法糖： 里面包括了js+html的一种糅合的编码方式。
babel ：【可以查看一下源码】
1）将es6转化为es5
2）将jsx转化对应的js
3）。。。。
2、构建项目的方式 ，
1） 上面的例子中，通过手动写引入对应的库
2）通过脚手架，我们项目中更多的是通过脚手架。
Vue 上的内容
Vue 模板语法 , 有关模板语法可以做一个特殊的处理
1、{{}} 文本插值 :
{{ 变量}}
2、v-html 原始html:
也就是插入原始的html代码
<span v-html="rawHtml"></span>
3、Attribute 绑定
通过v-bind指令绑定attribute
- <div v-bind:id="dynamicId"></div>
简写：<div :id="dynamicId"></div>
将元素的 id attribute 与组件的 dynamicId 属性保持一致； - 将包含多个attribute的js对象 通过不带参数的v-bind绑定到单个元素中。
data(){
return {
inputAttr:{
type:'text',
placeholder:'请输入',
}
}
}
<template>
<input v-bind="inputAttr">
</template>
将inputAttr 这个对象绑定到子组件input里卖弄的type和placeholder
4、使用js表达式
仅支持单一表达式, 即为一个能够求值出来的方法。
<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }} 变成：ok? message : ''
5、受限全局访问
1）模板中的额表达式呗沙盒化，可访问有限的全局列表
- app.config.globalProperties 显示添加全局变量。
6、指令 Directives
带有 v- 前缀的特殊 attribute 内置指令
- 简单命令：<p v-if="seen">Now you see me</p>
- 参数： <a v-bind:href="url"> ... </a> href 就是参数
- 动态参数 <a v-bind:[attributeName]="url"> ... </a>
3.1) 动态参数值的限制
动态参数中表达式的值应当是一个字符串，或者是null。特殊值null意为显式移除该绑定。其他非字符串的值会触发警告。
3.2) 动态参数语法的限制
动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的
<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>
推荐使用 计算属性 设置参数
- 修饰符 Modifiers
修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。
<form @submit.prevent="onSubmit">...</form>
例.prevent 修饰符会告知 v-on 指令对触发的事件调用event.preventDefault()
小结： 模板语法和jsx语法应该是并列的语法，
jsx语法不管是vue还是react应该都是一样的。 更多的其他的模板语法， 看它的模板引擎是怎么写的。
vue 指令
v-text
v-html
v-show
v-if / v-else / v-else-if
v-for
v-on
v-bind
v-model v-model配合使用
v-slot
v-pre
vonce
v-memo
v-cloak
渲染指令： v-text 、v-html 、{{ 变量 }} 【使用最多】
属性绑定指令： v-bind 【数据驱动视图】
双向绑定指令：v-model 【处理表单】
事件绑定指令：v-on 【简写： @】 参数($evenet)、(事件、按键)修饰符、
条件渲染指令：v-if /v-show 【if创建和销毁， show样式控制】
列表渲染指令： v-for 【注意设置key】
key 注意事项
1)key 的值值能是字符串或数字类型
- key的值必须具有唯一性，（即：key的值不能够重复）
- 建议把数据项id属性值作为key的值。 （因为id属性的值具有唯一性）
- 使用index的值当key的值没有任何意义【因为index值不具有唯一性】
- 建议使用v-for指令时一定要指定key的值【既能提升性能又能够防止状态紊乱】
UI 上的逻辑：
1）显示还是不显示 ， if 【分支】
2）显示列表for 【循环】
3）优化上： UI渲染的缓存处理
UI显示逻辑的基本实例实现，基本上能够实现这个功能了，
也就是到这里，基本上能够开发项目了。
单文件组件 SFC（single-file components）
可以使用一种类似html格式的文件来写组件。 —— 即为一个文件中写一个组件。
单文件应用程序 （single page Application） 简称SPA
一个web网站中只有唯一的一个html页面，所有的功能与交互都在这唯一的一个页面内完成。
特点：
- 功能局限于一个web页面中，仅在web页面初始化时加载相应的资源(html、js、css)
- 无需重新加载的前提下处理页面切换。
- 负责处理抓取新数据
优点：
-
良好的交互体验
《1》单页应用的内容的改变不需要重新加载整个页面
《2》获取数据也是通过Ajax异步获取的
《3》没有页面之间的跳转，不会出现“白屏现象” -
良好的前后端工作分离模式
《1》后端专注于提供API接口，更易于红丝线API接口的复用
《2》前端专注于页面的渲染， 便利于前端工程化的发展 -
减轻服务器的压力
《1》服务器只提供数据，不负责页面的合成与逻辑的处理， 吞吐能够力提高几倍。
缺点：
1）首屏加载慢
优化方案： 1）路由懒加载 2）代码压缩 3）CDN加速 4）网络传输压缩
2）不利于SEO : 通过SSR服务器渲染解决。
脚手架穿件工具：
vue-cli / vite 工具
学习路径：
1） 先用工具创建一个项目
2）然后查看一下项目的结构。
在工程化的项目中， vue要做的事情很简单： 通过main.js把App.vue 渲染到index.html指定的区域中。
其中:
- App.vue 用来编写待渲染的模板结构
- index.html 中需要预留一个el区域
- main.js 把App.vue 渲染到index.html 所预留的区域中。
组件 & 模块化
组件： 更多的是UI上的拆分
模块： 更多的是业务的划分
组件化的思想
1）提高了前端代码的复用性和灵活性
2）提升了开发效率和后期的可维护性
组件注册方式：
1）被全局注册, 可以在全局任何一个组件内使用
2）被局部注册， 只能在当前注册的范围内使用
Props 组件自定义属性， 组件的使用者可以通过props把数据传递给子组件内部，供给子组件内部进行使用。
作用： 父组件通过props向子组件传递要展示的数据,
好处：提高了组件的复用性
可以把动态的数据项声明为props的自定义属性，自定义属性可以在当期那组件的模板结构中被直接使用。
如果父组件给子组件传递了为声明的props属性，则这些属性会被忽略，无法被子组件使用。
v-bind动态绑定props的值。
class和 style的 绑定
:class 和 :style 动态绑定
props 验证
网友评论