Vue3 – Setup 组合式API

简介

Vue 3 新发布后，Vue3 的新特性比较多，其中Vue3 推出了一种新的函数勾子，Setup().

Setup() 方法

setup 方法在Vue3中是一个非常重要的角色，定义在 Vue 的根配置项内，它可以代替Vue2 中的 data,methods,computed,等等的数据定义方式，其定义方式如下：

export default {
  name: 'App',
  setup(){
  }
}

定义数据

因为是在方法体内进行定义数据，因此要注意，与Vue2 中的数据定义不一样，Vue2中的数据是定义在 data() 的返回对象中，应该使用对象的数据声明方式，但在setup中是定义在方法中的，因此使用直接声明变量的方式，如下

export default {
  name: 'App',
  setup() {
    /**
     * 可以定义数据，定义数据时直接使用变量声明就可以了
     */
    let name = "张三";
    let age = 18;

    /**
     * 定义完数据之后，记得要返回它们的数据
     */
    return {
      name, age
    }
  }
}

本例中未使用 ref 和 reactive 函数对数据进行响应式处理。

注意：Vue3 中是暂时支持Vue2 的数据定义方法的，但要注意的是，Vue2 可以通过 this.xxx 的方式访问 Vue3 在 Setup 方法中定义的数据，但在 Setup 方法中，是不能访问到 Vue2 中的 data 数据的。

当Vue3 和 Vue2 出现数据名冲突时，优先使用 Vue3 中的 setup 函数中定义的数据。

定义方法

export default {
  name: 'App',
  setup() {
    /**
     * 可以定义数据，定义数据时直接使用变量声明就可以了
     */
    let name = "张三";
    let age = 18;

    /**
     * 也可以定义方法，定义方法时直接使用方法声明，注意不要使用对象内方法声明的方式
     */
    function hello(){
      console.log("你好，我叫"+ name + ", 今年"+ age + "岁");
    }


    /**
     * 定义完之后，记得要返回它们的数据
     */
    return {
      // 返回自定义数据
      name, age,
      // 返回自定义方法
      hello
    }
  }
}

setup 的特点

setup() 方法执行时机

setup 方法 的执行时机比较早，是整个 Vue 实例化中最早的，它在 beforeCreate() 方法之前执行。

因为它的执行时机很早，因此在 setup() 方法内部不能使用 this.因为 this 还没有完全实例化完成，此时的 this 为 underfined.

setup() 方法的参数 props

Vue3 中的 setup 方法接收两个参数，分别是 props 和 context

props 中接收 来自父组传传来的参数，与 Vue2 中的 props:{} 中接收的参数一致，但使用了 Proxy 进行了对象包装。

由于 setup 方法的执行时机很早，此时的 setup 内部不具有 this 对象，与 Vue2 中取得 props 不同，Vue2 中取得 props 参数可以通过 this 来获取，但是 setup 不能通过 this 来获取，因此，setup中传递了 props 参数。

注意：在 setup 方法中接收 props 接数的同时，Vue3 要求在外部也要声明 props 对象定义参数，如下

export default {
  name: 'App',
  // 先对父组件传来的 props 参进行接收
  props:{
    msg:String,
    name:String
  },
  // 然后再在 setup 方法中接收 props 参数
  setup(props) { ... }

setup() 方法的参数 context

Vue3 中的 setup 方法接收两个参数，分别是 props 和 context

context 被认为是 Vue 中的上下文，也就是 Vue 中一些可能用到一对象数据，Vue 通过打包传进来提供使用了。

其中 context 包含了4个重要的数据，分别是

attrs: 与 Vue2 中的 $attrs 是一样的，$attrs 是用于兜底传来的props数据，如果使用了 props 来接收父组件传的的参数时，attrs 不会有任何数据，但如果 props 中没有接收的参数，会留在 attrs 中，在Vue3 中，如果没有完整的接收所有 props 参数时，Vue3 会报出警告。

slots: 与 Vue2 中的 $slot 是一样的，$slot 是记录插槽数据的对象，如果父组件中在调用子组件时，在子组件中包裹了数组，那么就会被插槽记录。子组件可以通过 <slot></slot> 进行占位。

在Vue3中，父组件中的具名 slot 可能会有兼容性问题，如下

<template>

  <!-- 使用 slot="xxx" 的方式可能在 Vue3 中识别不到插槽名 -->
  <Demo>
    <template slot="hello">
      <span>你好</span>
    </template>
  </Demo>>
  
</template>

以上代码中，使用了 slot="xxx" 的方式定义插槽的名称，在Vue3中，有可能不能识别出该插槽名，可以用以下方式来定义声明插槽名：

<template>

  <Demo>
    <template v-slot:hello>
      <span>你好</span>
    </template>
  </Demo>>

</template>

emit: 相当于 Vue2 中的 $emit 自定义事件，和 props 一样，emit 需要先在setup 外面进行定义接收，否则也会出现警告。

export default {
  name: 'App',
  // 先对父组件传来的 emit 自定义事件进行接收
  emits:["hello"],
  // 再在 setup 方法中使用 emit 方法调用自定义事件
  setup(props,context) {
    context.emit("hello",666);
}