vue3.x学习笔记之Composition API

• 简述Composition API

• vue3 Composition API script setup 语法

• script setup 的主要优点包括：
• 自动导出：
• 自动注册子组件和自定义指令：
• 简化的导入：
• 访问 Props 和 emits：

• 详解组合式 API Composition API

• 什么是Option API

• 大型组件可能难以阅读和维护
• 组件之间重用

• Composition API 中一些核心功能的概述：

• setup 函数：
• 响应式系统：
• 计算属性：
• watcher（观察者）：
• 依赖注入与提供/注入：
• 生命周期钩子：
• 自定义渲染函数：
• 脚本语法糖 script setup：

• 我们该用那种来写

• 扩展：Composition API 中一些核心功能的概述

• setup 函数：
• 响应式系统：
• 计算属性：
• watcher（观察者）：

• watch 与 watcheffect
• watch 与computed的区别

• 依赖注入与提供/注入：

• provide
• inject

• 生命周期钩子：

• 创建阶段：
• 更新阶段：
• 销毁阶段：
• 错误处理：
• 额外钩子：

• 自定义渲染函数：
• 脚本语法糖 script setup：‍

简述Composition API

Vue 3 的 Composition API 是一种全新的 API 设计方式，它提供了一种更加灵活、可复用且易于理解的代码组织形式，使得在 Vue 组件中管理状态和逻辑变得更加简洁和强大。

在 Vue 2 中，我们主要通过 options API（如 data、methods、computed 等）来组织组件的状态和逻辑。

而在 Vue 3 的 Composition API 中，引入了 setup() 函数以及一系列的组合式函数，如 reactive、ref、computed、watch 等，允许开发者以更接近 JavaScript 原生语法的方式来操作组件的状态，并且能够更好地解耦和复用代码。

Vue 3 的 Composition API 例子：

import { ref, computed } from 'vue'

export default {
  setup() {
    // 创建响应式数据
    const count = ref(0)

    // 定义计算属性
    const doubleCount = computed(() => count.value * 2)

    // 定义方法
    function increment() {
      count.value++
    }

    return {
      count,
      doubleCount,
      increment
    }
  }
}

在这个例子中，ref 用于创建响应式变量，computed 用于定义计算属性，它们都在 setup 函数中被声明并返回，然后在模板中使用。

这样的设计使得组件内部的状态逻辑更加清晰，同时提高了代码的可重用性。

vue3 Composition API script setup 语法

Vue 3 的 Composition API 提供了一种名为 script setup 的语法糖，它进一步简化了在单文件组件（SFC）中使用 Composition API 的方式。

`script setup` 的主要优点包括：

自动导出：

在 script setup 中声明的变量、函数和计算属性无需手动返回，它们会被自动暴露给模板使用。

自动注册子组件和自定义指令：

在 script setup 中导入并使用的子组件或自定义指令会自动注册到父组件中。

简化的导入：

可以直接在模板中使用 setup 函数里导入的变量而无需解构赋值。

访问 Props 和 emits：

通过特殊的 defineProps 和 defineEmits 函数可以更直接地类型化并使用 props 和自定义事件（emits）。

一个使用 script setup 的 Vue 3 组件示例：

<template>
  <div>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 自动从父组件接收 props，并且是类型化的（假设在 TypeScript 环境）
const props = defineProps({
  initialCount: {
    type: Number,
    required: true
  }
})

// 定义响应式状态
const count = ref(props.initialCount)

// 定义方法
function increment() {
  count.value++
}
</script>

在这个例子中，count 变量和 increment 方法无需显式返回，它们可以直接在模板中使用。

同时，props 通过 defineProps 定义和获取。

这种语法糖使得代码更加紧凑和直观。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

详解组合式 API (Composition API)

vue3 官网地址：https://cn.vuejs.org/guide/extras/composition-api-faq.html

3.x 最核心的变化提供了Composition Api

什么是Option API

之前在2.x系列我们的写法可以成为Option API简根据配置项去按照规则将对应代码放到对应的配置项中,对应的产生了三个问题：

