Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.