重生之我在学Vue--第2天 Vue 3 Composition API 与响应式系统

文章目录

[重生之我在学Vue--第2天 Vue 3 Composition API 与响应式系统](#重生之我在学Vue--第2天 Vue 3 Composition API 与响应式系统)
- 前言
- [一、Composition API 核心概念](#一、Composition API 核心概念)
- - [1.1 什么是 Composition API？](#1.1 什么是 Composition API？)
  - [1.2 Composition API 的核心工具](#1.2 Composition API 的核心工具)
  - [1.3 基础用法示例](#1.3 基础用法示例)
- 二、响应式系统
- - [2.1 响应式工具](#2.1 响应式工具)
  - - [1. `ref`](#1. ref)
    - [2. `reactive`](#2. reactive)
    - [3. `computed`](#3. computed)
  - [2.2 响应式系统的核心原理](#2.2 响应式系统的核心原理)
  - [2.3 响应式数据的监听](#2.3 响应式数据的监听)
  - - [1. 使用 `watch`](#1. 使用 watch)
    - [2. 使用 `watchEffect`](#2. 使用 watchEffect)
- [三、案例实践：Todo 应用](#三、案例实践：Todo 应用)
- - 功能
  - 代码实现

前言

Vue 3 引入了 Composition API ，它是一种新的组件逻辑组织方式，旨在解决 Vue 2 中 Options API 难以管理复杂逻辑的问题。通过 Composition API，我们可以更灵活地组织代码、复用逻辑，并充分利用 Vue 3 的响应式系统。

Vue3 官方中文文档传送点：简介 | Vue.js

Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

一、Composition API 核心概念

1.1 什么是 Composition API？

Composition API 是 Vue 3 提供的一组新的 API，用于定义组件的逻辑和状态。它的核心是 setup 函数，所有组件的逻辑都可以在 setup 中定义。

javascript 复制代码

export default {
  setup() {
    // 在这里定义组件逻辑
    return {};
  },
};

1.2 Composition API 的核心工具

以下是 Composition API 的核心工具和它们的作用：

工具	作用
`ref`	创建响应式的基本数据类型（如字符串、数字、布尔值）。
`reactive`	创建响应式的复杂对象（如数组、对象）。
`computed`	创建基于其他响应式数据的计算属性。
`watch`	监听响应式数据的变化并执行副作用。
`watchEffect`	自动追踪响应式数据的依赖并执行副作用。
`onMounted`	组件挂载时的生命周期钩子。
`onUnmounted`	组件卸载时的生命周期钩子。
`provide`/`inject`	实现跨组件的数据共享（类似 Vue 2 的 `provide/inject`）。

1.3 基础用法示例

以下是一个简单的计数器示例，展示了如何使用 ref 和 onMounted。

vue 复制代码

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">增加</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    onMounted(() => {
      console.log('组件已挂载');
    });

    return {
      count,
      increment,
    };
  },
};
</script>

代码解析：

响应式数据 count ：
- 使用 ref 创建了一个响应式数据 count，初始值为 0。
- 通过 count.value 可以访问和修改其值。
- 在模板中，{``{ count }} 会自动解包 ref 的值（无需显式加 .value）。
事件绑定 ：
- 使用 @click 绑定一个点击事件，当按钮被点击时，执行 increment 方法。
- increment 方法会将 count 的值加 1，从而触发视图的更新。
生命周期钩子 onMounted ：
- 使用 onMounted 生命周期钩子，在组件挂载到 DOM 后执行一些逻辑。
- 在这里，console.log('组件已挂载') 会在浏览器控制台输出一条消息，表明组件已成功挂载。

二、响应式系统

Vue 3 的响应式系统是其核心特性之一，它通过 Proxy 对数据进行代理，从而实现数据的自动追踪和更新。

2.1 响应式工具

1. `ref`

用于创建基本类型的响应式数据。
通过 .value 访问和修改响应式数据。

javascript 复制代码

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出 0
count.value++;
console.log(count.value); // 输出 1

2. `reactive`

用于创建复杂类型（如对象、数组）的响应式数据。
不需要通过 .value 访问属性。

javascript 复制代码

import { reactive } from 'vue';

const person = reactive({
  name: 'Alice',
  age: 25,
});

console.log(person.name); // 输出 Alice
person.age++;
console.log(person.age); // 输出 26

3. `computed`

用于创建基于其他响应式数据的计算属性。
支持缓存，只有依赖的数据发生变化时才会重新计算。

javascript 复制代码

import { ref, computed } from 'vue';

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

console.log(doubleCount.value); // 输出 0
count.value++;
console.log(doubleCount.value); // 输出 2

2.2 响应式系统的核心原理

Vue 3 的响应式系统基于 ES6 的 Proxy 实现，主要有以下特点：

依赖追踪：当模板或计算属性使用响应式数据时，Vue 会自动追踪数据的依赖。
自动更新：当响应式数据发生变化时，Vue 会自动更新依赖该数据的视图。
懒加载 ：计算属性和 watch 会在需要时才执行。

2.3 响应式数据的监听

1. 使用 `watch`

watch 用于监听响应式数据的变化，并执行副作用。

javascript 复制代码

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});

count.value++; // 输出：count 从 0 变为 1

2. 使用 `watchEffect`

watchEffect 会自动追踪响应式数据的依赖，并在数据变化时重新执行。

javascript 复制代码

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`count 的值是：${count.value}`);
});

count.value++; // 输出：count 的值是：1

三、案例实践：Todo 应用

以下是一个简单的 Todo 应用，使用 Composition API 和 Vue 3 的响应式系统。

功能

添加任务。
删除任务。
显示任务列表。

代码实现

vue 复制代码

<template>
  <div>
    <h1>Todo 应用</h1>
    <input v-model="newTask" placeholder="输入任务" />
    <button @click="addTask">添加任务</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
        <button @click="removeTask(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const newTask = ref('');
    const tasks = ref([]);

    const addTask = () => {
      if (newTask.value.trim()) {
        tasks.value.push(newTask.value.trim());
        newTask.value = '';
      }
    };

    const removeTask = (index) => {
      tasks.value.splice(index, 1);
    };

    return {
      newTask,
      tasks,
      addTask,
      removeTask,
    };
  },
};
</script>

<style>
h1 {
  font-size: 24px;
  margin-bottom: 20px;
}
input {
  padding: 5px;
  margin-right: 10px;
}
button {
  padding: 5px 10px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
</style>

代码解析：

响应式数据

使用ref创建了两个响应式数据：
- newTask：绑定到输入框，用于存储用户输入的任务内容。
- tasks：存储任务列表的数组。

添加任务功能

方法addTask：
- 检查 newTask 是否为空，避免添加空任务。
- 使用 trim() 去除多余的空格。
- 如果输入合法，将任务添加到 tasks 数组中，并清空输入框。

删除任务功能

方法removeTask：
- 使用 splice 方法根据索引删除指定的任务。

列表渲染

使用 v-for 遍历 tasks 数组，将每个任务渲染为一个列表项。
使用 :key="index" 为每个列表项设置唯一的键，确保 Vue 能正确地追踪列表的变化。

双向绑定

使用 v-model 将输入框的值绑定到 newTask，实现双向数据绑定。
- 使用 trim() 去除多余的空格。
- 如果输入合法，将任务添加到 tasks 数组中，并清空输入框。

重生之我在学Vue--第2天 Vue 3 Composition API 与响应式系统