即使数据是从应用程序外部输入的，也不会被反映

Question

如果你试图从应用程序外部分配一个变量，它将不能很好地反映。为什么行为改变取决于应用程序是如何安装在HTML标签?

此代码不工作

<div id="app">
<ul v-for="player in players">
<li>{{player.name}}, {{player.age}}</li>
</ul>
</div>
<!-- VueJS -->
<script src="https://unpkg.com/vue@3.2.20"></script>
<script>
let app= Vue.createApp({
data() {
return {
players : []
}
},
})
app.mount("#app") //<--- here
app.players=[
{name: 'nobita', age: 13},
{name: 'suneo', age: 13},
{name: 'sizuka', age: 13},
{name: 'takeshi', age: 13},
]
</script>

此代码有效:

<div id="app">
<ul v-for="player in players">
<li>{{player.name}}, {{player.age}}</li>
</ul>
</div>

<script>
let app= Vue.createApp({
...
}).mount("#app")  //<--- here

app.players=[
{name: 'nobita', age: 13},
{name: 'suneo', age: 13},
{name: 'sizuka', age: 13},
{name: 'takeshi', age: 13},
]
</script>

Answer 1

Vue.createApp()创建一个应用实例，用于配置应用的设置，比如注册组件、指令和全局道具。应用实例返回其mount()API中的根组件。

正如您所发现的，组件数据只能通过组件引用来更新。