文章目录

一、Vue 3 组合式 API 概述二、`setup`​ 函数的基本使用2.1 `setup`​ 函数的特点2.2 `setup`​ 函数的基本结构2.3 实现一个简单的小demo

三、`ref`​ 函数的功能和应用3.1 `ref`​函数介绍3.2 基本使用3.2.1 定义`ref`​数据3.2.2 修改响应式变量

3.3 使用`ref`​函数实现计数器

四、`reactive`​ 函数的功能和应用4.1 `reactive`​ 函数介绍4.2 基本使用4.3 使用`reactive`​函数实现计数器4.4 `reactive`​函数的的局限性

五、`ref`​ 与 `reactive`​ 的区别5.1 主要区别5.2 `ref`​ 适合的场景5.3 `reactive`​ 适合的场景5.4 Vue社区观点

六、总结

一、Vue 3 组合式 API 概述

在 Vue 3 中，引入了组合式 API（Composition API） ，这使得开发者可以更灵活地组织代码逻辑，并提升了组件的复用性和可维护性。相比于 Vue 2 中的选项式 API，组合式 API 提供了一种更具功能性的方式来构建应用。

主要优点：

逻辑复用和组织：通过组合函数可以更清晰地组织代码逻辑，避免在生命周期函数中写大量逻辑。更好的 TypeScript 支持：组合式 API 天然地支持 TypeScript，这使得类型推断和类型检查变得更加轻松。性能优化：组合式 API 的实现方式在某些场景下可以带来性能上的提升。

二、<code>setup​ 函数的基本使用

setup​ 函数是 Vue 3 组件中使用组合式 API 的起点，它是一个新增加的组件选项，所有的组合式 API 的逻辑都需要在这个函数中书写。

2.1 setup​ 函数的特点

从组件生命周期来看，在beforeCreate​之前调用，因此它没有 this​ 绑定。函数中 this​ 不是组件实例，是 undefined​。返回一个对象，该对象将被合并到组件的 data​ 中，可以在模板中直接使用。

2.2 setup​ 函数的基本结构

<template>

<div>

<!-- 绑定在模板中的变量和方法 -->

</div>

</template>

<script>

import { ref, reactive } from 'vue';

export default {

setup() {

// 在这里定义响应式变量和方法

return {

// 返回需要在模板中使用的变量和方法

};

},

};

</script>

<style scoped>

/* 样式部分 */

</style>

2.3 实现一个简单的小demo

<template>

<div>

<p @click="show()">{ -- -->{ msg }}</p>code>

</div>

</template>

<script>

export default { -- -->

setup() {

console.log("setup 函数执行了");

let msg = 'Hello World';

function show(){

console.log("show 函数执行了");

}

// 返回定义的变量和函数

return {

msg,

show

};

},

beforeCreate() {

console.log("beforeCreate 函数执行了");

},

};

</script>

<style scoped>

button {

margin: 5px;

padding: 10px 20px;

background-color: #4caf50;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

p {

font-size: 18px;

}

</style>

​

三、<code>ref​ 函数的功能和应用

3.1 ref​函数介绍

ref​ 函数用于创建一个持有单个值的响应式引用。它适用于基本数据类型（如字符串、数字、布尔值）和不需要深度响应的数据结构。通过 ref​ 函数，我们可以在 Vue 组件中创建简单的响应式数据。

主要特点：

基本类型响应性：为基本数据类型创建响应式状态。引用式访问：通过 .value​ 属性访问和修改值。适用于 DOM 引用：可以用于 DOM 元素的引用。

3.2 基本使用

3.2.1 定义ref​数据

import { -- --> ref } from 'vue';

export default {

setup() {

// 创建响应式数据

const count = ref(0);

const message = ref('Hello, Vue 3!');

const isVisible = ref(true);

return {

count,

message,

isVisible,

};

},

};

3.2.2 修改响应式变量

要修改 ref​ 创建的响应式变量，需要使用 .value​ 属性：

count.value++; // 增加 count

count.value = 10; // 设置 count 的值

注意：当在Vue的模板（template​）中使用时，ref​ 的值可以直接使用，无需显式调用 .value​：

<template>

<div>

<p>{ { count }}</p>

<button @click="count++">增加</button>code>

</div>

</template>