Vue3的响应式基础｜青训营Vue的响应式是指Vue框架中的数据双向绑定机制。在Vue中，当数据发生变化时，视图会自

Vue的响应式是指Vue框架中的数据双向绑定机制。在Vue中，当数据发生变化时，视图会自动更新；反之，当视图发生变化时，数据也会自动更新。响应式系统的的出现为前端工作者提供大量便利。

模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

ref()

ref()函数用来声明响应式状态。

import { ref } from 'vue'
const count = ref(0)

在这里，ref(0)定义了一个ref对象count，初始值为Number类型的0，count有一个属性value，值即为0。由于Number类型的变量可以进行++操作，所以count虽然是ref对象，也可以和普通的Number变量一样进行++操作。

在typescript语言中，ref对象可以指定类型，在JavaScript中，ref内的对象可以由系统进行推断，在日常使用是可以的，但是有时候一个对象需要多种类型之间的转化，例如'2023'与2023，String与Number类型的转换比较常见，不明确的类型很有可能导致报错甚至系统漏洞。

可以通过以下方式给ref对象确定类型：

// 得到的类型：Ref<string | number>
const year = ref<string | number>('2020')
year.value = 2020 // 成功！

注意：ref对象不仅可以声明普通的变量，还可以声明对象，例如const year = ref({name:'dd'}), 使用的时候year.value.name即可使用。

setup()

在这段代码中，详细解释了setup()函数的作用

import { ref } from 'vue'

export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    // 将 ref 暴露给模板
    return {
      count
    }
  }
}

setup()函数内部的所有变量等等都可以在<template></template>使用，双向绑定，但是，如果需要所有代码被使用，这时，只需要在script标签后加上setup，这种做法被称为单文件组件。

<script setup> 中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。你可以理解为模板是在同一作用域内声明的一个 JavaScript 函数——它自然可以访问与它一起声明的所有内容。

ref()与setup()的出现，使得响应式开发成为可能，通过这个响应式系统，Vue能够自动追踪数据的变化，并在视图中进行相应的更新，从而实现了数据和视图的双向绑定。这样开发者只需要关注数据的变化，而无需手动更新视图，大大简化了开发流程和提高了开发效率。

Vue3的响应式基础 ｜ 青训营

ref()

setup()

Vue3的响应式基础｜青训营