当前位置: 首页>编程语言>正文

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

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端,第1张

 

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_02,第2张

 

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_03,第3张

1、强类型特征

开发语言通常分为两类

1. 弱类型: 代表语言 JS PHP

  • 优点1: 隐式类型转换 - 系统会根据语境自动转换数据的类型
  • 优点2: 声明一个变量后, 可以存储任意类型的值
  • 总之: 不严谨, 系统帮你预判处理很多场景
  • 缺点: 由于系统做了太多自动化的处理, 导致程序员掌控力不足

2. 强类型: 代表语言 C C++ Java Python....

  •  优点: 严谨性.  变量没有隐式类型转换, 一个变量只能存指定类型的值
  • 总之: 可以让代码更加健壮可靠, 安全..

JS中: 无法规定变量存储的值的类型,不管赋的什么值都不报错都可以赋值,不安全

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_javascript_04,第4张

TS语言:  加上格式  --  变量名:类型名,只有符合类型的值才合法,其他的都会报错

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_05,第5张

2、代码提示 

制作一个upper函数, 能够把参数变大写, 然后返回,在书写到return words.的时候,是不会把toUpperCase提示出来的,为什么?因为 vscode 不知道words变量的类型, 所以预判不出提示,但是如果加上声明变量的类型,就会有提示了?

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_javascript_06,第6张

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_07,第7张

 TS可以声明变量的类型, 给vscode看, vscode自然能给出提示,由此可知,强类型的声明, 是给编程工具看的。

而且,由于强类型的特征, vscode能帮你检测错误,给出错误提示,非常友好,例如,给的形参如果不是字符串类型,系统会报错:

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_javascript_08,第8张

浏览器只能运行 JS 代码, 不支持TS的,需要用官方提供的编译软件,命令  tsc 文件名.ts;编译软件: 就是剔除了 TS的特殊语法, 转换成 纯JS的语言;即删除了 :string

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_09,第9张

在传统开发中, 当多人合作的场景下, 如果存在多个JS文件,一旦 方法名/变量名 重名, 会导致冲突,在TS语言中, vscode会自动检测 同时打开的多个文件中, 是否有重名的。

3、数据类型

number boolean string null undefined

object

ES6新增: symbol  bigInt

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_10,第10张

 

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_11,第11张

any: TS提供的任意类型, 相当于JS的弱类型,可以存放任何类型

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_12,第12张

联合类型: 自定义的混合类型

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_13,第13张

 4、数组类型

names中存储人的名字

TS中可以规定 数组中元素的类型

Array<类型>

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_14,第14张

语法糖写法:string[ ]

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_javascript_15,第15张

数组名称:[元素类型1,元素类型2,元素类型3,...]

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_16,第16张

 5、对象类型

需求: 声明 员工对象, 比如有 姓名 年龄 手机号 3个属性

interface: 接口,接口是一套标准, 只要按照标准制作出来的才能使用

命名: 习惯大驼峰, 但不强制

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_17,第17张

在JS中,无法限制/规定 一个对象有哪些属性 和 属性的类型

变量 e1 满足 Emp 标准

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_javascript_18,第18张

 6、class

来自java的面向对象语法

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_javascript_19,第19张

  JS的设定:
对象.属性名 = 值
有两种效果
1. 属性名存在, 则为更新值
2. 属性名不存在, 则为添加新的属性
风险-此设定会导致: 属性名拼写错误时, 错误的新增了属性!

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_javascript_20,第20张

 所以TS剔除了这一风险,在TS语言中,不能新增属性 只能修改已有属性,但就必须提前声明属性才能使用。以下是完整写法,按序号阅读:

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_21,第21张

7.权限词

只有Java才有权限词,JS没有权限词,有三个权限词:public: 公开的;protected: 保护的;private: 私有的。

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_22,第22张

 

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_23,第23张

二、Vue监听原理

1.vue2

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_24,第24张

面试考题: 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 代理特征实现监听
例如: 在班级门口放一个班主任, 负责记录每个学员的 考勤 比 挨个监听更加高效

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_25,第25张

面试官问: vue3 和 vue2的差别?
答: vue3采用ES6提供的新特性 Proxy 来监听数据变化

三、关于插件

vue2的插件

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_26,第26张

 vue3的插件

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_27,第27张

 四、Ref

自动生成结构:vbase-3-ts 简称v3ts

vue3 和 vue2的 html部分 没有太大差异,唯一差别: 不再要求唯一的根元素, 可以有多个根;style在vue3中无任何变化,所有的变化都集中在脚本script部分

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_28,第28张

