灵魂与肉身有一样要常在路上

大家都在搜：

当前位置：首页 > 程序开发 > Web > VUE3快速入门（5）——响应式数据

VUE3快速入门（5）——响应式数据

bnbplayer1个月前 (04-15)Web654

![202402081422145633320.png](https://xinz.run/zb_users/upload/2024/02/202402081422145633320.png "202402081422145633320.png")

本节讲述了如何用ref和reactive实现基本数据类型和对象数据类型的响应式更新，同时讲述了在何种情况下会失去响应式功能以及对应的解决办法。

------------

# 1. 什么是响应式
响应式是指当变量的值变化后，\<template>的内容同步自动更新。Vue2的选项式API中的data默认为响应式，但Vue3的组合式API为非响应式，即无法自动更新。因此需要用ref和reactive进行处理。

# 2.基本数据类型的响应式处理
基本数据类型是指字符串和数字，**这种类型只能用ref处理**。

## 2.1 表单输入的响应式更新
本节实现HTML标签实时显示表单内容的功能。

在上一节的基础上增加一个HTML元素，用来实时显示表单的输入值：
```html
<h2>input框的内容： {{ input_content }}</h2>
<input v-model="input_content"/>
```

修改\<script>代码：
```javascript
import { ref } from 'vue'
let input_content = ref('');
```

对比上一节代码(2.2小节)，input_content此时通过ref进行了定义。执行代码，当在input框内输入数据时，\<h2>标签的内容将同步更新，此时的input_content为响应式数据。

## 2.2 代码操作的响应式更新
本节实现按钮单击实时更改HTML标签内容的功能。

新增按钮并绑定事件：
```html
<button @click="add()">+1</button>
```

事件处理方法：
```javascript
function add()
{
	input_content.value += 1;//注意：必须通过“ref的实例名.value.字段”的形式更新
}
```

单击按钮，页面上的数字加1，即通过代码实现了页面的更新。

# 3. 对象数据类型的响应式处理

对象数据类的响应式处理既可以用ref又可以用reactive。

本节将实现通过输入框更改对象的一个字段，并实时显示的功能。\<template>部分代码如下：
```html
<h2>电话号码： {{ worker.tel }}</h2>
<input v-model="tel"/>
<button @click="changeTel(tel)">修改电话</button>
```

## 3.1 通过ref处理
定义表单绑定的变量、事件方法，并通过ref定义一个对象：
```javascript
import { ref } from 'vue'
let worker = ref({
	name: "Jesse",
	age: 12,
	mail: "3898*******@qq.com",
	tel: "136****615"
});

let tel = "";

function changeTel(content: any): any
{
	worker.value.tel = content;//同样通过“ref的实例名.value.字段”的形式更新
}
```

输入新的号码并点击按钮，将更新worker对象的tel字段，且在页面同步更新。

## 3.2 通过reactive处理
修改代码如下：
```javascript
import { reactive } from 'vue'
let worker = reactive({
	name: "Jesse",
	age: 12,
	mail: "3898*******@qq.com",
	tel: "136****615"
});

let tel = "";

function changeTel(content: any): any
{
	worker.tel = content;//注意此处与ref的区别，不再需要.value
}
```
# 4. 丢失响应功能的情况
当整体替换对象或解构对象时，可能会丢失响应式功能。

## 4.1 对象类型的字段批量更新
很多时候希望将服务器返回的数据直接赋值给对象，从而更新多个的字段。在JS/TS里，服务器返回的数据被视为一个新的对象，如果采用直接赋值的方式会失去响应式功能。
```javascript
//之前定义的对象
let worker = reactive({
	name: "Jesse",
	age: 12,
	mail: "3898*******@qq.com",
	tel: "136****615"
});

function getPost(content: any): any
{
	let ajax_obj = JSON.parse(content);//解码JSON，转换成对象
	/*
	假设ajax_obj对象如下：
	{
		name: "Alice",
		age: 14,
		mail: "1234*******@qq.com",
		tel: "132****777"
	}
	*/
	
	worker = reactive(ajax_obj)//尝试通过这样的方式更新多个字段的内容将会失去响应式功能。
}
```

### 4.1.1 逐字段赋值
```javascript
function getPost(content: any): any
{
	let ajax_obj = JSON.parse(content);//解码JSON，转换成对象
	
	worker.name = ajax_obj.name;
	wroker.age = ajax_obj.age;
	//...
}
```
这种方法适合字段较少的情况。

### 4.1.2 使用Object.assgin
Object.assgin的主要功能是对象合并，第一个参数是原始对象，后面的参数是要合并的多个对象。但使用Object.assgin在某些情况可能不适用。
```javascript
function getPost(content: any): any
{
	let ajax_obj = JSON.parse(content);//解码JSON，转换成对象
	
	worker = Object.assgin(worker, ajax_obj);
}
```

### 4.1.3 使用ref
将原始对象的定义改为ref即可。
```javascript
//之前定义的对象
let worker = ref({
	name: "Jesse",
	//...
});

function getPost(content: any): any
{
	let ajax_obj = JSON.parse(content);//解码JSON，转换成对象
	
	worker.value = ajax_obj;//通过value属性直接赋值
}
```

### 4.1.4 嵌套定义，变为部分字段更新
如果非要用reactive且不想用Object.assgin，则可以采用此方法。
```javascript
//之前定义的对象
let worker =reactive({
	data: {
		name: "Jesse",
		//...
	}
});

function getPost(content: any): any
{
	let ajax_obj = JSON.parse(content);//解码JSON，转换成对象
	
	worker.data = ajax_obj;//相当于只更新data字段
}
```

## 4.2 提取一个或多个字段的值
有时只需要使用对象的部分字段，则经过对象的解构后，新定义的变量将失去响应功能。如：
```javascript
let worker = ref({
	name: "Jesse",
	//...
});

let {name, age} = worker;//提取worker中的部分字段，这样定义会让name, age丢失响应功能
```

### 4.2.1 使用toRefs批量处理
```javascript
import { toRefs } from 'vue'
let {name, age} = toRefs(worker);//此时name和age为响应式
//注意更新数据仍然需要使用.value
name.value = "...";
age.value += 1;
```

### 4.2.2 使用toRef逐个处理
toRef方法的参数为：toRef(源对象，字段名)
```javascript
import { toRef } from 'vue'
let name = toRef(worker, 'name');//此时name和age为响应式
let age = toRef(worker, 'age');//此时name和age为响应式
//注意更新数据仍然需要使用.value
name.value = "...";
age.value += 1;
```

# 5. 关于对象重新赋值导致响应式失效的解释
1. ref 定义数据（包括对象）时，都会变成 RefImpl(Ref 引用对象) 类的实例，无论是修改还是重新赋值都会调用 setter，都会经过 reactive 方法处理为响应式对象。

2. 但是 reactive 定义数据（必须是对象），是直接调用 reactive 方法处理成响应式对象。如果重新赋值，就会丢失原来响应式对象的引用地址，变成一个新的引用地址，这个新的引用地址指向的对象是没有经过 reactive 方法处理的，所以是一个普通对象，而不是响应式对象。解构同理。

# 6. 总结
- 组合式API必须通过ref和reactive定义数据才能实现响应式功能；
- 模板中使用对象的某个字段，直接通过“{{实例名.字段名}}”实现，不受ref或reactive的影响；
- ref能处理任何数据，但reactive只能定义对象类型；
- ref的更新必须通过.value字段，reactive直接赋值；
- 特别注意，当需要用后端返回的对象去替换（无论返回的对象字段内容有几个跟源对象不一致）源对象时，如果整体直接赋值可能将丢掉响应式功能；
- 特别注意，如果解构对象还需要保持响应式，则需要用toRefs或toRef处理。

扫描二维码推送至手机访问。

本文链接：https://xinz.run/post/9.html

标签: VUE

分享给朋友：

返回列表

上一篇：VUE3快速入门（4）——Setup语法糖与数据绑定

下一篇：VUE3快速入门（6）——计算属性

“VUE3快速入门（5）——响应式数据” 的相关文章

VUE3快速入门（1）——搭建开发环境

教程其实是由站长自己的学习笔记整理而来。本系列教程用于VUE3的快速入门，仅讲解最基础的知识，旨在帮助大家搭建VUE技术的大致框架，从而在做实际项目的过程中快速定位问题，找到解决方向。教程直接从vite等工具的使用开始，以VUE最强大的组件为切入点，逐渐添加数据绑定、DOM事件处理、路由等内容，不断完善功能，让读者尽快上手小项目，缩短学习周期。每篇教程后面留有拓展学习与思考小节，读者可通过该小节提出的问题或要求进行拓展学习，由点及面，丰富学习内容，并培养技术迁移和举一反三的能力。特别地，本系列教程适合做过前端开发但技术较陈旧（jQuery、HTML4、前后端无分离）的读者学习，不会讲解HTML标签、CSS、JS/ES6语法等内容，因此不适合对前端开发一无所知的小白。学习本系列教程需要具备如下知识或能力： JavaScriptHTML及CSSES6语法(TypeScript)cmd命令系统环境变量配置面向对象的概念（方法、属性、字段等）具有控件的概念以及封装、复用的思想如读者的上述知识有所欠缺，建议先完善web开发的基本知识体系。参考学习网站：菜鸟教程或百度、ChatGPT等。站长自己学习的资料来源于《尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程》，因此建议读者配合该视频学习更多技术细节。 1. 安装Node.js下载Node.js： NodeJS下载到官网下载自己系统对应的版本，下载完成后解压，可以看到里面有一个node.exe的可执行文件。把Node添加到系统环境变量里面，打开cmd命令行，输入npm -v，如果出现版本号，说明已经安装正确。设置国内镜像： npm config set registry http://registry.npmmirror.com 2. 创建工程安装好 npm 之后，直接可以创建vue3工程。执行命令： npm create vue@latest 其中第一次运行要求安装create-vue@latest，输入“y”回车即可。 3. 设置工程选项根据实际情况填写选项，其中建议使用TypeScript和Vue Router，工程名字不要出现中文和空格。参考配置如下： √ 请输入项目名称： ... vue3-test √ 是否使用 TypeScript 语法？ ... 否 / 是 √ 是否启用 JSX 支持？ ... 否 / 是 √ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是 √ 是否引入 Pinia 用于状态管理？ ... 否 / 是 √ 是否引入 Vitest 用于单元测试？ ... 否 / 是 √ 是否要引入一款端到端（End to End）测试工具？ » 不需要 √ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是 4. 执行在cmd中用cd命令打开刚才的工程目录，再分别执行命令： npm install npm run dev 会看到npm将下载一些列的依赖包。执行第二条指令后，会出现如下类似的提示： VITE v5.1.4 ready in 708 ms [ Local: http://127.0.0.1:5173/ [ Network: use --host to expose [ press h + enter to show help 将地址复制到浏览器，会看到“You did it!”的页面。 5. 在VSCODE中开发下载并安装VSCode后，依次选择“文件”、“打开文件夹”，选择VUE工程目录即可。可根据IDE右下角的提示安装相关的拓展。 6. 拓展学习与思考6.1 npm常见命令速查6.1.1. npm本地安装与全局安装npm install <模块名> # 本地安装，则是将模块下载到当前命令行所在目录% npm install -g <模块名> # 全局安装，模块将被下载安装到【全局目录】中 6.1.2. 配置全局目录及缓存目录分别使用以下命令设置全局的安装包目录及缓存目录： npm config set prefix <目录> npm config set cache <目录> 6.1.3. 其他常见命令npm init # npm 初始化当前目录 npm i # 安装所有依赖 npm i <模块名> # 安装模块到默认dependencies npm i <模块名> -g # 会安装到配置的全局目录下 npm i <模块名> -S # 安装包信息将加入到dependencies生产依赖 npm i <模块名> -D # 安装包信息将加入到devDependencies开发依赖 npm i <模块名>\@1.8.3 # 安装指定的1.8.3版本注意，i是install的简写。 npm uninstall <模块名> # 卸载模块，但不卸载模块留在package.json中的对应信息 npm uninstall <模块名> -g # 卸载全局模块 npm uninstall <模块名> --save # 卸载模块，同时卸载留在package.json中dependencies下的信息 npm uninstall <模块名> --save-dev # 卸载模块，同时卸载留在package.json中devDependencies下的信息 npm update <模块名> # 更新最新版本的模块 npm update <模块名>@2.1.0 # 更新到指定版本号的模块 npm install <模块名>@latest # 可以直接更新到最后一个新版本 npm root # 查看项目中模块所在的目录 npm root -g # 查看全局安装的模块所在目录 npm list 或者 npm ls # 查看本地已安装模块的清单列表 npm view <模块名> dependencies # 查看某个模块对于各种模块的依赖关系 npm view <模块名> version # 查看模块最新的版本号 npm view <模块名> versions # 查看模块所有历史版本号 npm view <模块名> # 查看最新的模块版本的信息 npm info <模块名> # 查看模块的详细信息，等同于上面的npm view npm list <模块名> 或 npm ls <模块名> # 查看本地已安装的模块的详细信息 npm view <模块名> repository.url # 查看模块的来源地址 6.2 思考 VUE技术栈...

VUE3快速入门（4）——Setup语法糖与数据绑定

本文讲述了如何使用Setup语法糖简化代码，以及如何获取表单数据。在本系列后续的文章中，均使用setup语法糖写法。 1. Setup语法糖使用Setup导出数据或者方法必须使用return，当代码过多时就变得复杂。使用Setup语法糖无需显式声明要导出的内容，也不必再写setup方法名。 1.1 声明组件导出首先将<script>代码中的setup方法部分全部移除，仅留下组件导出声明： <script lang="ts"> export default { name: "MyComp", } 1.2 创建setup语法糖其次，新增一个<script>片段，如下： <script lang="ts" setup> </script> 注意： lang属性对应的语言必须与上一个<script>的代码语言一致，不得JS、TS混用；setup语法糖所在的<script>必须增加一个setup属性 1.3 在setup语法糖标签内写代码最后将原本setup方法里面的内容除了return外全部放入后一个<script>标签内，完整代码如下： <script lang="ts" setup> let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; function add(a: number, b: number): number{ return a + b; } function show(content: any): any { alert(content); } //无需return {author, mail, ...} </script> 这样，凡是在setup语法糖内定义的数据和方法全部自动导出，不用再return。 2. 数据绑定数据绑定是指获取表单中填写的值。 2.1 创建一个表单在合适位置增加一个表单标签： <input name=””/> 2.2 创建变量并绑定表单的值创建一个变量，用于接收表单的值： let input_content = "" 在表单标签内使用v-model指令将表单值与该变量绑定： <input name="" v-model="input_content"/> 2.3 测试修改button的click事件，单击时弹出表单的值： <button @click="show(input_content)">单击</button> 其中show方法代码： function show(content: any): any { alert(content); } 3. 总结使用setup语法糖就无需再显式声明导出的内容，但要求两个<script>片段语言类型一致；v-model指令用于将表单值与变量绑定；v-model指令仅能用于表单相关的标签。...

VUE3快速入门（6）——计算属性

本节讲述了Vue3的计算属性的用法。 1. 什么是计算属性计算属性用于对一些需要展示到模板上的数据进行处理，虽然用函数也能实现，但计算属性会自动缓存，只有值发生变化时才重新计算，加快运行效率。 2. 基本使用方法本节实现一个功能，将输入的电话号码隐去中间四位。 2.1 引用computedimport { computed } from 'vue'; 2.2 使用computed方法定义一个计算属性let encoded_tel = computed(() => { let part_1 = worker.value.tel.substring(0, 3); let part_2 = worker.value.tel.slice(-4); return part_1 + "****" + part_2; }); 其中worker是由ref定义的响应式数据，通过输入框修改电话号码并实时显示的方法参考上一节：VUE3快速入门（5）——响应式数据。 2.3 在模板中使用将上一节的模板变量改为： <h2>电话号码： {{ encoded_tel }}</h2> 这样，当输入电话号码并点击“修改”后，号码将隐去中间四位。 3. 计算属性的读写性如果要通过代码修改计算属性的值，则： function changeComputed() { encoded_tel.value = "..."; } 3.1 只读第二节定义计算属性的方式属于只读属性，采用上述方法修改计算属性的值会报错。 3.2 可读可写要修改计算属性的值，必须定义getter和setter： let encoded_tel = computed(() => { get(){ let part_1 = worker.value.tel.substring(0, 3); let part_2 = worker.value.tel.slice(-4); return part_1 + "****" + part_2; }, set(val){ //针对val的逻辑处理代码 } }); 4. 总结计算属性与函数类似，但计算属性有缓存，如多次调用其值不变，则仅计算一次；计算属性如果要通过代码修改值，则必须定义getter和setter；对计算属性的value字段赋值，仅仅触发setter的调用，实际上并没有修改任何值，还需要在setter里面编写逻辑处理代码！...

行者无疆

大家都在搜：

VUE3快速入门（5）——响应式数据

“VUE3快速入门（5）——响应式数据” 的相关文章

VUE3快速入门（1）——搭建开发环境

VUE3快速入门（4）——Setup语法糖与数据绑定

VUE3快速入门（6）——计算属性

发表评论

Copyright ©行者无疆 2010-2023.署名-保持一致-不得商用.

Powered By Z-BlogPHP. Theme by TOYEAN.

行者无疆

大家都在搜：

VUE3快速入门（5）——响应式数据

“VUE3快速入门（5）——响应式数据” 的相关文章

VUE3快速入门（1）——搭建开发环境

VUE3快速入门（4）——Setup语法糖与数据绑定

VUE3快速入门（6）——计算属性

发表评论取消回复

Copyright ©行者无疆 2010-2023.署名-保持一致-不得商用.

Powered By Z-BlogPHP. Theme by TOYEAN.

发表评论