vue和typesript区别 vue typescript javascript

目前 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: 任意类型.

 再查看后台，数据成功拿到之后就可以显示到页面上了，

 加点样式

 展示

十、装备练习

尝试使用组件，porps传参

vue3兼容vue2的语法
仅是修改了 vue2的 几个配置项的写法
- data, computed, methods, 生命周期, watch...

为组件声明参数的写法都与vue2相同，写在setup外面，然后在组件页的html中写形参，

 在主页循环并传递参数

 样式写在组件页，

请求代码写在主页，

再引入组件，效果与直接写在主页一样

 展示