Introduction
In this blog I will be looking into features that have been added or changed when Vue2 updated to Vue3.
Smaller and faster
Vue3 utilizes an optimization feature known as tree shaking. This means that Vue features that are unused by the project are removed when the project is compiled. This makes projects smaller and therefore faster. Another feature that Vue3 implements is a compiler-informed DOM. This results in Vue3 projects being 41% lighter, 55% faster, having 133% faster updates and using 54% less memory than projects written in Vue2. Check out the link below for the full Vue2 vs Vue3 comparison.
Changes in initialization
- In Vue3, a dedicated “createApp()” function is used to create an app instead of using the “new Vue” instance
[/vc_column_text][vc_row_inner content_placement=”middle” equal_height=”yes”][vc_column_inner width=”1/3″][vc_column_text]
new Vue()
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text css=”.vc_custom_1652270018919{margin-top: 10px !important;}”]
– becomes –
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text]
createApp()
[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]
Vue2 example
[/vc_column_text][vc_single_image image=”5974″ img_size=”large”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]
Vue3 example
[/vc_column_text][vc_single_image image=”5975″ img_size=”large”][/vc_column_inner][/vc_row_inner][vc_row_inner content_placement=”middle” equal_height=”yes”][vc_column_inner width=”1/3″][vc_raw_html]JTNDcHJlJTNFZGF0YSUzQSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMG1zZyUzQSUyMCUyN0l0JTIwd29ya3MlMjElMjclMEElN0QlMEElM0MlMkZwcmUlM0U=[/vc_raw_html][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text css=”.vc_custom_1652270018919{margin-top: 10px !important;}”]
– becomes –
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_raw_html]JTNDcHJlJTNFZGF0YSUyOCUyOSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMHJldHVybiUyMCU3QiUyMG1zZyUzQSUyMCUyN0l0JTIwd29ya3MlMjElMjclMjAlN0QlM0IlMEElN0QlM0MlMkZwcmUlM0U=[/vc_raw_html][/vc_column_inner][/vc_row_inner][vc_row_inner equal_height=”yes”][vc_column_inner width=”1/2″][vc_column_text]
Vue2 example
[/vc_column_text][vc_single_image image=”5978″ img_size=”large”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]
Vue3 example
[/vc_column_text][vc_single_image image=”5979″ img_size=”large”][/vc_column_inner][/vc_row_inner][vc_column_text]
- Although using “data” as a method was recommended in Vue2, writing “data” as an object was also allowed. This has been changed in Vue3, with it being mandatory to have “data” as a method.
- “Vue.component()” or other examples like “Vue.use()” in Vue2 has been changed to “app.component()” etc.
[/vc_column_text][vc_row_inner content_placement=”middle” equal_height=”yes”][vc_column_inner width=”1/3″][vc_raw_html]JTNDcHJlJTNFVnVlLmNvbXBvbmVudCUyOCUyOSUzQyUyRnByZSUzRQ==[/vc_raw_html][/vc_column_inner][vc_column_inner width=”1/3″][vc_raw_html]JTNDcCUyMHN0eWxlJTNEJTIydGV4dC1hbGlnbiUzQSUyMGNlbnRlciUzQiUyMiUzRS0lMjBiZWNvbWVzJTIwLSUzQyUyRnAlM0U=[/vc_raw_html][/vc_column_inner][vc_column_inner width=”1/3″][vc_raw_html]JTNDcHJlJTNFYXBwLmNvbXBvbmVudCUyOCUyOSUzQyUyRnByZSUzRQ==[/vc_raw_html][/vc_column_inner][/vc_row_inner][vc_row_inner equal_height=”yes”][vc_column_inner width=”1/2″][vc_column_text]
Vue2 example
[/vc_column_text][vc_single_image image=”5980″ img_size=”large”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]
Vue3 example
[/vc_column_text][vc_single_image image=”5981″ img_size=”large”][/vc_column_inner][/vc_row_inner][vc_column_text]
Teleport
Teleport is a component that has been built into Vue3. This feature makes it possible to “teleport” a part of a components template into a DOM node residing outside of that component’s DOM hierarchy.
Vue3 – Teleport example
[/vc_column_text][vc_single_image image=”5986″ img_size=”large”][vc_column_text]
Composition API
[/vc_column_text][vc_row_inner equal_height=”yes”][vc_column_inner width=”1/2″][vc_column_text]
Vue2 – Options API example
[/vc_column_text][vc_single_image image=”5988″ img_size=”large”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]
Vue3 – Composition API example
[/vc_column_text][vc_single_image image=”5989″ img_size=”large”][/vc_column_inner][/vc_row_inner][vc_column_text]
The main difference between the two API’s is the syntax in which it is written. The Options API requires you to have a large single exportable object, where the Composition API allows for compartmentalizing of code. This results in smaller and more understandable code, as related code can be grouped together.
This is especially beneficial when working with bigger projects where code can become large and confusing.
[/vc_column_text][vc_row_inner equal_height=”yes”][vc_column_inner width=”1/2″][vc_column_text]
Vue2 – Options API Grouping example
[/vc_column_text][vc_single_image image=”5990″ img_size=”large”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]
Vue3 – Composition API Grouping example
[/vc_column_text][vc_single_image image=”5991″ img_size=”large”][/vc_column_inner][/vc_row_inner][vc_column_text]
Other Changes
Other changes to Vue3 include:
- Multiple root elements: Vue3 allows you to have multiple root elements per template, which was not allowed in Vue2.
- Multiple v-models: Vue3 also allows multiple v-models on a single element, where Vue2 did not.
Summary
Although many features remain the same from Vue2 to Vue3, the changes improve maintainability, readability and speed.
