Vue3：更改普通对象会导致重新渲染答案

【问题标题】：Vue3: changing a normal object causes rerenderVue3：更改普通对象会导致重新渲染
【发布时间】：2021-08-21 08:40:12
【问题描述】：

在下面的代码中，state 只是一个普通对象，但更改了它的 prop：message（同样，只是一个普通的 prop）会导致重新渲染。为什么？

const App = {
  setup() {
    const name = Vue.ref("");

    Vue.watch(name, () => state.message = `Hello ${name.value}`);

    const state = {
      name,
      message: "Welcome stranger"
    };
    return state;
  }
};

Vue.createApp(App).mount("#root");

<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  name: <input v-model="name" /> <br/> message: {{ message }}
</div>

【问题讨论】：

因为你正在改变name ref（通过v-model）
所以你的意思是 Vue 批量更新，因此它会等待所有观察者处理程序等在渲染之前触发，所以它只渲染一次（在 name 更改上）并将更改拾取到message 只是巧合吗？换句话说，Vue 并没有真正在 message 更改时重新渲染？
Vue 实例监视虚拟 DOM。当我们修改某些属性时，Vue 实例会重新创建虚拟 DOM 并检查与“旧”虚拟 DOM 的差异。如果它不同，那么它只会更新“真实”DOM 中的特定部分。
是的，没错。 v3.vuejs.org/guide/…

标签： vue.js vuejs3

【解决方案1】：

正如@MichalLevý 所指出的，Vue 并没有真正观察或重新渲染state.message 的变化。 message 中的更改仅反映在 DOM 中，因为批量更改以响应 name 更改。

这可以通过在计时器处理程序中更改state.message 来显示。没有重新渲染。

const App = {
  setup() {
    const name = Vue.ref("");

    Vue.watch(name, () => state.message = `Hello ${name.value}`);
    
    setTimeout(() => {
      state.message = "only message changed";
    }, 2000);

    const state = {
      name,
      message: "Welcome stranger"
    };
    return state;
  }
};

Vue.createApp(App).mount("#root");

<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  name: <input v-model="name" /> <br/> message: {{ message }}
</div>

【讨论】：