片段

在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中的this是undefined。而在参数context中，暴露了一些以前在this上暴露的 property 的选择列表：

• attrs
• slots
• emit

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

• data
• computed
• methods

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

• ← Previous Post
• Next Post →