Vue 中 reactive创建对象类型响应式数据的方法
作者：阿贾克斯的黎明
在 Vue 的开发世界里，响应式数据是构建交互性良好应用的基础。之前我们了解了ref用于定义基本类型的数据，今天就来深入探讨一下如何使用reactive定义对象类型的响应式数据。
一、从普通对象到响应式对象
假设我们要展示汽车的信息，先创建一个普通的汽车对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reactive Example</title>
</head>
<body>
<div id="app">
<p>一辆{{ car.brand }}车价值{{ car.price }}万</p>
<button @click="changePrice">修改汽车的价格</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, reactive } = Vue;
const app = createApp({
setup() {
// 定义普通汽车对象
let car = {
brand: '奔驰',
price: 100
};
const changePrice = () => {
car.price += 10;
};
return {
car,
changePrice
};
}
});
app.mount('#app');
</script>
</body>
</html>在上述代码中，我们定义了一个car对象，并尝试在按钮点击时修改价格。但运行代码后会发现，点击按钮，页面上汽车的价格并不会更新。这是因为car只是一个普通对象，Vue 无法追踪其变化。
这时，reactive就派上用场了。我们只需要将普通对象用reactive包裹起来，就能让它变成响应式对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reactive Example</title>
</head>
<body>
<div id="app">
<p>一辆{{ car.brand }}车价值{{ car.price }}万</p>
<button @click="changePrice">修改汽车的价格</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, reactive } = Vue;
const app = createApp({
setup() {
// 使用reactive创建响应式汽车对象
const car = reactive({
brand: '奔驰',
price: 100
});
const changePrice = () => {
car.price += 10;
};
return {
car,
changePrice
};
}
});
app.mount('#app');
</script>
</body>
</html>修改后的代码，当点击按钮时，页面上汽车的价格会随之更新。这就是reactive的神奇之处，它能将普通对象转化为响应式对象，Vue 可以追踪其变化并更新视图。
二、reactive 与 Proxy
当我们使用reactive包裹对象后，在控制台打印这个对象，会发现它变成了一个Proxy。Proxy是原生 JS 提供的功能，不需要引入第三方库。它就像是一个代理，在访问和修改对象属性时起到拦截和处理的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reactive Proxy</title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { reactive } = Vue;
const car = reactive({
brand: '奔驰',
price: 100
});
console.log(car);
</script>
</body>
</html>在控制台查看打印结果，会看到Proxy相关的信息。我们真正的数据其实藏在target属性里，但平时开发中，直接查看蓝色显示的属性部分就可以获取和修改数据，不用深入探究Proxy内部结构。
三、处理数组类型的响应式数据
在 JavaScript 中，数组也属于对象范畴，reactive同样可以将数组转化为响应式数据。比如，我们要展示一个游戏列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reactive Array</title>
</head>
<body>
<div id="app">
<h2>游戏列表</h2>
<ul>
<li v-for="game in games" :key="game.id">{{ game.name }}</li>
</ul>
<button @click="changeFirstGame">修改第一个游戏的名字</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, reactive } = Vue;
const app = createApp({
setup() {
// 定义普通游戏数组
let games = [
{ id: '01', name: '王者荣耀' },
{ id: '02', name: '原神' },
{ id: '03', name: '三国志' }
];
const changeFirstGame = () => {
games[0].name = '流星蝴蝶剑';
};
return {
games,
changeFirstGame
};
}
});
app.mount('#app');
</script>
</body>
</html>上述代码中，我们尝试在按钮点击时修改第一个游戏的名字，但直接运行会发现页面并不会更新。这是因为games数组是普通数组，不是响应式的。
使用reactive将数组变成响应式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reactive Array</title>
</head>
<body>
<div id="app">
<h2>游戏列表</h2>
<ul>
<li v-for="game in games" :key="game.id">{{ game.name }}</li>
</ul>
<button @click="changeFirstGame">修改第一个游戏的名字</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, reactive } = Vue;
const app = createApp({
setup() {
// 使用reactive创建响应式游戏数组
const games = reactive([
{ id: '01', name: '王者荣耀' },
{ id: '02', name: '原神' },
{ id: '03', name: '三国志' }
]);
const changeFirstGame = () => {
games[0].name = '流星蝴蝶剑';
};
return {
games,
changeFirstGame
};
}
});
app.mount('#app');
</script>
</body>
</html>修改后，点击按钮，页面上第一个游戏的名字就会更新，这体现了reactive处理数组响应式的能力。
四、reactive 的深层次响应
reactive定义的响应式数据是深层次的，也就是说，无论对象的层级有多深，它都能追踪到数据的变化。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reactive Deep</title>
</head>
<body>
<div id="app">
<h2>测试</h2>
<p>{{ obj.a.b.c }}</p>
<button @click="changeObj">修改数据</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, reactive } = Vue;
const app = createApp({
setup() {
// 定义多层级普通对象
let obj = {
a: {
b: {
c: '法号666'
}
}
};
const changeObj = () => {
obj.a.b.c = '法号999';
};
return {
obj,
changeObj
};
}
});
app.mount('#app');
</script>
</body>
</html>上述代码中，直接修改多层级对象的属性，页面不会更新。使用reactive包裹对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reactive Deep</title>
</head>
<body>
<div id="app">
<h2>测试</h2>
<p>{{ obj.a.b.c }}</p>
<button @click="changeObj">修改数据</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, reactive } = Vue;
const app = createApp({
setup() {
// 使用reactive创建响应式多层级对象
const obj = reactive({
a: {
b: {
c: '法号666'
}
}
});
const changeObj = () => {
obj.a.b.c = '法号999';
};
return {
obj,
changeObj
};
}
});
app.mount('#app');
</script>
</body>
</html>修改后，点击按钮，页面上的数据会随着对象属性的改变而更新，证明了reactive的深层次响应特性。
通过以上内容，我们全面了解了 Vue 中reactive创建对象类型响应式数据的用法，无论是普通对象、数组还是多层级对象，reactive都能让它们具备响应式能力，为我们开发高效、交互性强的 Vue 应用提供了有力支持。
到此这篇关于Vue 中 reactive：创建对象类型响应式数据的利器的文章就介绍到这了,更多相关Vue reactive响应式数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！