vue3+TypeScript前端开发

在vue3中

1、编码语言：JavaScript、typescript

2、代码风格：组合式API、选项式API

3、简写形式：setup语法糖

本课程采用的方式：

TypeScript + 组合式API +setup语法糖

vite是新一代前端构建工具 官网地址：https：//vitejs.cn

vite项目中，index.html 是项目的入口文件，在项目的最外层。

加载index.html后，vite解析 <script type="module" src="xxx">指向JavaScript。

vue3中通过createApp 函数创建一个应用实例

vue3核心语法

1、OptionsAPI与CompositionAPI

Options 类型的API，数据、类型、方法、计算属性等，是分散在：data、computed中的，若想新增或者改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

2、setup的语法糖

data，methods，setup他们可以同时存在

setup里面的数据 data是能读到的，但setup不能读取data里面的

红色框和绿色框是一样的

不用再写setup函数，不用再return

3、ref创建：基本类型的响应式数据

4、reactive创建：对象类型的响应式数据数据

5、ref也可以定义对象类型的响应式数据

6、ref对比reactive 

reactive的对象不能直接修改，

ref的对象就可以直接修改 car.value = {brand:'aotuo',price:1}

7、toRefs与toRef

作用是将一个响应式对象中的每一个属性，转换为ref 对象。

两者功能一致，但toRefs可以批量转换

toRefs 可以将一个一个对象中每个属性解构成响应式对象

8、计算属性 computed

9、watch监视

监视数据的变化

vue3中的watch 只能监视以下四种数据：ref 定义的数据，reactive 定义的数据，函数返回一个值（getter函数），一个包含上述内容的数组。

情况一

监视 ref  定义的【基本类型】数据：直接写数据名即可，监视的是其value值的变化

情况二

监视 ref 定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：若修改的是 ref 定义的对象中的属性，newvalue 和 oldvalue 都是新值，因为他们都是同一个对象。

若修改整个 ref  定义的对象，newvalue 是新值，oldvalue 是旧值，因为不是同一个对象了。

情况三

监视 reactive 定义的 【对象类型】数据，且默认开启了深度监视。

情况四

监视 ref 或 reative 定义的【对象类型】数据中某个属性，

注意：若该属性值 不是【对象类型】，需要写成函数形式。                                    

若该属性值依然是【对象类型】，可直接编，也可写成函数，不过建议写成函数。

 ·若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视

情况五

监视上述的多个数据

10、watchEffect 

官网解释为：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

11、标签的ref 属性

用于注册模版引用

用在普通 Dom 标签上，获取的是 Dom 节点

用在组件标签上，获取的是组件标签实例对象

回顾TS中的接口、泛型、自定义类型

props 的使用

组件的生命周期：时刻、创建、挂载、更新、销毁

生命周期、生命周期函数、生命周期钩子

vue2的生命周期

创建（创建前  beforeCreate，创建完毕 created）

挂载 （挂载前 beforeMount ，挂载完毕 mounted）

更新（更新前 beforeUpdate，更新完毕 updated）

销毁 （销毁前 beforeDestroy， 销毁完毕 destroyed ）

vue3生命周期

常用钩子：onMounted挂载完毕，onUpdated更新完毕，onBeforeUnmount卸载之前

自定义Hooks

就是以JS或TS结尾的文件，以use开头

export default 后面跟值、也可以跟函数function（）{}

路由

1、对路由的理解

1、路由就是一组 key-value 的对应关系。

2、多个路由（route），需要经过路由器（router）的管理

SPA应用

在导航区点击，展示区就会展示相应的页面，，可用路由

app.vue

index.ts

main.ts

3、两个注意点

1、路由组件（靠路由的规则渲染出来的）通常存放在 pages 或 views 文件夹 ，一般组件（亲手写标签出来的）通常存放在 components 文件夹。

2、通过点击导航，视觉效果上“消失”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

4、to的两种写法

5、路由器工作模式

1、history 模式

2、hash 模式

6、命名路由

可以简化路由跳转及传参

7、嵌套路由

index.ts

News.vue

路由有querry参数和params参数

query参数

Detail.vue

接收参数

传递参数的两种方法

params 参数

index.ts 路由规则

两种传递参数的方法

<RouterLink :to="/news/details/${news.id}/${news.title}/$news.content}">{{news.tiitle}}</RouterLink>

接收参数

备注：传递 params 参数时，若使用  to 的对象写法，必须使用name配置项，不能用path

传递params参数时，需要提前在规则中占位

9、路由的props 配置

让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

index.ts

Detail.vue 

defineProps([''id,'tilte','content']）

10、replace 属性

作用：控制路由跳转时操作浏览器历史记录的模式。

浏览器的历史记录有两种写入方式：push是追加历史记录（默认值）。replace 是替换当前记录

开启 replace 模式：

<RouterLink replace ....>news</RouterLink>

11、编程式导航 （脱离<RouterLink>实现路由跳转）

路由组件的两个重要的属性： $route  和 $router 变成了两个hooks

重定向

让指定的路径重新定义到另一个路径