Vue3不同挂载写法下外部为实例data属性赋值不生效问题咨询

两个写法的本质差异是Vue.createApp()和mount()的返回值类型完全不同：

• Vue.createApp(...)返回的是Vue应用实例，这个实例主要用于全局配置（比如注册全局组件、插件），不会挂载你在组件配置中定义的响应式data属性，你给它新增的players只是普通自定义属性，不会被Vue响应式系统监听，自然无法触发视图更新。
• mount(...)执行后返回的是根组件实例，你在data中声明的所有响应式属性都会直接挂载到这个实例上，修改它的属性会被响应式系统捕获，触发视图重渲染。

无法运行的代码问题点 #

你第一段代码先把应用实例赋值给app变量，再单独执行mount，没有接收mount的返回值：

let app= Vue.createApp({
    data() {
        return {
            players : []
        }
    },
})
// mount返回的根组件实例没有被赋值给app
app.mount("#app") 
// 此处是给应用实例新增普通属性，和响应式系统完全无关
app.players=[
    {name: 'nobita', age: 13},
    {name: 'suneo', age: 13},
    {name: 'sizuka', age: 13},
    {name: 'takeshi', age: 13},
]

这种写法里app是应用实例，修改它的属性不会触发任何响应式更新。

可正常运行的代码逻辑 #

你第二段代码用链式调用，直接把mount的返回值赋值给了app：

// app接收的是mount返回的根组件实例
let app= Vue.createApp({
    ...
}).mount("#app")  
// 此处修改的是根组件实例上的响应式属性，会被Vue监听
app.players=[
    {name: 'nobita', age: 13},
    {name: 'suneo', age: 13},
    {name: 'sizuka', age: 13},
    {name: 'takeshi', age: 13},
]

此时app就是根组件实例，上面的players是你提前声明的响应式属性，赋值会触发视图更新。

拓展写法 #

如果要分开写createApp和mount，只需要单独接收mount的返回值即可：

const app = Vue.createApp({/* 配置 */})
const vm = app.mount("#app") // vm为根组件实例
vm.players = [/* 数据 */] // 同样能触发响应式更新

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