• 随着组件变得更大的可读性变得越来越困难尤其大型组件
• 不利于代码重用，即使有Mixins方案整体也有一些问题
• Vue 2提供了有限的TypeScript支持

大型组件可能难以阅读和维护

我们的功能包含的代码需要将所有组件选项(data,method,computed,声明周期等)之间进行拆分。

就像下图一样从而 使我们的组件更难以阅读和解析哪个功能代码与哪个功能一起使用

虽然这套 API 的风格是基于函数的组合，但 组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。

如果你对如何通过组合式 API 使用 Vue 感兴趣，可以通过页面左侧边栏上方的开关将 API 偏好切换到组合式 API，然后重新从头阅读指引。

组件之间重用

2.x 也提供了三种重用解决方案:

• Mixins,
• Mixin工厂,
• 作用域插槽

为什么出现Composition Api

composition api 就可以让同一个功能的代码放到一起，查看修改的时候不用一个文件到处跳

composition api 优点

• Composition API 是根据逻辑相关性组织代码的，提高可读性和可维护性
• 基于函数组合的 API 更好的重用逻辑代码（ 在vue2 Options API中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清）

Composition Api 解决大型组件维护问题

如果将功能代码保持在一起这样代码可读性、可维护性有些差

而3.x提供了新api setup,这是一个可选的。

也就是说 3.x是同时支持Composition Api 和Option API两种编写习惯的

如果将代码都构建在setup中，是否会出现一个庞大的setup冗杂？

这各种逻辑在里面，这个问题不用担心

下图给出的方案会将功能分组为可通过设置方法调用的组合功能

vue3 Composition API都包涵什么？我们改怎么用？

Vue 3 的 Composition API 提供了一系列工具和函数，用于在 Vue 组件中创建、组织和复用可组合的逻辑。

Composition API 中一些核心功能的概述：

setup() 函数：

• setup() 是 Vue 3 组件的一个新入口点，在组件实例初始化之前执行。
• 在这个函数内部可以定义响应式状态、计算属性、生命周期钩子等，并通过返回的对象将需要暴露给模板的数据或方法提供出去。

响应式系统：

• ref()：创建一个响应式的引用（ref），它可以包装任何类型的基本值或者对象，使其成为响应式的。
• reactive()：创建一个响应式的对象，其属性也是响应式的。

计算属性：

• computed()：与 Vue 2 类似，用于创建计算属性，但可以直接在 setup 内部使用。

watcher（观察者）：

• watch()：监视数据变化并执行相应的副作用操作，支持深度观察和异步监听器。

依赖注入与提供/注入：

• provide() / inject()：实现组件间的依赖注入。

生命周期钩子：

• onMounted()、onUnmounted() 等函数替代了 Vue 2 中的生命周期钩子，这些函数可以在 setup() 内直接调用，处理组件挂载后、卸载前等特定阶段的任务。

自定义渲染函数：

• h()：用于创建 VNode 节点，当需要更底层的渲染控制时使用。

脚本语法糖 script setup：

• 这是一种特殊的 <script> 标签写法，它允许在单文件组件中以更简洁的方式使用 Composition API，自动导出变量和函数到模板中。

使用示例：

<template>
  <div>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 创建响应式状态
const count = ref(0)

// 定义方法
function increment() {
  count.value++
}

// 使用生命周期钩子
onMounted(() => {
  console.log('Component is mounted!')
})
</script>

在这个例子中，我们首先导入了 ref 和 onMounted 函数。

然后使用 ref 创建了一个响应式的 count 变量，并定义了一个 increment 方法来更新该变量。

最后，我们在 onMounted 生命周期钩子内打印一条消息表示组件已挂载。所有这些都无需显式返回，在模板中可以直接访问它们。

3.x 我们应该用那种来写

官方的课程也给了建议，如果你满足下面其中一点说明你要使用setup了

• 您需要最佳的TypeScript支持。
• 组件太大，需要按功能进行组织。
• 需要在其他组件之间重用代码。
• 您和您的团队更喜欢替代语法。

