为什么在Vue3中正常对象会自动变成React性的？

ih99xse1 于 2023-01-05 发布在 Vue.js

关注(0)|答案(1)|浏览(148)

在this article中有一个例子，它说普通对象不会是“reactive”的。
我在this codesandbox中做了一个测试，发现对normal对象（甚至是normal字符串）的更改可以自动更改视图。

<template>
  {{ personName }} <!-- will change to Amy, why? -->
  {{ person.name }} <!-- will change to Amy, why? -->
  {{ personRef.name }}
  {{ personReactive.name }}
  <button @click="changeName('Amy')">changeName</button>
</template>

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

let personName = "John";
const person = { name: "John" };
const personRef = ref({ name: "John" });
const personReactive = reactive({ name: "John" });
const changeName = (name) => {
  personName = name;
  person.name = name;
  personRef.value.name = name;
  personReactive.name = name;
};
</script>

这是怎么发生的？我在Vue文档中遗漏了什么吗？
我试过Vue SFCPlayground，结果是一样的。

vue.js

来源：https://stackoverflow.com/questions/75001284/why-normal-objects-become-reactive-automatically-in-vue3

1条答案

按热度按时间

ruarlubt1#

正态变量 * 没有 * 变为React性。真正发生的是由changeName()方法引起的重新呈现。重新呈现是由于您更改了React性变量的值而引起的。因此，DOM将更新为正态变量和React性变量的最新正确显示值。
为了说明这一点，我使用以下代码创建了一个fork of your sandbox：

<template>
  {{ personName }}
  {{ person.name }}
  {{ personRef.name }}
  {{ personReactive.name }}
  <button @click="changeReactiveName('Amy')">changeReactiveName</button>
  <button @click="changeNormalName('Fanoflix')">changeNormalName</button>
</template>

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

let personName = "John";
const person = { name: "John" };
const personRef = ref({ name: "John" });
const personReactive = reactive({ name: "John" });

const changeReactiveName = (name) => {
  personRef.value.name = name;
  personReactive.name = name;
};

const changeNormalName = (name) => {
  personName = name;
  person.name = name;
};
</script>

当您通过调用changeNormalName()只更改非React性变量时，更改（正确地）不会导致DOM重新呈现，您也不会看到DOM中反映的更改。
调用changeReactiveName()方法后，DOM将被重新呈现以合并对React变量所做的更改，因此，DOM也将呈现您之前更新的非React变量的新值，并显示Fanoflix。
为了更好地理解，请阅读Vue如何处理渲染：文档

赞(0）回复(0）举报 2023-01-05

我来回答

为什么在Vue3中正常对象会自动变成React性的？

1条答案

相关问题

热门标签

最新问答