Vue3 新增特性
Vue 3 中需要关注的一些新功能包括：
- framents
- Teleport
- composition Api
framents
vue3 组件支持有多个根节点
1
2
3
4
5
6
| <!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
|
Teleport
Teleport是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
1
2
3
4
5
6
7
8
| <button @click="open = true">Open Modal</button>
<Teleport to="body">
<div v-if="open" class="modal">
<p>Hello from the modal!</p>
<but @click="open = false">Close</but ton>
</div>
</Teleport>
|
<Teleport> 接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。这段代码的作用就是告诉 Vue“把以下模板片段传送到 body 标签下”。
composition Api
composition Api，也就是组合式api，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理
简单使用：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| export default {
setup() {
const count = ref(0)
const double = computed(() => count.value *2)
function increment() {
count.value++
}
onMounted(() => console.log('component mounted))
retrun {
count,
double,
increment
}
}
}
|