扩展：Composition API 中一些核心功能的概述：

setup() 函数：

Vue 3 中的 setup() 函数是一个全新的组件选项，它是 Vue 组合式 API 的核心入口点。

`setup()` 函数具有以下特点和用途：

执行时机：

• setup() 在组件实例创建之前执行，并且在 beforeCreate 和 created 生命周期钩子之前运行。
• 它在整个组件生命周期中只执行一次。

响应式状态管理：

• 在 setup() 函数内部可以使用 ref、reactive 等来自 vue 模块的函数来声明并初始化响应式状态。
• ref 创建一个可响应的引用对象，适合包装基本类型值；reactive 创建一个可响应的对象，其属性也是响应式的。

访问 Props：

• setup() 接收两个参数：props 和 context（可选）。
• props 参数是一个对象，包含了从父组件传递过来的所有 props，这些 prop 是响应式的，可以直接在 setup 内部修改和监听。
• 示例代码：const { prop1, prop2 } = defineProps(['prop1', 'prop2']);

暴露数据给模板：

• setup() 必须通过返回一个对象来提供给模板和其他选项式 API 钩子使用的数据和方法。
• 返回的对象中的任何属性都可以直接在模板中被引用。

组合逻辑：

• setup() 允许开发者以更加灵活的方式组织组件的逻辑，比如复用状态逻辑、定义计算属性和方法、监听响应式数据变化等。
• 可以直接在 setup() 内调用其他 Composition API 函数如 computed、watch 等。

不支持 this 关键字：

• 在 setup() 函数内无法使用 this 关键字访问组件实例，因为 setup() 运行时还没有生成组件实例。

无生命周期钩子集成：

• 虽然 setup() 不是生命周期钩子本身，但可以在 setup() 中调用诸如 onMounted、onUpdated 等生命周期相关的函数来实现类似的功能。

Vue 3 的 setup() 函数旨在通过一种更纯粹的函数式编程风格，提供更好的代码组织结构和逻辑复用性，帮助开发者更好地构建复杂且易于维护的组件。

响应式系统：

• ref()：创建一个响应式的引用（ref），它可以包装任何类型的基本值或者对象，使其成为响应式的。
• reactive()：创建一个响应式的对象，其属性也是响应式的。

Vue 3 的响应式系统是其框架内核的重要升级部分，相比于 Vue 2.x 使用的 Object.defineProperty，Vue 3 采用了 ES6 中新增的 Proxy 对象来实现更强大且高效的响应式数据绑定。

主要特点和改进：

Proxy 的使用：

• Vue 3 利用 JavaScript 原生 Proxy 实现了对对象属性的代理，相比 Object.defineProperty 可以更全面地捕获对象的各种操作，包括但不限于属性访问、赋值、删除以及数组索引和长度的变化等。

深度监听：

• 新的响应式系统能够自动跟踪嵌套对象和数组的所有层级变化，无需开发者手动进行深层属性的递归监听。

性能优化：

• Proxy 能够在对象创建阶段一次性代理所有属性，而非遍历每个属性分别定义 getter 和 setter，从而减少了初始化开销。
• 同时，Vue 3 还引入了一些性能优化策略，如惰性依赖收集（只在实际需要的时候收集依赖）和批量更新（合并多个异步触发的更新为一次渲染）。

独立的响应式模块：

• Vue 3 将响应式系统的逻辑抽离成独立的模块，可以单独使用，不再紧密耦合于 Vue 组件实例。

Composition API：

• 响应式系统的改进与 Composition API 密切相关，通过 ref 和 reactive 函数创建响应式引用和对象，它们利用了新的响应式系统来实现数据变化驱动视图更新。

副作用管理：

• 响应式系统中还包括对副作用函数（effect）的管理，这些副作用函数会在响应式数据变化时自动运行，对应到 Vue 3 中的 watch、computed 等功能。

更灵活的依赖收集：

• 新的响应式系统能更好地追踪组件内部的依赖关系，使得依赖于某状态的计算或副作用仅在该状态变化时执行。

