preface
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. It is becoming more and more convenient for both our developers and the user experience. Next, I will focus on the differences between the two different versions,

Explain in detail
1. There are some 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 scaffold, and 3.0 provides visual scaffold creation, which can more easily manage and configure plug-ins and dependencies. At the same time, the directory structure of the two versions is slightly different.

2. Although there is no apparent difference between the two versions in the development process, there are still great differences in the underlying aspects, including rendering method, data monitoring, two-way binding, life cycle, vue3 more accurate change notification,

Here we will focus on the update of two-way binding,
The two-way data binding of vue2 is realized by using an API of ES5, object. Defineproperty(), to hijack data in combination with publish subscribe mode.
vue3 uses the ProxyAPI of es6 to Proxy data. Each object is wrapped with a layer of Proxy through the reactive() function. The Proxy monitors the changes of attributes, so as to monitor the data.

Here is the introduction. Compared with the vue2 version, the advantages of using proxy are as follows
1.defineProperty can only listen to one property, not all objects
for in and closures can be omitted to improve efficiency (just bind the whole object directly)
2. You can listen to arrays without having to do specific operations on arrays alone. You can directly intercept the operations of all object type data through Proxy, which perfectly supports the monitoring of arrays. use

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 and setup function, introduce an on-demand connection with plug-ins or objects, calculated value, and add TypeScript and PWA support, etc
Here we focus on an on-demand introduction of vue3

All the new instance objects in Vue2.x are on this Vue object. In fact, whether you use it or not, it will change. This not only improves the performance consumption, but also undoubtedly increases the 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., which not only makes our development more convenient, reduces memory consumption, but also reduces user loading time and optimizes user experience.
 

Two way data binding
Vue2.0 uses Object.defineProperty

Principle: hijack the getter and setter operations of object properties by using Object.defineProperty, and send a notification when the data changes

 

// data
let data = {
    title: '',
    // Backup data
    _data: {}
}
// Define properties
Object.defineProperty(data, 'title', {
    // Defining property attributes or property methods
    // Value method
    get() {
        // console.log('get')
        // Note: values cannot be obtained through their own attributes
        // return this.title
        // Return backed up data
        return this._data.title;
    },
    // Assignment method
    set(value) {
        // this points to the object
        // Note: you cannot assign values to your own attributes
        // this.title = value
        // We can store it in the backup data
        this._data.title = value;
        // console.log('set')
        // update the view
        updateView(this._data)
    }
})
// View template
let tpl = document.getElementById('app').innerHTML
// Method for updating view
function updateView(data) {
    // Processing template
    let html = tpl.replace(/{{(\w+)}}/g, (match, $1) => {
        // Get data from data
        return data[$1] || ''
    })
    // update the view
    document.getElementById('app').innerHTML = html;
}

Vue3.0 data binding
Use the new features of ES6 porxy

Principle: hijack data through proxy, a new feature of ES6, and send a notification when the data changes

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="yingaxiang" content="width=device-width, initial-scale=1.0">
      <title>vue3.0 Data bidirectional binding</title>
  </head>
  <body>
      <div>
         <input type="text" id="input">
         <span id="text"></span>
     </div>
 </body>
 </html>
 <script>
     var obj = {};
     var obj1 = new Proxy(obj, {
         // target is the first parameter obj, and receive is the returned obj (the returned proxy object)
         get: function (target, key, receive) {
             // Returns the property value
             return target[key];
         },
         set: function (target, key, newVal, receive) {
             // Perform assignment
             target[key] = newVal;
             document.getElementById('text').innerHTML = target[key];
         }
     })
     document.addEventListener('keyup', function (e) {
         obj1[0] = e.target.value;
     });
 </script>

Summary:

Bidirectional binding in Vue2.x version cannot detect changes in subscripts
proxy can hijack the whole object and return a new object