（一）Vue3 简介

• 2020 年 9 月 18 日，Vue.js 发布 3.0 版本，代号：One Piece（海贼王）
• 耗时 2 年多、2600+次提交、30+个 RFC、600+次 PR、99 位贡献者
• GitHub 上的 tags 地址

（二）Vue3 带来了什么

（一）理解

• Vue3.0 中的一个新的配置项，值为一个函数
• setup 是所有 Composition API （组合 API）表演的舞台
• 组件中所用到的数据、方法等等，均要配置在 setup 中

（二）setup 函数的两种返回值

• 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用
• 若返回一个渲染函数【h()】，则可以自定义渲染内容

（三）注意点

（一）作用

• 定义一个响应式的数据

（二）语法

• 创建一个包含响应式数据的 引用实现的实例对象
• 简称 引用对象 / reference 对象 / ref 对象

const xxx = ref(initValue);

（一）作用

• 定义一个 对象类型 的响应式数据
• 基本类型不要用它，要用 ref 函数

（二）语法

• const 代理对象 = reactive(源对象)
• 接收一个对象（或数组）
• 返回一个 代理对象
  • Proxy 的实例对象，简称 proxy 对象

（三）层级

（一）Vue2.x 的响应式

1.实现原理

1）对象类型

• 通过 Object.defineProperty() 对属性的读取、修改进行拦截（数据劫持）

Object.defineProperty(data, 'count', {
  get(){...},
  set(){...}
});

（一）从定义数据角度对比

• ref 用来定义：基本类型数据
• reactive 用来定义：对象（或数组）类型数据
• 备注：ref 也可以用来定义 对象（或数组）类型数据 ，内部会自动通过 reactive 转为 代理对象（Proxy）

（二）从原理角度对比

• ref 通过 Object.defineProperty() 的 get 和 set 来实现响应式（数据劫持）
• reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过 Reflect 操作 源对象 内部的数据

（一）setup 的执行时机

• 在 beforeCreate 之前执行一次
• this 是 undefined

（二）setup 的参数

1.props

• 值为对象
• 包含：组件外部传递过来，且组件内部声明接收了的属性

2.context

• 上下文对象

1）attrs

• 值为对象
• 包含：组件外部传递过来，但没有在 props 配置中声明的属性
• 相当于 this.$attrs

（一）computed 函数

• 与 Vue2.x 中 computed 配置功能一致

import { computed } from 'vue';
setup() {
  ...

  // 计算属性——简写【没有考虑计算属性被修改的情况】
  person.fullName = computed(() => {
    return person.firstName + "-" + person.lastName;
  });

  // 计算属性——完整写法【考虑计算属性读和写的情况】
  person.fullName = computed({
    get() {
      return person.firstName + "-" + person.lastName;
    },
    set(val) {
      const nameArr = val.split("-");
      person.firstName = nameArr[0];
      person.lastName = nameArr[1];
    },
  });
}

Vue3 组合式函数

Hooks 时代，如何写出高质量的 react 和 vue 组件？

手摸手教你封装几个 Vue3 中很有用的组合式 API

官方文档

Provide/Inject API With Vue 3