在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,结果是一样的。
1条答案
按热度按时间ruarlubt1#
正态变量 * 没有 * 变为React性。真正发生的是由
changeName()
方法引起的重新呈现。重新呈现是由于您更改了React性变量的值而引起的。因此,DOM将更新为正态变量和React性变量的最新正确显示值。为了说明这一点,我使用以下代码创建了一个fork of your sandbox:
当您通过调用
changeNormalName()
只更改非React性变量时,更改(正确地)不会导致DOM重新呈现,您也不会看到DOM中反映的更改。调用
changeReactiveName()
方法后,DOM将被重新呈现以合并对React变量所做的更改,因此,DOM也将呈现您之前更新的非React变量的新值,并显示Fanoflix
。为了更好地理解,请阅读Vue如何处理渲染:文档