综上所述，Vue 3 的响应式系统极大地提升了开发效率和应用性能，并为构建复杂应用提供了更加灵活和强大的底层支持。

计算属性：

Vue 3 中计算属性（Computed Properties）的使用通过 Composition API 进行了重新设计，但仍保留了 Vue 2.x 的核心思想：基于依赖的响应式数据自动计算结果，并且只有当依赖项改变时才会重新计算。

在 Vue 3 的 Composition API 中，你可以使用 computed 函数来创建计算属性：

import { ref, computed } from 'vue'

export default {
  setup() {
    // 声明响应式状态
    const count = ref(0)
    const multiplier = ref(2)

    // 创建计算属性
    const doubledCount = computed(() => count.value * multiplier.value)

    return {
      count,
      multiplier,
      doubledCount
    }
  }
}

在这个例子中，doubledCount 是一个计算属性，它的值是 count 和 multiplier 的乘积。每当 count 或 multiplier 变化时，doubledCount 的值也会自动更新，而不需要手动管理这些依赖关系。

模板中可以直接使用这个计算属性：

<template>
  <div>
    <input v-model="count" type="number">
    <input v-model="multiplier" type="number">
    Doubled Count: {{ doubledCount }}
  </div>
</template>

计算属性的特点包括：

• 缓存机制：如果计算属性的依赖没有发生变化，则不会重复执行计算逻辑。
• 自动追踪依赖：Vue 会追踪计算属性函数内部访问的响应式变量，确保在它们变化时正确地触发计算属性的更新。
• 代码组织性：计算属性能够将复杂或重复的表达式抽象为可读性更高的组件内部逻辑，从而提高代码质量。

watcher（观察者）：

Vue 3 中的观察者（Watcher）是 Vue 响应式系统中的一个重要组成部分，它负责监听数据的变化，并在数据变化时触发相应的更新逻辑。在 Composition API 中，开发者可以通过 watch 函数显式地定义一个观察者。

Vue 3 的 watch 函数允许你监听响应式数据或计算属性，并在它们的值发生变化时执行回调函数：

import { ref, watch } from 'vue'

export default {
  setup() {
    // 创建响应式状态
    const count = ref(0)

    // 定义一个 watcher
    watch(
      // 监听的目标，可以是响应式引用、对象或者计算属性函数
      () => count.value,
      // 回调函数，当监听目标的值发生改变时执行
      (newCount, oldCount) => {
        console.log('Count changed:', newCount, 'from', oldCount)
        // 在这里进行其他操作，如更新视图、请求数据等
      },
      // 可选的配置项
      {
        // 深度观察（用于监听嵌套对象的变化）
        deep: true,
        // 是否在组件初始化时立即执行一次回调
        immediate: false,
        // 其他可配置项...
      }
    )

    return {
      count
    }
  }
}

`watch` 函数具有以下特点：

1. 自定义观察：你可以精确地指定要观察的数据路径以及何时触发更新。
2. 深度观察：通过设置 deep: true，能够监听对象内部属性的变化，甚至是深层嵌套的对象和数组。
3. 初始化执行：通过设置 immediate: true，可以在创建 Watcher 时立即执行回调函数，获取初始值。
4. 灵活的处理函数：回调函数接收新旧两个参数，方便进行前后值的比较和处理。

通过使用 watch，开发人员能够更好地控制组件内部的状态管理和副作用逻辑，从而提高代码的可读性和可维护性。

watch 与 watcheffect

Vue 3 中的 watch 和 watchEffect 都是用于响应式数据变化并执行副作用函数的功能，但它们之间存在一些关键区别：

watch

1. 用途：watch 是用来监听特定的响应式数据源（如 ref 或 reactive 创建的对象中的属性），并在其值发生变化时执行回调函数。
2. 具体性：需要显式地指定要监听的具体属性或计算属性，并且可以获取到新值和旧值。
3. 惰性和立即执行：可以通过配置项控制是否在声明时就执行一次（immediate: true）或者仅在依赖变化时才执行（默认惰性模式）。
4. 深度监听：通过配置项 deep: true 可以实现对对象内部属性的深度监听。

