My Journey from Vue 2 to Vue 3
Having been a loyal user of Vue 2 for quite some time, I recently decided to embark on the journey of exploring Vue 3 in order to convert our existing website. As part of this conversion process, I made the decision to utilize the options interface for Vue 3. Overall, the transition seems relatively smooth, but there is one particular behavior in Vue 3 that has left me scratching my head.
Reflections on Vue 2
When working with Vue 2, the following code snippet showcases how I could access data properties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7503001035475b405b4443">[email protected]</a>/dist/vue.min.js"></script>
</head>
<body>
<h1>Vue2 app.variable example</h1>
<div id="appTemplate">
<div style="margin-bottom:20px">Count: <span v-text="count"></span></div>
<button v-on:click="increment()">Increment</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#appTemplate',
data: {
count: 101
},
methods: {
increment: function() {
this.count++;
}
},
created: function(){
_app = this;
}
});
alert("app.count is:" + app.count)
</script>
</body>
</html>
Upon loading the page, I could easily access the data properties directly from the Vue object, as expected.
Vue 3's Puzzling Behavior
Contrastingly, when I implemented similar functionality using Vue 3, I encountered an unexpected outcome:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a7c7f6f4a39243a243f">[email protected]</a>/dist/vue.global.js"></script>
</head>
<body>
<h1>Vue3 app.variable example</h1>
<div id="appTemplate">
<div style="margin-bottom:20px">Count: <span v-text="count"></span></div>
<button v-on:click="increment()">Increment</button>
</div>
<script type="text/javascript">
var _app;
var app = Vue.createApp({
data: function() {
return {
count: 101
}
},
methods: {
increment: function() {
this.count++;
}
},
created: function(){
_app = this;
}
}
);
app.mount("#appTemplate");
alert("app.count is:" + app.count);
alert("_app.count is:" + _app.count);
</script>
</body>
</html>
Upon the page loading, the first alert box showed that app.count was undefined, prompting further investigation into this intriguing behavior.
To delve deeper into this anomaly, I set the value of the _app variable to this in the created method and displayed _app.count in a second alert box upon loading the page, which surprisingly yielded the correct value.
This discrepancy in Vue 3 raises the question of whether data properties can no longer be accessed directly from the Vue object or if there may be an issue with my code. This potential change from Vue 2 is a significant one, and I'm eager to understand the reasoning behind it.
Thus, the question arises: Why is it that count cannot be accessed via app.count after the var app = Vue.createApp declaration in Vue 3?