different results using mount and instance data undefined
Version
3.2.19
Reproduction link
Steps to reproduce
When using the following code, the console.log prints 1 as expected:
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
</div>
<script>
// direct instance creation
const data = {
a: 1
}
// The object is added to a component instance
const vm = Vue.createApp({
data: function () {
return data;
}
}).mount('#app');
console.log('vm', vm.a); // => 1
</script>
However when the mount is done separately, the console.log is "undefined":
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
</div>
<script>
// direct instance creation
const data = {
a: 1
}
// The object is added to a component instance
const vm = Vue.createApp({
data: function () {
return data;
}
});
vm.mount('#app');
console.log('vm', vm.a); // => undefined
</script>
What is expected?
Both code snippets have the same behavior.
What is actually happening?
Mounting the app in a separate step does not expose the instance data.
@unuseless Your first demo's vm
is the return of mount
, but your second demo's vm
is the return of Vue.createApp
.
https://v3.vuejs.org/api/application-api.html#mount