Vue 3修改reactive全局变量后页面未触发重渲染，是什么原因？

• 你最初声明的controller是普通JS对象，传入Vue.reactive生成响应式代理后，原始的controller仍是非响应式的普通对象，二者是不同的引用。你的change方法中修改的是原始非响应式对象，自然无法触发视图更新。
• change方法使用箭头函数定义，不会绑定调用上下文的this，即便你尝试用this.controller修改，也无法指向组件实例上的响应式属性，修改还是作用在原始普通对象上。

可任选以下一种方式修改：

方案1：直接定义响应式对象，调整方法写法 #

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

方案2：将方法提取到组件methods中，避免箭头函数 #

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

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

方案3：使用Vue3推荐的setup写法 #

<script setup>
import { reactive } from 'vue'
const controller = reactive({
  user: {
    name: 'Pete'
  },
  change() {
    this.user.name = 'Arnold'
  }
})
</script>

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

内容的提问来源于stack exchange，提问作者Xriter