使用示例：

import { ref, watch } from 'vue'

const count = ref(0)

watch(
  () => count.value, // 监听的目标表达式
  (newCount, oldCount) => {
    console.log('Count changed:', newCount, 'from', oldCount)
  },
  { immediate: true, deep: false } // 可选配置项
)

watchEffect

1. 用途：watchEffect 是用来执行一个带有副作用的函数，并自动追踪该函数内的所有响应式依赖。一旦这些依赖项有任何改变，都会重新运行这个函数。
2. 无需指定依赖：无需手动指明要监听的属性，它会根据函数体内部访问的响应式变量来收集依赖关系。
3. 无旧值：回调函数中没有提供旧值参数，只关注最新的状态。
4. 立即执行：每次定义 watchEffect 时，它总会立即执行一次，确保初始化时即收集所有依赖。

使用示例：

import { ref, watchEffect } from 'vue'

const count = ref(0)
const multiplier = ref(2)

watchEffect(() => {
  console.log('Doubled count:', count.value * multiplier.value)
})

总结来说，watch 更适合于针对单个或特定多个数据源精确地进行监听和处理变化，而 watchEffect 则更适合于处理一组相关联的数据变动，特别是当依赖复杂或难以预先确定的情况下。

watch 与computed的区别

Vue 3 中的 watch 和 computed 的区别主要体现在它们的设计目的、功能特性和使用场景上：

Computed Properties (`computed`)

• 设计目的：计算属性主要用于根据组件内部其他响应式状态（如 data 属性或 props）来派生一个新的值。这个派生值是自动缓存的，只有当其依赖关系发生变化时才会重新计算。
• 特性：

• 缓存机制：一旦计算属性的结果被求得，就会被缓存起来，直到它的依赖发生变化才会重新计算。
• 声明方式：通过返回一个函数来定义计算逻辑，该函数内部可以访问到其他响应式数据，并基于这些数据进行计算。
• 读取便捷：在模板中可以直接引用计算属性，无需额外操作。

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

// 模板中直接使用
<template>
  <div>{{ doubleCount }}</div>
</template>
</script>

Watchers (`watch`)

• 设计目的：监听器用于观察特定的数据源的变化，当这些数据变化时触发回调函数，执行自定义逻辑，比如更新视图之外的数据、发起异步请求、执行复杂运算等。
• 特性：

• 手动触发：不同于计算属性的自动计算，watch 需要明确指定需要监听哪些数据源以及相应的处理函数。
• 深度监听：可以通过选项配置 .deep 或者 handler 函数中的 deep: true 来实现对对象深层次属性变化的监听。
• 支持异步：watch 回调函数可以是同步也可以是异步的，适合执行异步任务。
• 没有缓存：每次监听的数据发生变化时都会立即执行回调。

<script setup>
import { ref, watch } from 'vue'

const count = ref(0)

// 监听count的变化并执行相应逻辑
watch(count, (newValue, oldValue) => {
  console.log('Count changed:', newValue, 'from', oldValue)
  // 这里可以进行任何同步或异步操作
})

// 深度监听
watch(
  () => count.value,
  (newValue, oldValue) => {...},
  { deep: true }
)
</script>

总结来说，在 Vue 3 中，当你需要根据多个响应式状态创建一个始终最新的衍生状态，并且不需要每次都重新计算时，应优先考虑使用 computed。而当你需要在某个数据变化时执行一段定制化逻辑（特别是包含异步操作），则应该使用 watch。

依赖注入与提供/注入：

Vue 3 中的依赖注入（Dependency Injection, DI）机制允许祖先组件向后代组件传递数据或功能，而无需后代组件直接引用这些数据源。这一机制主要通过 provide 和 inject 两个函数实现。

provide()

• 在 Vue 组件中，通过 setup() 函数或者在选项式 API 的 provide 选项中使用 provide 函数来提供数据。
• 你可以在任何层级的组件中调用 provide，将需要共享的数据作为键值对提供给其所有后代组件。

示例：

