Vue.js 为什么普通对象在 Vue3 中自动变成响应式的

发布于01月04日

在this article年里有一个例子.它说正常的物体不会是"react 性的".

我在this codesandbox中进行了一次测试，发现更改正常对象(即使是正常字符串)可以自动更改视图.

<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 SFC Playground的，结果是一样的.

推荐答案

正常变量是not变得被动.真正发生的是由changeName()方法引起的re-render.重新渲染是因为您更改了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如何处理渲染:docs

Vue.js相关问答推荐

Vue.js 为什么普通对象在 Vue3 中自动变成响应式的

推荐答案

Vue.js相关问答推荐

在Nuxt项目中混合Scrolltrigger与Lenis

将事件监听器绑定到动态元素

我可以手动访问 vue-router 解析器吗？

点击屏幕的任何位置都会禁用v-overlay

如何在vue中获取特定类别的产品列表

Vuex：如何等待动作完成？

v-for 内部的组件

动态插入字符串上的 Vue 事件处理程序不起作用

CLI 3 - 如何为 CSS/Sass 创建vendor bundle ？

使用 azure devops 发布管道部署 Vue.js 应用程序

单击链接会更改 url，但不会更改页面上的内容/数据

怎样1秒后自动隐藏VueJS中的元素

如何使用 VueJS / Typescript 导入 JSON 文件？

所有 vue props和数据都给出错误 Property属性在 type 上不存在，带有 typescript

Vue如何将动态ID与v-for循环+字符串中的字段连接起来？

Vue Js如何在单个文件模板中使用mixins？

NPM：403 禁止 - PUT http：//registry.npmjs.org/[package-name] - 禁止

Vue.JS 2.0 修改不相关数据时速度慢

如何在 vue3 中的setup方法中发出事件？

vuejs 复制数据对象和删除属性也会从原始对象中删除属性