vue3操作代理数据对页面更新的影响

前端小大白
272 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

在vue3中，响应式数据主要是通过ref和reactive来实现，ref用于基础数据类型，reactive用于复杂数据类型。这篇文章我们着重来看下reactive。（仅针对初学者）

先来看个例子：

<script lang="ts" setup>
import { reactive } from 'vue';

const obj = {
    name: '张三',
    age: 18
}
const user = reactive(obj)
console.log(user)
</script>

定义了一个对象，拥有name和age属性，通过reactive将obj变成一个响应式数据，那通过reactive包装过的user是个什么东西呢，我们看下结果：

image.png

返回的是一个Proxy代理的对象，被代理的目标对象就是我们上面定义的obj，简单来说就是，user是代理对象，obj是目标对象。

接下来我们写一个方法，去修改obj属性的值

<template>
    <h2>{{user.name}}</h2>
    <h2>{{user.age}}</h2>
    <button @click="handleChange">修改属性值</button>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const obj = {
    name: '张三',
    age: 18
}
const user = reactive(obj)

const handleChange = () => {
    obj.age ++
}
</script>

test.gif 当我们点击按钮的时候，页面并没有任何变化，那数据变了吗？打印看一下

test1.gif 数据变了，但是页面没有更新，啥原因呢，因为obj不是一个响应式数据。接下来我们修改user试试

<template>
    <h2>{{user.name}}</h2>
    <h2>{{user.age}}</h2>
    <button @click="handleChange">修改属性值</button>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const obj = {
    name: '张三',
    age: 18
}
const user = reactive(obj)

const handleChange = () => {
    user.age++
    console.log(user)
}
</script>

再看下结果

test2.gif 数据变了，页面也跟着变了，既然user的数据变了，那obj变了吗？答案是肯定的

test3.gif 由此我们可以得出一个结论：当我们操作代理对象的时候，目标对象的数据也会发生变化，如果我们想在操作对象的时候页面也随之更新，那也是操作代理对象。

到这里可能有很多人要说了，这也太水了吧，这不就是一个reactive实现数据的响应式吗，是的，就是一个api而已。文章开头我也提到了，此文仅针对初学者，也是希望能够加深初学者对于数据响应式概念的理解，仅此而已。

avatar
文章
阅读
粉丝