Vue has been updated from 2.0 to 3.0

After Vue has been updated from 2.0 to 3.0, in short, it has become lighter, faster, and more convenient to use. Each version iteration is an upgrade and optimization of the previous version. Both for our developers and for the user experience. It is constantly becoming more and more convenient. Next, I will focus on the differences between the two different versions for developers.

Detailed explanation

1. There are certain differences between the initialization of vue2.0 and 3.0. For example, vue3.0 can install some necessary plug-ins for project development in advance while installing the scaffolding, and 3.0 provides visual creation of scaffolding, which can more conveniently manage and configure plug-ins and dependencies. At the same time, the directory structure of the two versions is also slightly different .

2. In the development process, although there is not much difference between the two versions on the surface, there is still a big difference in the underlying aspects, including rendering methods, data monitoring, two-way binding, life cycle, vue3 more accurate change notification ,

Here we will focus on the update about two-way binding ,

The two-way data binding of vue2  is realized by using an API of ES5, Object.definePropert() to hijack the data combined with the publish-subscribe mode.

In vue3  , Proxy API of es6 is used to proxy the data. Each object is wrapped with a layer of Proxy through the reactive() function, and the change of the property is monitored through the Proxy, so as to realize the monitoring of the data.

1. 这⾥是引相⽐于vue2版本，使⽤proxy的优势如下

2. 1.defineProperty只能监听某个属性，不能对全对象监听

3. 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

4. 2.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。

6. 复制代码

3. In addition, vue3 also adds some built-in components and methods. For example, vue3 can perform lazy observation by default, use Function-based API, setup function, an on-demand introduction to plug-ins or objects, Computed Value, newly added support for TypeScript and PWA, etc... Here we will focus on an on-demand introduction of vue3

The new instance object in Vue2.x, everything is on this vue object, so whether you use it or not, you will run it again, which not only improves performance consumption, but also undoubtedly increases user loading time
.

In vue3.0, ES module imports can be used to import on demand, such as: keep-alive built-in components, v-model instructions, etc., not only makes our development more convenient, reduces memory consumption, but also reduces user loading time and optimizes user experience.

Changes in the files for creating vue2 and vue3 projects

1. main.js

Core code :
createApp(App).mount('#app') = createApp(root component).mount('div container in public/index.html')

1. In vue2.0, a vue instance is directly created
2. In vue3.0, a createApp is exported on demand (what does ceateApp do)
3. The app single file in vue3 no longer requires a root element, which means that there must be a root element in vue2.0, but there is no such requirement in vue3

1. <template>

2. <img alt="Vue logo" src="./assets/logo.png">

3. <HelloWorld msg="Welcome to Your Vue.js App"/>

4. </template>

5. 复制代码

Data two-way binding principle

Vue2 uses Object.defineProperty() for data hijacking, combined with publish and subscribe.

Vue3 uses Proxy proxy, using ref or reactive to convert data into responsive data

Definition of Data and Methods

Vue2 uses the option type API (Options API), and Vue3 uses the synthetic API (Composition API)

View 2:

1. data() { return {}; }, methods:{ }

2. 复制代码

View 3:

Both data and methods are defined in setup, and return{} is performed uniformly

life cycle

get props

vue2：console.log(‘props’,this.xxx)
vue3：setup(props,context){ console.log(‘props’,props) }

Pass value emit to parent component

vue2：this.$emit()
vue3：setup(props,context){context.emit()}