优化实战 第466期 - 基础框架Vue3.X之Composition API

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它包括 响应式 API 生命周期钩子 依赖注入

响应式 API 之 ref()

• 作用

  创建基本数据类型，接受一个内部值，返回一个响应式的、可更改的 ref 对象。该对象只有一个指向其内部值的属性，即 .value

  所有对 .value 的操作都将被追踪

• 示例

  <template>{{ count }}</template>
  

  <script setup lang="ts">
    import { ref } from 'vue'
    const count = ref(0)
    console.log(count.value)  // 0
  
    count.value = 5
    console.log(count.value)  // 1
  </script>
  

  注意：操作数据时需要使用 .value 属性，而读取数据时在模板中直接使用即可

• 原理

  通过 Object.defineProperty() 的 get() 和 set() 来实现的响应式（数据劫持）

响应式 API 之 computed()

• 作用

  接受一个 getter 函数，返回一个 只读的响应式 ref 对象。该对象通过 .value 暴露 getter 函数的返回值

  它也可以接受一个带有 get 和 set 函数的对象来创建一个 可写的 ref 对象

  计算属性值会基于其响应式依赖被缓存

• 示例

  创建一个只读的计算属性

  <template>{{ computedResult }}</template>
  

  <script setup lang="ts">
    import { ref, computed } from 'vue'
    const count = ref(0)
    const computedResult = computed(() => count.value + 1)
    console.log(computedResult.value)  // 1
    computedResult.value = 5  // Write operation failed: computed value is readonly
  </script>
  

  创建一个可写的计算属性

  <template>{{ status }}</template>
  

  <script setup lang="ts">
    import { ref, computed } from 'vue'
    const flag = ref(true)
    const status = computed({
      get: () => flag.value,
      set: val =>  { flag.value = val }
    })
    console.log(status.value)  // true
    status.value = false
    console.log(status.value)  // false
  </script>
  

  注意：写数据时需要使用 .value 属性，而读取数据时在模板中直接使用即可

响应式 API 之 reactive()

• 作用

  创建引用数据类型，返回的响应式数据是 深层次 的。可以响应式的新增属性或通过索引修改数组中的取值

• 示例

  <template>{{ payload }}</template>
  

  <script setup lang="ts">
    import { reactive } from 'vue'
    const payload = reactive({ form: { name: '', region: '' } })
    payload.type = 1
  </script>
  

  注意：无论是操作数据还是读取数据均不需要使用 .value 属性

• 原理

  通过 Proxy 代理对象来实现响应式（数据劫持），并通过 Reflect 映射对象操作源数据内部的数据