vue3的一些新东西

Posted by wh on 2020-11-28

片段

在Vue2.x中,由于Vue实例需要绑定到单个的DOM上面,而为了生成一个Vue实例,就需要一个唯一的根入口。因此,所有的组件都必须包含在一个根组件中,即必须由<div>将组件包装起来。

1
2
3
4
5
6
7
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>

而在Vue3.x中,组件可以支持多个根元素。但是,需要明确定义属性分布在哪里。在单个根元素时,非 prop attribute 将自动添加到根节点的 attribute 中。如果没有显式绑定$attrs,将发出警告。在例子中,$attrs被传递到<main>上。

1
2
3
4
5
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>

更多关于非 prop attribute的信息可以查看:非 Prop 的 Attribute

组合式 API 基础

通过下面这个例子,来大致了解组合式API。

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
<template>
<button @click="increase">
The num is {{count}}, double is {{double}}, click to increase!
</button>
</template>

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

export default {
setup() {
const count = ref(0);
const double = computed(() => count.value * 2);

function increase() {
count.value++;
}

onMounted(() => console.log('mounted!'));

return{
count,
double,
increase
} // 这里返回的内容都可以用于组件的其他部分和模板
}

// 组件的其他部分
}
</script>

因为组件API将组件属性公开为函数,所以第一步需要将所需的函数导入。

import {ref, computed, onMounted} from 'vue'

在该例子中,通过ref设置响应式变量(即对值创建了一个响应式的引用,使之行为保持统一),通过computed来建立计算属性(返回值是一个ref的实例),通过onXXX来注册生命周期钩子(即mounted -> onMounted)。

setup()函数

setup()函数接受两个参数:

  1. props;
  2. context;

其中,props是响应式的,即传入新的prop时,该参数将会更新。但是,由于props是响应式的,不能使用ES6的解构,否则会消除prop的响应式。

当然,如果需要解构,可以通过toRefs来保持响应式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { toRefs } from 'vue'

export default {

props: {
name: 'xxx',
age: 'xxx',
class: 'xxx',
},

setup(props) {
const { name, age, class } = toRefs(props);

console.log(name.value);
}
}

更多关于Refs的内容可以查看:Refs

setup中返回的refs在模板中使用的时候,将自动展开为其内部值,因此不用在模板中使用.value

1
2
3
4
5
<template>
<button @click="increase">
The num is {{count}}, double is {{double}}, click to increase!
</button>
</template>

由于是在解析其它组件选项之前被调用的,setup中的thisundefined。而在参数context中,暴露了一些以前在this上暴露的 property 的选择列表:

  • attrs
  • slots
  • emit

注意:执行setup()函数的时候,组件实例还没有被创建,因此无法访问

  • data
  • computed
  • methods

更多关于组合式API的内容可以查看:组合式API