# 花 10 分钟快速上手 Vue3 中新增的 API

# 1. 初始化项目

// ① npm i -g @vue/cli
// ② vue create my-project
// ③ npm install @vue/composition-api -S

// ④ main,js
import Vue from "vue";
import VueCompositionApi from "@vue/composition-api";
Vue.use(VueCompositionApi);

1
2
3
4
5
6
7
8

# 2. setup 方法

setup 是 vue3.x 中新的操作组件属性的方法，它是组件内部暴露出所有的属性和方法的统一 API。

# 2.1 执行时机

setup 的执行时机在：beforeCreate 之后 created 之前

setup(props, ctx) {
    console.log('setup')
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },

1
2
3
4
5
6
7
8
9

# 2.2 接受 props 数据

<!-- 组件传值 -->
<com-setup p1="传值给 com-setup"/>

// 通过 setup 函数的第一个形参，接收 props 数据：
setup(props) {
  console.log(props)
},
// 在 props 中定义当前组件允许外界传递过来的参数名称：
props: {
    p1: String
}
/*
{}
p1: "传值给 com-setup"
get p1: ƒ reactiveGetter()
set p1: ƒ reactiveSetter(newVal)
__proto__: Object
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 2.3 context

setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下：

setup(props, ctx) {
    console.log(ctx)
    console.log(this) // undefined
  },
/*
attrs: Object
emit: ƒ ()
listeners: Object
parent: VueComponent
refs: Object
root: Vue
...
*/

1
2
3
4
5
6
7
8
9
10
11
12
13

TIP

注意：在 setup() 函数中无法访问到 this