3 and 2 are two major versions of popular front-end frameworks, with many differences between them, including performance optimization, new features and improved APIs. Here are some of the main differences between Vue 3 and Vue 2, as well as some sample code to illustrate these differences.
1. Performance optimization
Responsive system: Vue 3 uses Proxy to implement responsive system. Compared with Vue 2, it provides better performance and can detect the addition and deletion of object properties.
Virtual DOM: Vue 3 rewritten the virtual DOM to take advantage of the optimization of modern JavaScript engines.
2. Composition API (Composition API)
Vue 3 introduces a combination API, a new way to organize and reuse code logic. Compared with Vue 2's Options API (Options API), a combo API provides greater flexibility and better code organization.
// Vue 2 (Options API)
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
++;
}
}
};
// Vue 3 (Composition API)
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
++;
}
return {
count,
increment
};
}
};
3. Fragment characteristics
Vue 3 allows components to have multiple root nodes, while Vue 2 can only have one root node per component.
<!-- Vue 2 (Single root node) -->
<template>
<div>
<header></header>
<main></main>
<footer></footer>
</div>
</template>
<!-- Vue 3 (Multiple root nodes) -->
<template>
<header></header>
<main></main>
<footer></footer>
</template>
4. Teleport Features
Vue 3 introduces the Teleport feature, allowing you to "transmit" the child nodes of a component to other locations in the DOM.
<!-- use Teleport Transfer modal box to body The end of the element -->
<template>
<button @click="showModal = true">Display modal box</button>
<teleport to="body">
<div class="modal" v-if="showModal">
I'm modal box content
</div>
</teleport>
</template>
5. Other improvements
Better error handling: Vue 3 provides more detailed error information and stack traces.
Smaller volume: Vue 3 has a smaller runtime volume than Vue 2.
Better TypeScript support: The source code of Vue 3 is written in TypeScript and provides better type support.
Note that the Teleport feature above is actually provided in Vue Router, a library in Vue 3, and is not part of the Vue core library. I provide this description
The example is to show some new features in the Vue 3 ecosystem, but make sure to use the relevant libraries and APIs correctly in the actual project.
Overall, Vue 3 provides many improvements and new features, making the development experience smoother and the code more maintainable. However, due to these changes, it may take some time and effort to migrate from Vue 2 to Vue 3.
Hook function
Both 2 and 3 provide a set of lifecycle hook functions that allow developers to execute code at different stages of the component. However, Vue 3 introduced the Composition API, which contains the new hook function setup, which does not exist in Vue 2. In addition, Vue 3 also adjusted the name of some life cycle hooks to better reflect their purpose and triggering timing.
Vue 2's life cycle hook
beforeCreate: After instance initialization, the configuration of data observation and event/listening events is called before.
created: The instance is called immediately after the creation of the instance. In this step, the instance has completed the following configurations: data observations, properties and methods operations, watch/event event callbacks. However, the mount phase has not begun.
beforeMount: Called before the mount starts, and the relevant render function is called for the first time.
mounted: The instance is called after it is mounted, where el is replaced by the newly created vm.$el.
beforeUpdate: Called when data is updated, happening before the virtual DOM is patched.
updated: Called after the instance is updated.
beforeDestroy: Called before instance is destroyed. At this step, the instance is still fully available.
destroyed: Called after the instance is destroyed.
Vue 3's life cycle hook
Vue 3 retains most of the life cycle hooks in Vue 2, but two hooks have changed their names and introduced a new setup hook:
beforeMount and mounted: The functions and usage are the same as in Vue 2.
beforeUpdate and updated: The functions and usage are the same as in Vue 2.
beforeUnmount: Replaces beforeDestroy in Vue 2 and is called before component uninstallation.
unmounted: Replace destroy in Vue 2 and is called after the component is uninstalled.
setup: Vue 3 new hook, which is the entry point to use the Composition API. The setup hook is called beforeCreate and created hooks and does not accept this context because it is called before the component instance is created.
setup hooks and Composition API in Vue 3
In Vue 3, you can use the setup hook to organize and share the logical code of components. The setup hook function receives two parameters: props and context.
import { ref } from 'vue';
export default {
props: {
propName: String,
},
setup(props, context) {
const state = ref(0);
function increment() {
++;
}
return {
state,
increment,
};
},
};
In the example above, the state and increment functions are logical parts of the component, which are defined in the setup hook and are finally returned to the template for use. props are properties of the incoming component, and context provides some additional functionality, such as accessing attrs, slots, and emit functions.
In short, the lifecycle hooks in Vue 3 are mostly the same as Vue 2, but a new setup hook was introduced to support the Composition API, and some hook names have been tweaked to better describe their purpose.
The above is a detailed explanation of the difference between Vue2 and Vue3 and the use of its hook functions. For more information about the difference between Vue2 and Vue3, please pay attention to my other related articles!