vue组合式api

目录

简介

优点

使用方法

组件的注册和使用

响应式数据

计算属性

侦听器

生命周期钩子

自定义属性和事件

---

简介

组合式API是一种基于函数的API，通过一组编写在一起的函数来描述组件的状态和行为，让我们可以更加灵活地组织组件代码。通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。

优点

1. 更加灵活：使用组合式API，我们可以更加灵活地组织代码，将相对独立的逻辑抽离至单独的函数中，使其更容易被复用和测试。
2. 更加模块化：使用组合式API，我们可以将组件的状态和行为拆分成多个模块，比如数据相关功能、生命周期钩子、计算属性、事件处理等。这样使得代码更加清晰，易于维护。
3. 更好的类型推导：使用组合式API，功效继续增强TypeScript类型推导的能力，让代码更加直观和类型安全。
4. 更小的组件：使用组合式API，我们可以将通用性的逻辑抽离为独立的函数，只需要在需要引入组件时使用。这样可以让组件更小，更精简。
5. 性能更好：使用组合式API，Vue会根据需要优化渲染函数的代码，从而提供更好的性能。Vue会自动跟踪哪些数据是被使用的，只有这些数据发生变化才会重新渲染。

使用方法

<template>

        <div>box---{ {msg}}---{ {count}}</div>

        <div>

                { {obj.title}}---{ {obj.count}}

        </div>

        <button @click="fn1()">btn</button>

</template>

<script setup>

        let msg = "hello"

        let count = 20

        let obj = {

                title: "xxx",

                count: 10

        }

        let fn1 = () => {

                console.log("执行fn1")

        }

</script>

组件的注册和使用

使用异步注册组件：