Even if data is entered from outside the app, it will not be reflected-CodePudding

If you try to assign a variable from outside the app, it will not be reflected well. Why does the behavior change depending on how the app is mounted on the HTML tag?

this code doesn't work

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

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

this code works:

<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>

CodePudding user response：

Vue.createApp() creates an application instance, used to configure the application setup, such as registering components, directives, and global props. The application instance returns the root component in its mount() API.

As you discovered, the component data can only be updated through the component reference.