vue响应式基础

Vue第二课：响应式基础 ref()

Vue 的核心知识：响应式数据（Reactivity）

1.什么是响应式？

在传统的 JavaScript 钟，如果变量发生变化，html 页面通常不会自动更新。

例如：

let count = 0;

count++;

变量 count 从 0 变成了 1 ，但如果 html 页面本身使用了变更前的 count ，那么原本页面显示的为 0 ,页面不会因为变量变化就自动更新。

而 Vue 的 响应式系统 就可以做到。

二、认识 ref()

ref() 是 Vue 3 中创建响应式数据的常用函数。

1. 导入 ref

import { ref } from "vue";

ref 是 Vue 提供的函数，需要先导入才能使用。

2. 创建响应式变量

const count = ref(0);

解释：

代码	作用
const	声明变量
count	变量名称
ref()	创建响应式数据
0	初始值

这里的 count 不是普通数字，而是一个 Ref 对象，里面保存着数字 0。

3. 读取和修改数据

在 JavaScript 中，需要通过 .value 访问 ref 保存的值。

import { ref } from "vue";

const count = ref(0);

console.log(count.value); // 0

count.value = 10;

console.log(count.value); // 10

count.value++;

console.log(count.value); // 11

注意：虽然 count 使用 const 声明，但没有重新赋值 count 本身，只是修改了它内部的 .value。

三、在 template 中使用 ref

Vue 使用 {{ }} 将 JavaScript 数据显示在 HTML 页面中，这叫作文本插值（Mustache 语法）。

<script setup>
import { ref } from "vue";

const message = ref("Hello Vue 3!");
</script>

<template>
  <h1>{{ message }}</h1>
</template>

页面显示：

Hello Vue 3!

这里有一个非常重要的区别：

使用位置	写法
JavaScript 中	message.value
template 模板中	{{ message }}

因为 Vue 会在模板中自动解包顶层 ref，所以不需要手动添加 .value。

记住：

JavaScript 中使用 .value，模板中直接使用变量名。

四、通过按钮修改响应式数据

接下来结合 Vue 的事件绑定语法 @click。

<script setup>
import { ref } from "vue";

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <h1>当前数字：{{ count }}</h1>

  <button @click="increment">加 1</button>
</template>

执行过程：

点击按钮

执行 increment() 函数

count.value++

Vue 自动更新页面上的数字

其中：

• @click：监听点击事件。
• increment：点击时执行的函数。
• count.value++：让响应式数据增加 1。
• {{ count }}：在页面显示最新的数字。

@click 相当于 v-on:click 的简写。

五、ref 与普通变量的区别

let num = 0;

const count = ref(0);

对比	普通变量 num	响应式变量 count
声明方式	let num = 0	const count = ref(0)
修改方式	num++	count.value++
自动触发 Vue 页面更新	否	是
模板中使用	{{ num }}	{{ count }}

这里的普通变量指的是在 <script setup> 中声明的普通局部变量。它可以显示在模板中，但修改它本身不会触发 Vue 的响应式更新。