# Vue3

vue3.0.0-alpha.0至今天已经发布近两年了,从当时各大开发人员请求支持TypeScript,到现在script已经全面支持Ts语法。再从去年的setup语法糖试用到现在setup语法已经提正式版本,vue越来越深得开发人员的亲赖

这边文章将讲述vue3的基本使用以及ts语法

```js
// 版本
"vue": "^3.0.5",
"vue-router": "^4.0.10",
"vite": "^2.4.3",
"vuex": "^4.0.2"
```

## 基本语法

### 1.响应式变量ref

```html

```

```js
// script
setup() {
import { ref } from 'vue'
// js语法
const active = ref(0)
// ts语法
const active = ref(0)

// 修改active的值
active.value = 1
// 暴露active在tamplate才能使用
return { active }
}
```

## 2.响应式变量reactive

```html

{{ user.name }}
{{ user.age }}

```

```js
// script
import { reactive } from 'vue'

// reactive和ref一样,作用为定义变量,不过区别为reactive是一个对象且这个对象的属性并不是响应式的
// 当变量多的时候,我们定义ref就相当麻烦,这时我们需要使用reactive
// 注意:reactive的属性并不是响应式的,即name和age并不是响应式的
// js用法
setup() {
const user = reactive({
name: 'Alice',
age: 12,
})
// ts用法
interface User{
name:string;
age:number;
}
const user = reactive({
name: 'Alice',
age: 12,
})
// 修改值
user.name = 'Marry'
user.age = 16

return { user }
}
```

由于上面`name`和`age`并不是响应式的,我们要把它改为`ref对象`,才是响应式,官方提供了方法`toRefs()`

```js
// script
setup() {
import { toRefs } from 'vue'

const userRefs = toRefs(user)
// 这时user.name和user.age才是响应式
// 修改值时应写为
userRefs.name.value = 'Marry'
userRefs.age.value = 16

return { userRefs }
}
```

#### 优化reactive

但是我们一般在代码都不会这样写。简略写法如下

```js
// script
setup() {
import { toRefs } from 'vue'

// 提示...为ES6解构语法
return { ...toRefs(user) }
}
```

这时`template`中可直接使用,也不用加前缀user

```html

{{ name }}
{{ age }}

```

## 3.获取dom元素

```html

```

```js
// script
setup() {
// js语法
const myChartEle = ref(null)
// ts语法
const myChartEle = ref(null)

onMounted(() => {
console.log(myChartEle.value)
// 输出为

})

return { myChartEle }
}
```

### 4.事件

```html

{{ count }}

```

```js
// script
setup() {
// js语法
const conut = ref(0)
// ts语法
const count = ref(0)
const handleCountClick =() => {
count++
}
return { count, handleCountClick }
}
```

## vue-router

### 基础配置

```js
// src/router/index

// createRouter创建一个路由,传入一个对象,对象里面两个属性({history: 路由模式, routes[路由配置项]})
// createWebHashHistory 这里选择hash路由
// RouteRecordRaw ts语法支持
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

// js语法
const constantRoutes = [
{
path: '/',
component: () => import('../layout/index.vue'),
children: [
{ path: '/', component: () => import('../views/home/home.vue') },
{ path: '/login', component: () => import('../views/login/login.vue') }
]
}
]
// ts语法
const constantRoutes: Array = [
// ...
]

const router = createRouter({
history: createWebHashHistory(),
routes: constantRoutes
})

export default router
```

```js
// src/main.ts
import router from './router/index'
const app = createApp(App)
app.use(router).mount('#app')
```

### 基本使用

这里我们简单实现一个获取当前路径在路由中属于第几个(导航栏active中经常用到)

```js
import { useRouter } from 'vue-router'

setup: () => {
const router = useRouter()
const active = router.getRoutes().map((item, index) => {
if(item.path === router.currentRoute.value.path){
return index
}
})
}
```

## vuex

### 基础配置

```js
// src/store/index
import { createStore } from 'vuex'
// js写法
const store = createStore({
state(){
return {
userIsLogin: flase
}
},
mutations: {
CHANGE_USER_LIGIN(state, payload){
state.userIsLogin = payload
}
},
actions: {
sendChangeUserLogin({ commit }, payload){
commit('CHANGE_USER_LIGIN', payload)
}
}
})
// ts写法
interface State {
userIsLogin: boolean
}
const store = createStore({
state(){
return {
userIsLogin: flase
}
}
// ...写法同上
})

export default store
```

```js
// src/main.ts
import store from './store/index'
const app = createApp(App)
app.use(store).mount('#app')
```

### 基本使用

```js
import { useStore } from 'vuex'

setup(){
const store = useStore()
store.dispatch('sendChangeUserLogin', true)
console.log(store.state.userIsLogin)
}
```

## setup语法糖

正常我们写一个script是这样的

```html

```

如果我们使用setup是这样的

```html

```

当我们就使用了一个函数,我们代码量减少了5行,当代码多起来了,优化可想而知

最后修改:2021 年 08 月 03 日
如果觉得我的文章对你有用,请随意赞赏