Vue——vue3+ts

![组合式API](https://img-blog.csdnimg.cn/65bc865af9284374ad6ee6ad90e9e2de.png)

## 1.vues新增了setup  API：
setup 选项在组件被创建之前执行，一旦 props 被解析完成，它就将被作为组合式 API 的入口。
注：在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。
setup 选项是一个接收 props 和 context 的函数，我们将在之后进行讨论。此外，我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

## 2.带 ref 的响应式变量
在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下所示：
import { ref } from 'vue'
const counter = ref(0)
ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值：

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1
将值封装在一个对象中，看似没有必要，但为了保持 JavaScript 中不同数据类型的行为统一，这是必须的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值而非引用传递的：
换句话说，ref 为我们的值创建了一个响应式引用。在整个组合式 API 中会经常使用引用的概念。

## 3.在vue3里面，模板<template></template>里可以不再需要一个最外层的根节点了，可以直接写<h1></h1>....
## 4.vue3，引入组件直接import {组件} from '...'通过<script>标签里引入setup，不需要注册组件，可以直接使用
## 5.组合式API?
（就类似于写的应该功能的逻辑代码，把数据封装到组件里面结合ts，vue文件只负责写页面，有点类似于react中的自定义hooks这样写的优点更便于维护，把没一块的代码逻辑可以写到一起）
![vue3+ts](https://img-blog.csdnimg.cn/654589e7b13044b884bcea73ef41fbc5.png#pic_center)


终端：npm init vite@latest
选择：vue
选择：vue-ts


## 路由
import {createRouter,createWebHashHistory} from 'vue-router'
//其中createRouter用来新建路由实例，createWebHashHistory用来配置我们内部使用hash模式的路由，也就是url上会通过#来区分
代码中的<router-link></router-link>、<router-view></router-view>就是vue-router注册的全局组件，
router-link负责跳转不同的页面，相当于vue中的超链接<a></a>标签，router-view负责渲染路由配置的组件