setup() {
    // 提供一个名为 'theme' 的响应式变量
    const theme = ref('light');
    
    provide('theme', theme);
    
    return {};
}

inject()

• 在后代组件中，通过 setup() 函数或者 beforeCreate 生命周期钩子中的 this.$options.inject 来使用 inject 函数注入所需的数据。
• 注入时需要提供一个字符串键名，该键名应与祖先组件中通过 provide 提供的数据键名一致。

示例：

setup() {
    // 注入由祖先提供的 'theme'
    const theme = inject('theme');

    if (!theme) {
    throw new Error('Theme not provided!');
    }

    return { theme };
}

通过这种方式，父级组件可以向任意深层嵌套的子组件传递状态或其他资源，同时保持了组件间的解耦，因为子组件不需要知道这些数据是从哪个具体祖先组件传来的。

这种模式尤其适用于大型应用程序中跨越多个层级的数据共享场景。

生命周期钩子：

Vue 3 中的生命周期钩子函数相比于 Vue 2.x 进行了较大的调整，现在主要通过 Composition API 提供。以下是 Vue 3 的主要生命周期钩子函数列表：

创建阶段：

• setup()：这是 Vue 3 新增的核心生命周期钩子，在组件实例初始化时调用，用于设置响应式状态、计算属性和监听器等。setup() 函数是在 beforeCreate 和 created 钩子之前执行，并且在这个钩子内不能直接访问到 this。
• onBeforeMount(caller?: () => void)：在组件挂载前执行，可用于进行需要 DOM 的操作前的一些准备工作。
• onMounted(callback: () => void)：在组件挂载完成后执行，此时组件模板已经被渲染到 DOM 中，可以安全地访问组件的 DOM 元素。

更新阶段：

• onBeforeUpdate(caller?: () => void)：在组件更新之前调用，即数据发生变化但视图尚未更新时。
• onUpdated(callback: () => void)：在组件更新后调用，此时组件的数据变化已经反映到了DOM中。

销毁阶段：

• onBeforeUnmount(callback: () => void)：在组件卸载/销毁之前调用，用于清理工作。
• onUnmounted(callback: () => void)：在组件完全卸载并从DOM中移除后调用。

错误处理：

• onErrorCaptured(handler: (err: unknown, instance: ComponentPublicInstance<unknown, {}, {}, {}, {}, {}>, info: string) => boolean | void)：全局错误捕获钩子，可以捕获子孙组件抛出的错误。

额外钩子：

• onRenderTracked(fn: (event: TrackOpTypes, args: any[]) => void)：当依赖项被追踪时触发。
• onRenderTriggered(fn: (event: TriggerOpTypes, args: any[]) => void)：当依赖项触发重新渲染时触发。

在使用这些生命周期钩子时，请注意它们不直接与 Vue 组件选项关联，而是在 setup() 函数内部调用。同时，由于 setup() 中没有 this，所以无法直接访问到 data、methods 等选项中的内容，而是需要通过 Composition API 来定义和管理状态及逻辑。

自定义渲染函数：

Vue 3 中的自定义渲染函数允许开发者以更底层的方式控制组件如何被渲染到 DOM 中。

在 Vue 2.x 中，自定义渲染函数就已经存在，但在 Vue 3 中，由于 Composition API 的引入和优化，自定义渲染函数的使用变得更加灵活。

Vue 3 自定义渲染函数的基本结构如下：

import { h, render } from 'vue';

export default {
  setup() {
    // 在 setup 函数中可以准备需要的数据或逻辑

    return () => {
      // 这里是自定义渲染函数，返回一个 VNode 节点
      return h('div', {}, ['Hello, Custom Renderer!']);
    };
  }
};

在这个例子中，h() 是用于创建虚拟节点（VNode）的函数，它是 Vue 渲染系统的基础构建块。

h() 接收三个主要参数：元素标签名、元素属性对象（可选）以及子节点数组或文本值（同样也是可选的）。

如果你的应用场景需要非常精细地控制渲染过程，比如直接操作 DOM，或者想要将 Vue 与非标准的渲染目标（如 Canvas 或 WebGL）结合，那么自定义渲染函数是一个理想的选择。

