目前 vue 的最新版本: vue3
- vue3的 JS部分 与 vue2的差异极大. Vue3 推荐采用 TypeScript 代替 JavaScript
一、TypeScript
是 微软公司开发的, 在 JS中混入大量的 Java 语言特征, 最后形成的一个新的语言
JS的 ES4 即 第四个版本, 当初的打算就是 做一个 Java 和 JS 的混合体.
后来因为反对派认为: JS中引入过多的java特征 就不纯粹了... 所以最终被放弃
官网: TypeScript中文网 · TypeScript——JavaScript的超集
由于浏览器只能运行 JavaScript, 所以 TypeScript 书写的代码要想运行到浏览器上, 则必须编译为 纯JavaScript 语言才可以
安装编译器(非必须): npm i -g typescript
1、强类型特征
开发语言通常分为两类
1. 弱类型: 代表语言 JS PHP
- 优点1: 隐式类型转换 - 系统会根据语境自动转换数据的类型
- 优点2: 声明一个变量后, 可以存储任意类型的值
- 总之: 不严谨, 系统帮你预判处理很多场景
- 缺点: 由于系统做了太多自动化的处理, 导致程序员掌控力不足
2. 强类型: 代表语言 C C++ Java Python....
- 优点: 严谨性. 变量没有隐式类型转换, 一个变量只能存指定类型的值
- 总之: 可以让代码更加健壮可靠, 安全..
JS中: 无法规定变量存储的值的类型，不管赋的什么值都不报错都可以赋值，不安全
而TS语言: 加上格式 -- 变量名:类型名，只有符合类型的值才合法，其他的都会报错
2、代码提示
制作一个upper函数, 能够把参数变大写, 然后返回，在书写到return words.的时候，是不会把toUpperCase提示出来的，为什么？因为 vscode 不知道words变量的类型, 所以预判不出提示，但是如果加上声明变量的类型，就会有提示了？
TS可以声明变量的类型, 给vscode看, vscode自然能给出提示，由此可知，强类型的声明, 是给编程工具看的。
而且，由于强类型的特征, vscode能帮你检测错误，给出错误提示,非常友好，例如，给的形参如果不是字符串类型，系统会报错：
然而，浏览器只能运行 JS 代码, 不支持TS的，需要用官方提供的编译软件，命令 tsc 文件名.ts；编译软件: 就是剔除了 TS的特殊语法, 转换成 纯JS的语言；即删除了 :string
在传统开发中, 当多人合作的场景下, 如果存在多个JS文件，一旦 方法名/变量名 重名, 会导致冲突，在TS语言中, vscode会自动检测 同时打开的多个文件中, 是否有重名的。
3、数据类型
number boolean string null undefined
object
ES6新增: symbol bigInt
any: TS提供的任意类型, 相当于JS的弱类型，可以存放任何类型
联合类型: 自定义的混合类型
4、数组类型
names中存储人的名字
TS中可以规定 数组中元素的类型
Array<类型> : 代表数组, 其中元素都是指定的类型
语法糖写法：string[ ]
数组类型, 规定每个元素的类型：数组名称：[元素类型1，元素类型2，元素类型3，...]
5、对象类型
需求: 声明 员工对象, 比如有 姓名 年龄 手机号 3个属性
interface: 接口，接口是一套标准, 只要按照标准制作出来的才能使用
命名: 习惯大驼峰, 但不强制
在JS中，无法限制/规定 一个对象有哪些属性 和 属性的类型
变量 e1 满足 Emp 标准
6、class
来自java的面向对象语法
JS的设定:
对象.属性名 = 值
有两种效果
1. 属性名存在, 则为更新值
2. 属性名不存在, 则为添加新的属性
风险-此设定会导致: 属性名拼写错误时, 错误的新增了属性!
所以TS剔除了这一风险，在TS语言中，不能新增属性 只能修改已有属性，但就必须提前声明属性才能使用。以下是完整写法，按序号阅读：
7.权限词
只有Java才有权限词，JS没有权限词，有三个权限词：public: 公开的；protected: 保护的；private: 私有的。
二、Vue监听原理
1.vue2
面试考题: vue2的 数据变化更新DOM 的原理?
答: 为数据项添加监听器, 数据变化自动更新相关DOM
精确点: defineProperty + set 监听
这个设计的专业称呼: MVC 设计模式
Model: 数据模型, 数据项 即 data
View: 视图模型, DOM元素, 就是html代码
Controller: 控制器. 监听器的操作, 控制数据变化后更新什么DOM
MVVM 设计模式:
Model: 数据模型, 代表数据data
View: 视图模型, 代表 DOM元素, 即html
ViewModel: v-model双向绑定 -- 表单元素变化 更新相关数据
面试官问: 什么是 SPA? 单页应用 Single Page Application
vue的特点: 整个项目就一个 index.html, 通过路由系统实现局部的组件切换 达到多页的效果
面试问题: 什么是 OOP? 面向对象
三大特征: 封装 继承 多态
2.vue3
vue2 利用 defineProperty 为每个数据添加监听器，属于 ES2009 即 ES5 新增的特性
例如: 南昌校区定定规矩 - 每个逃课的同学必须登记每个学员都要做 早晚打卡
vue3: 使用 ES2015 即 ES6 提出 proxy 代理特征实现监听
例如: 在班级门口放一个班主任, 负责记录每个学员的 考勤 比 挨个监听更加高效
面试官问: vue3 和 vue2的差别?
答: vue3采用ES6提供的新特性 Proxy 来监听数据变化
三、关于插件
vue2的插件
vue3的插件
四、Ref
自动生成结构：vbase-3-ts 简称v3ts
vue3 和 vue2的 html部分 没有太大差异，唯一差别: 不再要求唯一的根元素, 可以有多个根；style在vue3中无任何变化，所有的变化都集中在脚本script部分
变化一：
制作一个num变量, 在页面上显示，存储变量的写法不同
vue2： data(){ return {num:1} }
vue3： setup(){ return {num:1} }
变化二：
我们给按钮设置点击属性，变化num的值，发现并不好用，这是因为在vue2中，为了让数据项变化时 能够更新DOM, 所以为每个数据项都添加了 监听器 -- defineProperty. 但是并非所有数据都需要监听. 为那些没有更新需求的数据 也统一添加监听器 浪费了资源，所以在Vue3中，做了改动: 程序员需要手动为需要监听器的属性添加监听器；
vue2: 把所有的方法都存储在 vue对象里, 用 this 来调用. 负载高
vue3: 使用时临时引入, 达到最小负载, 极致性能
通过把a放在ref函数里
这样，a被放在一个value的属性中，伴随很多方法
ref(): 此函数把a进行了封装, 返回一个 具有监听器功能的对象
将ref_a做一个返回，点击事件就能正常使用了
再试着返回更多数据，用的时候只有放在ref函数里的变量能够变化
重大变化: vue3中 需要手动为 有变更需求的数据添加监听器，避免了 vue2中, 监听器的滥用. 提高系统性能, 减少资源浪费。
五、Reactive
使用ref函数手动添加提高了性能, 但是程序员太累了还有一次性的添加：
reactive: 可以把对象中的属性统一进行监听
采用的是 ES6 新增的 proxy 特性
在使用时写法如下，这里的data是代理对象
六、toRefs
问题点:
1. ref(): 适合把单个元素修改为 响应式的元素
缺点: 需要为每个值添加
2. reactive(): 可以用委托方式 监听整个对象的元素
缺点: 使用时需要写 data.xx 要加前缀
3. toRefs: 把 方式2 的元素 转换成 方式1的元素
toRefs: 可以把代理中的 转换成1个1个的
就可以直接使用，不需要再每一个都套在ref函数中，也不需要使用data代理了。
七、methods
vue2: 方法要存储在 methods 配置项中
vue3: 兼容vue2的语法, 但是vue3推荐把方法写在这个return里
但是return里面不能写太复杂的代码，所以我们把方法函数放在对象methods中，
这里在方法中书写this.num报错，但是html页面可以使用，排除插件原因之后，分析原因：
为什么报错: 报错分两种--静态和动态的
动态的: 运行时,浏览器后台的报错 -- 准确无误的
静态的: 代码未运行前, 由编程工具 或 插件 分析代码后 认为这个代码有问题 -- 不准确的, 只能算辅助性质
典型的静态分析错误:
解决方案1: 忍着
解决方案2: 关闭报错功能（不合理）
vue2中 this.num++. this是当前的组件对象
vue3中: this是 区别非常大的vue组件对象, 详见打印. proxy类型
八、computed
九、axios
安装axios, vue3目前不支持全局的axios 只能单独引入
安装指令： npm i axios
安装好后还是需要先引入axios,写法与vue2局部引入axios相同，注意后面用到的所有的都要引入
然后把请求写在页面显示时触发的 mounted周期里，这里与vue2不同是mounted 写法不同，在vue3中，写v3，会有生命周期提示，找到monuted回车即可，
请求写法也和vue2局部axios相同，但是数据保存到本地时，不再是this.data而是data.value，这是vue3中本地数据的位置
准备本地数据, 用来存储请求到的数据
any: 任意类型. TS就不再分析此变量的类型问题
再查看后台，数据成功拿到之后就可以显示到页面上了，
加点样式
展示
十、装备练习
尝试使用组件，porps传参
vue3兼容vue2的语法
仅是修改了 vue2的 几个配置项的写法
- data, computed, methods, 生命周期, watch...
为组件声明参数的写法都与vue2相同，写在setup外面，然后在组件页的html中写形参，
在主页循环并传递参数
样式写在组件页，
请求代码写在主页，
再引入组件，效果与直接写在主页一样
展示
