A brief analysis of the responsiveness principle and differences of Vue2.0/3.0

Preface

Since vue3.0 was officially launched, many friends have switched to vue3.0. Here I will write down the principles of 3.0 and 2.0 and the differences between them that I have summarized for your own learning.

Step 1: The responsive principle of vue2.0

First look at the explanation on the official website:

When you pass a plain JavaScript object to the data option of a Vue instance, Vue will iterate over all the properties of the object and convert them all to getters/setters using Object.defineProperty. Object.defineProperty is an unshimmable feature in ES5, which is why Vue does not support IE8 and lower versions of browsers.

These getters/setters are invisible to the user, but internally they allow Vue to track dependencies and notify changes when properties are accessed or modified. The problem that needs to be noted here is that the browser console formats getter/setter differently when printing data objects, so you may need to install vue-devtools to get a more friendly inspection interface.

Each component instance has a corresponding watcher instance object, which records the properties as dependencies during component rendering. Later, when the setter of the dependency is called, the watcher is notified to recalculate, thereby updating its associated components.

Here is my understanding

In fact, it is not difficult for people who have read the API and source code to know that v-model and responsive principles are divided into two layers.

• The first layer, the bottom layer, is a feature of es5, Object.defineProperty, which updates data through getter and setter.
• The second layer is the presentation layer. Anyone who has read the v-model principle knows that there is a watcher in the v-model. The v-onwatcher monitors the data changes and v-on updates the view.

Step 2: The responsive principle of vue3.0

First look at the explanation on the official website:

This is why vue3.0 can directly delete and modify object properties.

Step 3: Summarize the differences between the two

----------- 3.0

(The first two no longer need to be set to change like in 2.0. They can be changed directly)

1. 3.0 proxy can directly change the data of array type

2. You can directly add and delete object attributes

3.3.0 is compatible with IE12 and above

4. The v-model syntax on the component is changed to v-bind.sync

5. The priority of using v-for and v-if on the same element has changed

6. The key usage on v-for has been changed

7. The ref of v-for is no longer registered as an array

8, destroyed, beforeDestroy lifecycles are renamed to unmounted and beforeUnmount

9, <template> is treated as a normal element, not as content inside the renderer

Here are the major changes released on the official website

Summarize

This is the end of this article about the responsive principles and differences of vue2.0/3.0. For more relevant content on the responsive principles of vue2.0/3.0, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!