vue3.0 + Ts 入门

文章发布时间:

2022-12-29

最后更新时间:

2023-03-24

1.vue3.0与vue2.0区别

vue2中执行顺序 beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destroyed
vue3中执行顺序 setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=>onUnmounted

生命周期对应关系,后者为vue3.0

beforeCreate->setup
created -> setup
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

vue2和vue3双向数据绑定原理发生了改变

vue3.0响应式数据创建

通过引入ref和reactive

ref针对单个响应式数据,reative针对的是对象

TS和JS的一些区别

typescript 特点

ts是js的超集，即你可以在ts中使用原生js语法。
ts需要静态编译，它提供了强类型与更多面向对象的内容。
ts最终仍要编译为弱类型的js文件，基于对象的原生的js，再运行。故ts相较java/C#这样天生面向对象语言是有区别和局限的
ts是由微软牵头主导的，主要来自C#
TypeScript和JavaScript的对比：
TypeScript是一个应用程序级的JavaScript开发语言。（这也表示TypeScript比较牛逼，可以开发大型应用，或者说更适合开发大型应用）
TypeScript是JavaScript的超集，可以编译成纯JavaScript。这个和我们CSS离的Less或者Sass是很像的，
我们用更好的代码编写方式来进行编写，最后还是有好生成原生的JavaScript语言。
TypeScript跨浏览器、跨操作系统、跨主机、且开源。由于最后他编译成了JavaScript所以只要能运行JS的地方，都可以运行我们写的程序，设置在node.js里。
TypeScript始于JavaScript，终于JavaScript。遵循JavaScript的语法和语义
TypeScript可以重用JavaScript代码，调用流行的JavaScript库。

TypeScript 安装

创建一个变量,定义str类型,其他类型同理

声明一个变量为数组

Any 类型

TypeScript 接口

TypeScript 对象

vue3+typescript创建项目详细步骤

1、新建一个文件夹；

2、vue/cli全局安装：cnpm install -g @vue/cli 或者 npm install -g @vue/cli；
3、创建项目名称：vue create 项目名称；
4、配置文件（根据个人喜好选择）：
如图：
1）、第一个选项是预设配置项，第一个只包含babel，eslint，要选第二个，可以自由配置。

选择第二项，出现如图配置（空格搭配上下键选择）：

babel是用来适配一些js的新特性，浏览器还不支持的，但是可以通过其它方式实现它的语法
typescript就是启用typescript支持
PWA这个是渐进式web应用，如果用不上，不需要选
Router是vue-router
css pre-processors是用来支持css预处理器的，less，sass这些
linter是用来做代码检验的，如代码缩进，规范合不合格之类的，都是它来校验
2）、这2个是自动化测试框架，可以不选；测试代码有没有bug，符不符合预期用的