Vue 3.0 初体验(项目搭建)

前言

6大亮点

  • Performance:性能更比Vue 2.0强。
  • Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。
  • Composition API:组合API
  • Fragment, Teleport, Suspense:“碎片”,Teleport即Protal传送门,“悬念”
  • Better TypeScript support:更优秀的Ts支持
  • Custom Renderer API:暴露了自定义渲染API

搭建内容

  • 基于vue-cli快速搭建 Vue 3.0 项目
  • Vue 3.0 基本特性体验
  • 集成vue-router和 vuex 4.0

Vue 3.0 项目初始化

安装 vue-cli

1
npm install -g @vue/cli

安装成功后,即可使用vue命令:

1
2
$ vue -V
@vue/cli 4.5.6

初始化 vue 项目

最新版vue-cli已支持直接创建vue3项目

1
vue create vue3-demo

输入命令后,会出现命令行交互窗口,这里我们选择Manually select features

1
2
3
4
5
Vue CLI v4.5.6
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

随后我们勾选:RouterVuex、CSS Pre-processorsLinter / Formatter等常用组件(使用空格键选中),这些都是开发商业级项目必须的:

1
2
3
4
5
6
7
8
9
10
11
12
13
Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
>(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

接下来在选择 Vue 版本时注意选择3.x

1
2
3
4
5
6
Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
2.x
> 3.x (Preview)

Vue 2.0 升级 Vue 3.0 项目

如果当前创建的项目为 Vue 2.0 项目,那么创建 Vue 3.0 项目需要通过插件升级的方式来实现,进入项目目录:

1
2
cd vue3-demo
vue add vue-next

执行上述指令后,会自动安装vue-cli-plugin-vue-next插件(查看项目代码),该插件会完成以下操作:

  • 安装 Vue 3.0 依赖
  • 更新 Vue 3.0 webpack loader 配置,使其能够支持.vue文件构建(这点非常重要)
  • 创建 Vue 3.0 的模板代码
  • 自动将代码中的Vue RouterVuex升级到 4.0 版本,如果未安装则不会升级
  • 自动生成Vue RouterVuex模板代码

完成上述操作后,项目正式升级到 Vue 3.0

注意该插件还不能支持typescript,使用typescript的同学还得再等等(就是目前还不太支持TS)

Vue 3.0 基本特性体验

创建路由

项目开发中,我们通常需要创建新页面,然后添加路由配置,

我们在/src/views目录下创建Test.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div class="test">

     <h1>vue3.0 初体验</h1>
     <p>少年你的头发可还好,???? 哈哈哈哈哈</p>

</div>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>
.test {
color: red;
}
</style>

之后在/src/router/index.js中创建路由配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
{
path: '/',
name: 'Home',
component: Home //Vue 2.0 写法
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/test',
name: 'Test',
component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')
}
]

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

export default router

初始化Vue Router的过程与 2.0 版本变化不大,只是之前采用构造函数的方式,
这里改为使用createRouter来创建Vue Router实例,配置的方法基本一致,配置完成后我们还需要在App.vue中增加链接到Test.vue的路由:

1
2
3
4
5
6
7
8
9
10
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">Test</router-link>
</div>
<router-view/>
</div>
</template>

启动项目:

1
npm run serve

状态和事件绑定

Vue 3.0 中定义状态的方法改为类似React Hooks的方法,下面我们在Test.vue中定义一个状态count

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<div class="test">
<h1>test count: {{count}}</h1>
</div>
</template>

<script>
import { ref } from 'vue'

export default {
setup () {
const count = ref(0)
return {
count
}
}
}
</script>

Vue 3.0 中初始化状态通过setup方法,

定义状态需要调用ref方法。接下来我们定义一个事件,用来更新count状态:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<button @click="add">add</button>
</div>
</template>

<script>
import { ref } from 'vue'

export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
return {
count,
add
}
}
}
</script>

这里的add方法不再需要定义在methods中,但注意更新count值的时候不能直接使用count++,而应使用count.value++

更新代码后,点击按钮,count的值就会更新了

计算属性和监听器

Vue 3.0 中计算属性和监听器的实现依赖computedwatch方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<button @click="add">add</button>
</div>
</template>

<script>
import { ref, computed, watch } from 'vue'

export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
return {
count,
doubleCount,
add
}
}
}
</script>

计算属性computed是一个方法,里面需要包含一个回调函数,当我们访问计算属性返回结果时,会自动获取回调函数的值:

1
const doubleCount = computed(() => count.value * 2)

监听器watch同样是一个方法,它包含 2 个参数,2 个参数都是function

1
2
3
4
watch(() => count.value, 
val => {
console.log(`count is ${val}`)
})

第一个参数是监听的值,count.value表示当count.value发生变化就会触发监听器的回调函数,即第二个参数,第二个参数可以执行监听时候的回调

如果是2个以上的监听属性,就是这样:

1
2
3
4
5
6
7
watch(
[refA, () => refB.value],
([a, b], [prevA, prevB]) => {
console.log(`a is: ${a}`)
console.log(`b is: ${b}`)
}
)

获取路由

Vue 3.0 中通过getCurrentInstance方法获取当前组件的实例,然后通过ctx属性获得当前上下文

ctx.$routerVue Router实例,里面包含了currentRoute可以获取到当前的路由信息

1
2
3
4
5
6
7
8
9
10
<script>
import { getCurrentInstance } from 'vue'

export default {
setup () {
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
}
}
</script>

Vuex 集成

Vuex 的集成方法如下:

定义 Vuex 状态

第一步,修改src/store/index.js文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vuex from 'vuex'

export default Vuex.createStore({
state: {
test: {
a: 1
}
},
mutations: {
setTestA(state, value) {
state.test.a = value
}
},
actions: {
},
modules: {
}
})

引用 Vuex 状态

第二步,在Test.vue中,通过计算属性使用Vuex状态:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<div>state from vuex {{a}}</div>
<button @click="add">add</button>
</div>
</template>

<script>
import { ref, computed, watch, getCurrentInstance } from 'vue'

export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
const a = computed(() => ctx.$store.state.test.a)
return {
count,
doubleCount,
add,
a
}
}
}
</script>

这里我们通过计算属性来引用Vuex中的状态:

1
const a = computed(() => ctx.$store.state.test.a)

ctx是上节中我们提到的当前组件实例

更新 Vuex 状态

更新Vuex状态仍然使用commit方法,这点和 Vuex 2.0 版本一致:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<div>state from vuex {{a}}</div>
<button @click="add">add</button>
<button @click="update">update a</button>
</div>
</template>

<script>
import { ref, computed, watch, getCurrentInstance } from 'vue'

export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
const a = computed(() => ctx.$store.state.test.a)
const update = () => {
ctx.$store.commit('setTestA', count)
}
return {
count,
doubleCount,
add,
a,
update
}
}
}
</script>

这里我们点击update a按钮后,会触发update方法,此时会通过ctx.$store.commit调用setTestA方法,将count的值覆盖state.test.a的值

总的效果呢是这样的:

Vue 3.0初体验

总结

  • Vue 3.0都写在setup里,以前的所有数据状态都写在data
  • 所有方法都写在methods里,而现在可以根据功能模块把状态和方法等划分在一起,更利于模块化