Vue3 has been around for a while, there is no real practice in the project, just some simple demos. Compared with VUe2, VUe3 is still very much changed. I believe that soon VUe3 will become the mainstream. I plan to write a series as learning output.

About both distinction believes can speak a lot of knowledge point, but knowledge point does not use feeling or not big. This article analyzes the difference between the two through a simple example.

1. Introductory demo

Let’s first feel vue3 using the simplest way to write, create a new HTML, introduce vue3 CDN address (official website document), the code is as follows:

< HTML > < body > < div id = "app" > < h4 > {{info. MSG}} < / h4 > < div > {{title}} < / div > < button @ click = "changeTitle" > change the title < / button > </div> // vue3.0 <script SRC ="https://unpkg.com/vue@next"></script {createApp, reactive, ref} = Vue; Const app = createApp({// setup is a new lifecycle function, as the total startup entry, other lifecycle, method, Setup () {let title = ref('init'); Let info = reactive({MSG: 'hello vue3'}); Const changeTitle = () => {value title. Value = 'change title'; Info. MSG = 'MSG'} // all variables and methods used in the template need to return, otherwise it will not take effect. Return {info, title, changeTitle}}}); // Mount the dom element app.mount('#app'); </script> </body> </html>Copy the code
// vue2 <script> const app = new Vue({app.$mount('#app'), data: {title: 'hi, vue2'}, // methods: {changeTitle() {this.title = 'change title'; } } }) </script>Copy the code
Copy the code

2. Key points of differentiation

2.1 Mounting Mode

  • Vue3.0 can destruct the createApp method and mount the app by calling mount. This is also the design philosophy of vuE3 functional programming, which brings in resources on demand and makes better use of tree-shaking to reduce packaging volume.

  • $mount(‘#app’); $mount(‘#app’); $mount(‘#app’)

It can be seen that vue3.0 function modules are split more finely, and a certain function (such as responsiveness) can be used independently to achieve real on-demand use.

Packages /runtime/dom –> Packages /runtime/core/renderer createApp

2.2 Life cycle function

Vue3 has removed beforeCreate and Created and added the setup function. The other periodic functions are basically named vue2. X with the on prefix, camel name, and are written into the setup function.

OnRenderTracked and onRenderTriggered are also added for debugging. Both events have a DebuggerEvent that lets us know what is causing the rerendering in the Vue instance.

Vue3.0 adopts functional programming mode, which breaks the limitation of This, can better reuse, truly reflects the high cohesion and low coupling of the implementation function, and is more conducive to the expansibility and maintainability of the code.

2.3 Data response mode

  • Vue3.0 provides Reactive and ref. Ref can be used to define base and reference types, and Reactive can only be used to define reference types.

    Ref(10)=> reactive({value: 10}); ref (10)=> reactive({value: 10});

    When do you use ref and when do you use reactive for reference types? In short, if you want to change only one property of a reference type, reactive is recommended, and if you want to reassign variables, ref must be used.

    Value = XXX changes variables defined by ref, and obj.xx = xx changes variables defined by reactive.

  • Vue2.0 puts data directly into data, with this.xx = xx to change.

According to the data response principle, the two have changed a lot. Vue2.0 uses Object.defineProperty, while VUe3.0 uses Proxy and Reflect. The biggest advantage of Vue3.0 is that it can listen to the response of array, object add/delete or multi-layer nested data structure.

The above points are obvious differentials, but there are also many hidden differentials, such as a lot of performance optimization at compile time and better use of tree-shaking for packaging volume.

3. Summary

At the beginning of the use may be a little unaccustomed to, after all, broke the original development habits. The more I learned about Vue3, the more I realized that vuE3 smells good, and that breaking out of your comfort zone is the way to embrace a better one.

Thank you for your support

Attached is a history of webpack series:

【 WebPack series 】 Analyze webpack packaging output and core process from the source point of view

【 Webpack series 】 How to trigger and execute loader from the perspective of source code

How does Webpack parse modules

【 Webpack series 】 How does webpack plugin run

【 Webpack series 】 Analyze webpack hot update process from the source point of view

【 Webpack series 】 An in-depth analysis of the implementation process of HTML-Webpack-Plugin from the perspective of source code