Vue进阶 | Vue3新特性之组合式API（一）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

在 Vue3 的编程中可以很直观的感受到书写方式发生了变化，不再是传统的选项式 API 通过选项的方式实现一个组件

选项式 API 与组合式 API

选项式是我们比较熟悉的写法：

组合式：

import {ref, onMounted} from 'vue';
export default {
  setup(){
    let msg = ref('俺是组合式');
    
    function sayHi(){
      console.log(msg.value) // 划重点，这里是.value哦！
    }
    
    onMounted(() => console.log('生命周期： mounted'));
    
    return {msg ,sayHi}
  }
}

setup 语法糖

前文中提到了 Vue3 中的一种特殊语法：setup语法糖，可以把 setup 语法糖理解为是使用组合式 API 的地方。

在setup 中：

• 组件自动注册，不需要额外声明（自动将文件名定义）
• 不再声明 beforeCreate 和 create
• 无法使用 this （所以找不到组件实例无法获取到data、methods等）
• 属性方法不需要 return

组合式 API 可以提高代码的复用性与可读性，使项目更易维护，其中包括：

• 响应式 API： 比如 ref() 和 reactive()
• 生命周期钩子： 比如 onMounted() 和 onUnmounted()
• 依赖注入：比如 provide() 和 inject()
• 父子组件之间的交互：defineProps 和 defineEmits、defineExpose

引入

在页面中，组件API按需引入：

import { ref, watch, toRefs, reactive,toRef, computed, defineEmits } from 'vue';

ref 与 reactive

在 setup 中，数据并不是响应式的，所以需要使用 ref 或者 reactive 对数据进行处理，也就是创建响应式数据。

1. ref

用来定义常用的基础类型(String,Number,Boolean等等)

ref() 创建的响应式数据后会返一个响应式的对象，如图，在控制台打印，可以看到一个RefImpl{}，属性的值需要用 .value 才能访问到，value返回的是Proxy

2. reactive

通常用来定义对象

const person = reactive({
  height: 180,
})

在控制台打印，可以看到reactive创建响应式数据后，返回的是一个Proxy对象：

注：如果reactive()内传入的参数不是对象，那么数据不是响应式的。