Vue 3 反应式全局变量更改，但不会重新渲染答案

【问题标题】：Vue 3 reactive global variable changes, but won't re-renderVue 3 反应式全局变量更改，但不会重新渲染
【发布时间】：2021-09-22 00:31:47
【问题描述】：

当我尝试更新反应性“全局变量”的属性时（使用 Vue 3），我遇到了一个问题。当我更改用户名时，这应该（？）重新渲染元素，但事实并非如此。我在这里错过了什么？

<div id="app">
    {{ controller.user.name }}
    <button @click="controller.change">Change</button>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    var controller = {
        user: {
            name: 'Pete'
        },
        change: () => {
            controller.user.name = 'Arnold'
        }
    }
    var reactive = Vue.reactive({controller});
    var app = Vue.createApp({
        data() {
            return reactive
        }
    }).mount('#app')
</script>

它确实显示了初始名称。当按下按钮时，控制器中的名称值会发生变化（您可以在控制台中检查它是否已更改）。只有重新渲染不会发生。

也尝试使用this.controller.user.name，但没有任何运气。

【问题讨论】：

尝试向 div 元素添加“key”属性，将其设置为 key="controller.user.name"

标签： javascript vue.js vuejs3

【解决方案1】：

Vue.reactive 返回a proxy，它观察变化并在需要时触发重新渲染。

您必须使用代理来更改属性以使其具有反应性：

var reactive;
var controller = {
        user: {
            name: 'Pete'
        },
        change: () => {
            reactive.controller.user.name = 'Arnold'
        }
    }
    reactive = Vue.reactive({controller});
    var app = Vue.createApp({
        data() {
            return reactive
        }
    }).mount('#app')

<div id="app">
    {{ controller.user.name }}
    <button @click="controller.change">Change</button>
</div>

<script src="https://unpkg.com/vue@next"></script>

虽然让 vue 处理响应性部分要容易得多：

var app = Vue.createApp({
    data() {
        return {
          name: 'Pete'
        };
    }
}).mount('#app')

<div id="app">
    {{ name }}
    <button @click="name = 'Arnold'">Change</button>
</div>

<script src="https://unpkg.com/vue@next"></script>

如果您想从组件外部更改名称，您仍然可以使用app.name = 'Something' 来更改它。

【讨论】：