当前位置：首页 > news >正文

（2）手摸手-学习 Vue3 之变量声明【ref 和 reactive】

news 2025/7/5 7:07:00

手摸手-学习 Vue3 之变量声明【ref 和 reactive】

前言
ref
reactive

前言

vue3 前端代码开发过程中，必然会涉及变量声明，会用到：ref、reactive 。本章节进行讲解说明。

演示的项目，经处理后的结构如下：
在这里插入图片描述

ref

用途：ref 声明变量时，使用。常用于声明 基本类型（此外，也可声明对象）

具体更多细节，参考官网：
（1）https://cn.vuejs.org/api/reactivity-core.html#ref
（2）https://cn.vuejs.org/glossary/#ref

功能讲解，演示如下：

开发代码如下：

<template><div>前端开发：{{ name }}</div><button @click="changeName">改变名称</button>
</template><script lang="ts" setup>
let name = 'Vue3'
function changeName() {console.log('name 变量修改之前：', name)name = '一起学习吧~'console.log('name 变量修改之后：', name)
}
</script><style lang="scss" scoped></style>

运行后，页面效果如下：
说明浏览器控制台区域，是需手动按F12调出来的，默认不展示。
期望实现的需求功能：
当点击 “改变名称” 这个按钮时，页面上内容 Vue3 变成一起学习吧~

？思考：实际上，当点击按钮时，
(1) 代码层面上的变量 name 值，能否被修改？
(2) 页面内容 Vue3 能否变成一起学习吧~ ?

点击 “改变名称” 按钮，进行验证：
在这里插入图片描述
从验证结果上来看，变量值修改成功，但页面内容没有展示。
此时，若想实现页面内容 “联动” 效果，可使用 ref 进行变量声明，将其改为响应式方式。

什么是响应式？

参考官网：https://cn.vuejs.org/glossary/#reactive-effect

在这里插入图片描述

更改为响应式方式后，
打开浏览器，控制台有输出内容：变量为一个RefImpl对象，期内有一个value属性（如下）
在这里插入图片描述
再次尝试点击 “改变名称” 按钮，修改页面上的内容，
但是，仍然没有发生变化，如下：

变量已经改为响应式的了，但页面还是没有变化

原因：代码中，操作变量的方式不对，需调用 .value ，原来的代码（如下）并未使用.value

调整后的代码如下：

代码调整完成后（使用 .value 修改变量值），
最后，再次进行功能验证，已可正常同步联动，效果如下：
在这里插入图片描述

reactive

用途：ref 声明变量时，使用。只可用于声明 对象类型（不可用于基本类型）

具体更多细节，参考官网：https://cn.vuejs.org/api/reactivity-core.html#reactive

功能讲解，演示如下：

创建如下对象，当在页面上，点击“改变名称”按钮，验证是否可同步修改变量、以及页面是否会同步显示？

<template><div>客户姓名：{{ client.name }}</div><button @click="changeName">改变名称</button>
</template><script lang="ts" setup>
let client = { name: '张三', age: 10 }console.log('声明的变量是：', client)function changeName() {console.log('变量修改之前，属性值：', client.name)client.name = '诸葛亮'console.log('变量修改之后，属性值：', client.name)
}
</script><style lang="scss" scoped></style>