Vue 基础-Vue3(第五章)

1. 组合式 API

组合式 API 需要模块支持 $npm install @vue/composition-api --save，使用方法如下：

// Main.js
import VueCompositionApi from '@vue/composition-api';
Vue.use(VueCompositionApi);

1. setup 函数

setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

• 需要在非单文件组件中使用组合式 API 时
• 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时

注意：

• 结合单文件组件使用的组合式 API，推荐使用 <script setup> 方式
• setup() 在 created 实例被完全初始化之前执行，所以其中不使用 this
• setup() 有两个参数
  • props 是组件接收的参数，是响应式的
  • context 是上下文对象，暴露了其他一些在 setup 中可能会用到的值，是非响应式的，可以安全地解构

export default {
  setup(props, context) {
   // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)

    // 暴露公共属性（函数）
    console.log(context.expose)
  }
}

// 解构
export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

2. 响应式对象

在 Vue2 中为 data(){ return {} }，而 Vue3 中使用 recative() 和 ref()。

响应式 API：核心

1. ref()

用来声明基础数据类型变量，接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

// 源码
function ref<T>(value: T): Ref<UnwrapRef<T>>

interface Ref<T> {
  value: T
}

// 使用
const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

2. reactive()

用来声明单一对象，返回一个对象的响应式代理

// 源码
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

// 使用
const obj = reactive({ count: 0 })
obj.count++

3. 生命周期

2.x 生命周期选项和组合式 API 之间的映射：

• beforeCreate -> 使用 setup()
• cereated -> 使用 setup()
• beforeMount -> - onBeforeMount
• mounted -> onMounted
• methods -> 去除，普通方式写方法
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmountd
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

除了 2.x 生命周期等效项之外，组合式 API 还提供了以下调试挂钩，两个钩子都收到 DebuggerEvent ，类似于 onTrack 和 onTrigge

• onRenderTracked
• onRenderTriggered