然而，在大多数情况下，开发人员会使用模板或组合式函数来描述视图层，而不是直接编写渲染函数。

如果需要实现跨平台渲染，例如在不同的环境中（Web 和 Native 等）复用相同的 Vue 组件逻辑，可以利用 Vue 3 提供的自定义渲染器（Renderer）API，它允许你为不同平台提供不同的渲染逻辑实现。

脚本语法糖 script setup：

Vue 3 的 script setup 是一种特殊的 <script> 标签语法糖，它允许开发者在单文件组件（SFC）中以更简洁、直观的方式来使用 Vue 的 Composition API。

script setup 的主要特点包括：

自动导入和导出：

• 在 script setup 中声明的变量、函数或计算属性会被自动暴露给模板，无需手动 return。
• 同样，如果在脚本内引入了子组件或其他需要注册到父组件中的元素，它们也会自动注册。

简化的 Props 和 emits 定义：

• 使用 defineProps 来定义组件接收的 Props，并且可以进行类型注解。
• 使用 defineEmits 来定义组件发出的自定义事件（emits），同样支持类型注解。

更好的类型推断：

• 当使用 TypeScript 时，Vue 编译器能够基于 setup() 函数内部的代码结构生成更准确的类型信息，从而提高开发工具的类型提示和错误检测能力。

无 this 关键字：

• 在 script setup 中不需要使用 this，所有响应式数据和方法都是通过直接引用声明的变量来访问和操作。

一个基本的 script setup 示例：

<template>
  <div>
    {{ message }}
    <button @click="incrementCount">Click me</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义 Props
const props = defineProps({
  initialMessage: String
})

// 创建响应式状态
const count = ref(0)

// 计算属性
const message = computed(() => `${props.initialMessage} - Count: ${count.value}`)

// 方法
function incrementCount() {
  count.value++
}
</script>

在这个示例中，message、count 变量以及 incrementCount 函数都被自动导出并可在模板中使用，而无需像普通 setup() 函数那样返回一个对象。

同时，props 也是通过 defineProps 明确地进行了类型定义和声明。

内容来源参考

vuemastery： https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

Vue Function-based API RFC： https://zhuanlan.zhihu.com/p/68477600

原文始发于微信公众号（前端爱好者）：vue3.x学习笔记之Composition API

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267288.html

vue3.x学习笔记之Composition API

简述Composition API

Vue 3 的 Composition API 例子：

vue3 Composition API script setup 语法

script setup 的主要优点包括：

自动导出：

自动注册子组件和自定义指令：

简化的导入：

访问 Props 和 emits：

详解 组合式 API (Composition API)

什么是Option API

大型组件可能难以阅读和维护

组件之间重用

为什么出现Composition Api

composition api 优点

Composition Api 解决大型组件维护问题

vue3 Composition API都包涵什么？我们改怎么用？

Composition API 中一些核心功能的概述：

setup() 函数：

响应式系统：

计算属性：

watcher（观察者）：

依赖注入与提供/注入：

生命周期钩子：

自定义渲染函数：

脚本语法糖 script setup：

使用示例：

3.x 我们应该用那种来写

扩展：Composition API 中一些核心功能的概述：

setup() 函数：

setup() 函数具有以下特点和用途：

响应式系统：

主要特点和改进：

计算属性：

计算属性的特点包括：

watcher（观察者）：

watch 函数具有以下特点：

watch 与 watcheffect

watch 与computed的区别

Computed Properties (computed)

Watchers (watch)

依赖注入与提供/注入：

provide()

inject()

生命周期钩子：

创建阶段：

更新阶段：

销毁阶段：

错误处理：

额外钩子：

自定义渲染函数：

脚本语法糖 script setup：

相关推荐

发表回复

分享到:

`script setup` 的主要优点包括：

详解组合式 API (Composition API)

`setup()` 函数具有以下特点和用途：

`watch` 函数具有以下特点：

Computed Properties (`computed`)

Watchers (`watch`)