vuejs 3 data options 属性不再响应外部对象

Question

我有一个应用程序，它通过共享一个全局javascript对象来与其他应用程序共享一个外部模块。

其中一个应用程序是用vue 2开发的，当全局对象在外部模块中更新时，vue 2的option data属性会完美更新，而在vue 3中则不会。我也尝试了新的反应属性，但什么也没做，这是一个错误吗？

无法对外部模块进行任何更改，因为它与其他应用程序共享，我如何让它在vue 3中工作？

以下是一些测试链接:

Vue 2共享外部对象

<script src="https://unpkg.com/vue"></script>
<script>
var EXTERNAL_OBJECT={
    name:"Bob",
    list:[{name:"Ivan"}]
}

function change_object(){
    EXTERNAL_OBJECT.name+="+++"
    EXTERNAL_OBJECT.list.push({name:"Carl"})
    

}
</script>

<button onClick="change_object()">change external object</button>

<div id="app">

  <div>
  {{share.name}}
  </div>
  <div v-for="item in share.list">
   {{item.name}}
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    share:EXTERNAL_OBJECT
  }
})
</script>

Vue 3共享外部对象

<script src="https://unpkg.com/vue@3.2.4/dist/vue.global.js"></script>
<script>
var EXTERNAL_OBJECT={
    name:"Bob",
    list:[{name:"Ivan"}]
}

function change_object(){
    EXTERNAL_OBJECT.name+="+++"
    EXTERNAL_OBJECT.list.push({name:"Carl"})
    

}
</script>

<button onClick="change_object()">change external object</button>

<div id="app">

  <div>
  {{share.name}}
  </div>
  <div v-for="item in share.list">
   {{item.name}}
  </div>
</div>

<script>
const app = Vue.createApp({
  data () {
    return {
      share:EXTERNAL_OBJECT
    }
  }
  
});
app.mount('#app')
</script>

Vue 3 使用反应式属性共享外部对象

<script src="https://unpkg.com/vue@3.2.4/dist/vue.global.js"></script>
<script>
var EXTERNAL_OBJECT={
    name:"Bob",
    list:[{name:"Ivan"}]
}

function change_object(){
    EXTERNAL_OBJECT.name+="+++"
    EXTERNAL_OBJECT.list.push({name:"Carl"})
}
</script>

<button onClick="change_object()">change external object</button>

<div id="app">

  <div>
  {{share.name}}
  </div>
  <div v-for="item in share.list">
   {{item.name}}
  </div>
 
</div>
<script>
const { createApp, reactive } = Vue
const app = createApp({
setup(){
 let share = reactive(EXTERNAL_OBJECT)
  return {
  share
  }
},
  data () {
    return {
    msg:"reactive test"
    }
  }
  
});
app.mount('#app')
</script>

谢谢

Answer 1

这有点难读...我只看Vue3的例子。你展示了多少文件？

无法直接在reactive属性中写入EXTERNAL_OBJECT？比如：

const EXTERNAL_OBJECT = reactive({ name:"Bob",
    list:[{name:"Ivan"}] });