vuejs 3数据选项属性不再与外部对象反应

admin

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

其中一个应用程序是使用vue 2开发的，当全局对象在外部模块中更新时，vue 2的选项数据属性会完全更新，而在vue 3中则不会。我也尝试了新的reactive属性，但什么也没做，是不是有个bug？

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

以下是一些测试链接：

Vue 2 share external object

?

<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 share external object

?

<script src="https://unpkg.com/[email protected]/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 share external object with reactive property

?

<script src="https://unpkg.com/[email protected]/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>

?

谢谢

转载请注明出处:http://www.intsu.net/article/20230521/1260976.html