变化一

制作一个num变量, 在页面上显示,存储变量的写法不同

vue2: data(){ return {num:1} }
vue3: setup(){ return {num:1} }

变化二

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_29,第29张

我们给按钮设置点击属性,变化num的值,发现并不好用,这是因为在vue2中,为了让数据项变化时 能够更新DOM, 所以为每个数据项都添加了 监听器 -- defineProperty.  但是并非所有数据都需要监听. 为那些没有更新需求的数据 也统一添加监听器 浪费了资源,所以在Vue3中,做了改动: 程序员需要手动为需要监听器的属性添加监听器;

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_30,第30张

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_31,第31张

vue2: 把所有的方法都存储在 vue对象里, 用 this 来调用. 负载高
vue3: 使用时临时引入, 达到最小负载, 极致性能

通过把a放在ref函数里

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_javascript_32,第32张

 这样,a被放在一个value的属性中,伴随很多方法

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_33,第33张

 ref(): 此函数把a进行了封装, 返回一个 具有监听器功能的对象

将ref_a做一个返回,点击事件就能正常使用了

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_34,第34张

 再试着返回更多数据,用的时候只有放在ref函数里的变量能够变化

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_35,第35张

 

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_36,第36张

 重大变化: vue3中 需要手动为 有变更需求的数据添加监听器,避免了 vue2中, 监听器的滥用. 提高系统性能, 减少资源浪费。

五、Reactive

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_37,第37张

 使用ref函数手动添加提高了性能, 但是程序员太累了还有一次性的添加:

reactive: 可以把对象中的属性统一进行监听
采用的是 ES6 新增的 proxy 特性

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_38,第38张

 在使用时写法如下,这里的data是代理对象

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_39,第39张

六、toRefs

问题点:
1. ref(): 适合把单个元素修改为 响应式的元素
缺点: 需要为每个值添加
2. reactive(): 可以用委托方式 监听整个对象的元素
 缺点: 使用时需要写 data.xx 要加前缀
3. toRefs: 把 方式2 的元素 转换成 方式1的元素

toRefs: 可以把代理中的 转换成1个1个的

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_40,第40张

 

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_41,第41张

 就可以直接使用,不需要再每一个都套在ref函数中,也不需要使用data代理了。

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_42,第42张

七、methods

vue2: 方法要存储在 methods 配置项中
vue3: 兼容vue2的语法, 但是vue3推荐把方法写在这个return里

但是return里面不能写太复杂的代码,所以我们把方法函数放在对象methods中,

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_43,第43张

这里在方法中书写this.num报错,但是html页面可以使用,排除插件原因之后,分析原因:

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_44,第44张

为什么报错: 报错分两种--静态和动态的

动态的: 运行时,浏览器后台的报错 -- 准确无误的
静态的: 代码未运行前, 由编程工具 或 插件 分析代码后 认为这个代码有问题 -- 不准确的, 只能算辅助性质

典型的静态分析错误:
解决方案1: 忍着
解决方案2: 关闭报错功能(不合理)

vue2中 this.num++. this是当前的组件对象
vue3中: this是 区别非常大的vue组件对象, 详见打印. proxy类型

八、computed

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_javascript_45,第45张

九、axios

安装axios, vue3目前不支持全局的axios 只能单独引入

安装指令: npm i axios

安装好后还是需要先引入axios,写法与vue2局部引入axios相同,注意后面用到的所有的都要引入

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_46,第46张

然后把请求写在页面显示时触发的 mounted周期里,这里与vue2不同是mounted 写法不同,在vue3中,写v3,会有生命周期提示,找到monuted回车即可,

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_javascript_47,第47张

 

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_48,第48张

请求写法也和vue2局部axios相同,但是数据保存到本地时,不再是this.data而是data.value,这是vue3中本地数据的位置

准备本地数据, 用来存储请求到的数据

 any: 任意类型.

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_49,第49张

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

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_50,第50张

 加点样式

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_51,第51张

 展示

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_数据_52,第52张

十、装备练习

尝试使用组件,porps传参

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

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

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue和typesript区别_53,第53张

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_54,第54张

 在主页循环并传递参数

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_55,第55张

 样式写在组件页,

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_56,第56张

请求代码写在主页,

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_57,第57张

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

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_vue.js_58,第58张

 展示

vue和typesript区别 vue typescript javascript,vue和typesript区别 vue typescript javascript_前端_59,第59张


https://www.xamrdz.com/lan/54k1937139.html

相关文章: