Vue 3.0 特性体验

创建vue实例

Vue 3.0 创建vue实例不需要使用new的方式了,来看src/main.js文件:

1
2
3
4
5
6
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

现在是函数式风格来创建vue实例,还记得 Vue 2.0 是怎么创建实例的吗,对比下:

1
2
3
4
5
6
7
8
9
10
11
12
// Vue2 创建实例
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
el: '#app',
router,
store,
render: h => h(App)
})

路由

看看路由配置文件: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
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router

这是升级后路由配置方法,可以看到与 vue2 版本有很大的区别。现在创建路由实例需要手动引入createRouter方法,创建history模式路由也需要手动引入createWebHistory方法,这达到Tree-Shaking的目的,即不会把所有的api都打包进来,只会打包用到的api,vue3 将都会使用这种形式。

响应式数据、methods、watch 和 computed

这里应该是改动最大的部分,也是争议最大的部分,来看看怎么回事。

在 Vue 2.0 版本中,我们声明响应式数据是这样的:

1
2
3
4
5
6
7
8
9
10
11
// Vue2
export default {
// ....
data() {
return {
state: {
count: 0
}
};
},
}

在 Vue 3.0 中,需要这样:

1
2
3
4
5
6
7
8
9
10
11
12
// Vue3
import { ref } from 'vue'
export default {
setup () {
const count = ref(0) // 声明 count,初始值为 0
const str = ref('hello') // 声明 str,初始值为 'hello'
return {
count,
str
}
}
}

我们要先引入ref方法,然后使用它来声明响应式变量。重要的是,这些操作需要在setup函数中进行,而且添加methodswatchcomputed都需要在setup中进行。这就跟在vue2中有很大的不同,vue2中我们是使用选项的方式来创建datamethodswatchcomputed的。

接下来演示一个计数器的功能,结合methodswatchcomputed

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
<template>
<div class="home">
<p>count: {{count}}</p>
<p>doubleCount: {{doubleCount}}</p>
<button @click="add">增加</button>
</div>
</template>

<script>
import { ref, watch, computed } from 'vue'
export default {
setup () {
// 声明 count 变量,初始值为 0
const count = ref(0)

// 定义 add 方法
const add = () => {
count.value++
}

// 定义 watch,需要手动引入 watch 方法
watch(
() => count.value,
(val, oldVal) => { console.log(`new count: ${val},old count: ${oldVal}`) }
)

// 定义computed,同样需要手动引入 computed 方法
const doubleCount = computed(() => count.value * 2)

return {
count,
add,
doubleCount
}
}
}
</script>

来看这个例子,首先定义方法是可以直接定义在setup函数中的,然后return出去即可,不知是否注意到在方法里访问count时,是使用.value方法访问的,这里要强调一下,在setup中访问已声明的响应式变量时,需要使用.value方式访问,包括在watchcomputed中。

接下来是定义watch,需要手动引入watch方法,这也是达到了Tree-Shaking的目的,使用到什么就引入什么,最后打包也只打包用到的api,后面的computed也同理。

watch方法有两个参数,都是函数,第一个函数返回要监听的值,第二个函数是回调函数,它两个参数分别表示新值和旧值。

computed方法返回计算过的值,最后需要return出去。用法如上,还是比较好理解的。

使用 reactive

也可以这样声明响应式数据(使用reactive

前面说到声明响应式数据,需要使用ref,其实也可以使用reactive来一次声明多个变量,下面例子:

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
<template>
<div class="home">
<p>str: {{state.str}}</p>
<p>count: {{state.count}}</p>
<button @click="add">增加</button>
</div>
</template>

<script>
import { reactive } from 'vue'
export default {
setup () {
// 引入 reactive,同时定义多个变量
const state = reactive({
count: 0,
str: 'hello'
})

// 现在访问变量,不能使用 .value 方式访问
const add = () => {
// state.count.value++ // 错误
state.count++
}

return {
state,
add
}
}
}
</script>

reactive 和 ref

上面说到refreactive,这里再简单说说。reactive是接收一个普通对象,返回该对象的响应式代理,它等同于 2.x 中的Vue.observable()

1
2
3
4
const obj = reactive({ count: 0 })

// obj 此时是一个响应式的对象
// 访问或修改,直接基于 obj.count

ref也是接收一个参数并返回一个响应式且可改变的ref对象,一般参数是基础类型,比如数值或字符串等。如果传入的参数是一个对象,将会调用reactive方法进行深层响应转换。ref对象拥有一个指向内部值的单一属性.value,即当你要访问它的值时,需要.value拿到它的值。但是如果是在setup中返回且用到模板中时,在`{{}}`里不需要加.value访问,在返回时已经自动解套。

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<div>{{ count }}</div>
</template>

<script>
export default {
setup() {
return {
count: ref(0), // 这里返回,在模板中无需 .value 访问值
}
},
}
</script>

获取路由信息

Vue 3.0 中使用getCurrentInstance方法获取当前组件实例,然后通过ctx属性获取当前上下文,ctx.$router是路由实例,而ctx.$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

查看文件src/store/index.js

1
2
3
4
5
6
7
8
9
10
11
12
import Vuex from 'vuex'

export default Vuex.createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})

发现创建store实例的方式改变了,Vue 2.0 中是使用new的方式:

1
2
3
4
// Vue2 中创建 store 实例
export default new Vuex.Store({
// ...
})

一个小例子演示 Vue 3.0 中使用store

(1)创建store

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

export default Vuex.createStore({
state: {
count: 0
},
mutations: {
ADD (state) {
state.count++
}
},
actions: {
add ({ commit }) {
commit('ADD')
}
},
modules: {
}
})

(2)组件中使用store

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
<template>
<div class="home">
<p>{{count}}</p>
<button @click="add">增加</button>
</div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
const count = computed(() => store.state.count)

const add = () => {
store.dispatch('add')
}

return {
count,
add
}
}
}
</script>

可以看到vuexapi基本没变化,只是在组件中使用时需要引入useStore方法返回store实例,其实也可以在当前组件上下文中获取store,如下:

1
2
3
4
import {getCurrentInstance} from 'vue'

// ...
const store = getCurrentInstance().ctx.$store

大概就记录到这吧,基本涵盖到了日常使用的方面。等待 Vue 3.0 的正式版吧,上面所讲只是基于目前 Vue 3.0 beta 版本,不保证后续api不改动,等正式版官方文档吧