What's the difference between Vue3 and Vue2?
This article mainly introduces the relevant knowledge of "what is the difference between Vue3 and Vue2 comparison". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the difference between Vue3 and Vue2 comparison" can help you solve the problem.
Performance
Vue 2.6.10 minimize compressed 22.8kB
Vue 3 minimizes compression to about 10KB
Global API
Vue2:
What functions the Vue core uses will eventually appear in the production code because the Vue instance is exported as a single object
Vue3:
Export on demand, export only the API used and delete unused code. So the previous global API is now available only through named exports.
Example
Vue2
/ / Vue 2.x-whole-- Vue-- object is bundled for production
Import Vue from 'vue'
Vue.nextTick (() = > {})
Const obj = Vue.observable ({})
Vue3
/ / Vue 3.x-only imported properties are bundled
Import {nextTick, observable} from 'vue'
NextTick (() = > {})
Const obj = observable ({})
Attribute assignment
Vue2 is based on Object.defineProperty, and we need to use Vue.set,Vue.delete to set the value of the property and trigger the change of the value of the property.
Vue3 uses JS Proxies to directly assign values to attributes, which can trigger property value changes.
And this improvement of vue3 can trigger the change of attribute value more quickly, and the performance is about 2 times faster than vue2.
Example
/ / Adding a new property to reacitve object in Vue 2.x
Vue.set (this.myObject, key, value)
/ / Adding a new property to reactive object in Vue 3
This.myObject [key] = value
Re-render component recognition
A new lifecycle hook, renderTriggered, has been added to Vue 3, which we renderTriggered can use to track and eliminate unnecessary component re-rendering, which is very useful for component performance optimization at run time.
Example
Const Component = {
/ / other properties
RenderTriggered (event) {
Console.log (--Re-render of-- + this.$options.name +-- component--, event)
}
}
This is the end of the content about "what's the difference between Vue3 and Vue2 comparison". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
