Detailed explanation of the difference between vue3.0 and vue2.0

Preface

Vue 3.0 is a JavaScript framework for building user interfaces. Compared with Vue, Vue 3.0 has greatly improved its performance, size and development experience.

The following will analyze the difference between Vue 3.0 and Vue 2.0 from different perspectives:

1. Project structure

• From the selection of project construction and packaging tools:

• In Vue 2.0, you usually choose to use webpack or vue-cli to build and package projects. These tools are relatively mature and stable, and support plug-in and custom configurations, but the configuration is too complex and requires a lot of time and effort to understand and maintain.
• Vue 3.0 is more popular in using Vite, a new front-end construction tool, which is based on the advantages of the ES Modules standard, greatly improving the speed of the entire development process. Using Vite tools not only improves compilation speed, but also simplifies the development and debugging process.

• From the perspective of the design ideas and implementation methods of the architecture:

• Vue 2.0 usually adopts a large monolithic system architecture model, that is, package the entire project into a huge file, with slow loading speed and weak modular capabilities. This model can easily make development difficult and difficult to maintain.
• Vue 3.0 prefers to use a combined API + TypeScript method for architectural design and implementation. Combination API is a new feature introduced in Vue 3.0, which allows developers to develop and reuse components more flexibly. At the same time, using TypeScript also adds more stringent type verification to the architecture, allowing you to discover many potential problems during the compilation stage, improving code quality and maintainability. This pattern makes the code more concise and the structure is clearer, making it easier to be componentized and modularized.

2. Data responsive system

• The data responsive system in Vue 2.0 is mainly through()Method to implement. Each data attribute is defined as observable, with getter and setter methods. When these attributes are modified, Vue will automatically track and recalculate the relevant rendering functions and update the view. However, this method has some limitations, such as not being able to extend and delete attributes, nor being able to responsive to newly added attributes. At the same time, this method can also bring performance problems when large-scale data changes.

• In terms of data responsive systems, Vue 3.0 has been reconstructed and improved on the basis of Vue 2.0, achieving faster and more stable data responsiveness. The specific improvements are as follows:

• Proxy replacementVue 3.0 uses Proxy proxy object in ES6 to replace it()method. Proxy objects can intercept some operations on the object, such as reading, modifying, deleting, etc., thereby achieving more flexible and responsive updates.

• Better responsive trackingIn Vue 3.0, tracking of responsive variables is done in two stages: Track and Trigger. The Track stage is used to track the read of responsive variables, and the Trigger stage is used to recalculate the relevant rendering function and update the view. This method can avoid invalid rendering and improve application performance.

• More flexible and responsive updatesVue 3.0 also adds new APIs such as watchEffect API and ref API, which can operate responsive variables more flexibly. watchEffect can listen for responsive variables and automatically execute side effects functions when the variable changes. ref can convert normal variables into responsive variables and return an object with a value attribute. These new APIs can easily scale and operate responsive systems.

3. Virtual DOM

• Static node improvement: Separate static nodes from dynamic nodes, effectively improving rendering performance
• Quick tags and patches: Vue 3.0 adopts more efficient tags and patches, making page rendering faster and more stable
• Smaller bundle size: Vue 3.0 uses tree-shaking and ES2015-based module system, making the framework's bundle size smaller.

4. Life cycle

• Vue 2.0's life cycle:

• beforeCreate: After instance initialization, data observation (data observer) and event/watcher event configuration (event/watcher option) are called before.
• created: Called immediately after the instance is created. In this step, the instance has completed the following configuration: data observation (data observer), properties and methods operations, watch/event event callbacks. However, the mount phase has not begun and the $el property is currently not available.
• beforeMount: Called before the mount starts: The related render function is called for the first time.
• mounted: Called after the instance mount is completed, and el is replaced by the newly created vm.$el.
• beforeUpdate: Called when data is updated, happening before virtual DOM re-rendering and patching. This is suitable for accessing existing DOM before updating, such as removing the manually set class.
• updated: Called after re-rendering and patching of virtual DOM due to data changes.
• activated: It has been discussed in depth in the component chapter, and will not explain it in detail here.
• deactivated: It has been discussed in depth in the component chapter, and will not explain it in detail here.
• beforeDestroy: Called before instance is destroyed. At this step, the instance is still fully available.
• destroyed: Called after the instance is destroyed. At this time, all instructions and event listeners bound to the instance will be removed, and all sub-instances will be destroyed.

• Vue 3.0's life cycle:

• onBeforeMount: Called before mount, similar to beforeMount in Vue 2.0.
• onMounted: Called after mount, similar to mounted in Vue 2.0.
• onBeforeUpdate: Called before update, similar to beforeUpdate in Vue 2.0.
• onUpdated: Called after update, similar to updated in Vue 2.0.
• onBeforeUnmount: Called before uninstallation, similar to beforeDestroy in Vue 2.0.
• onUnmounted: Called after uninstallation, similar to destroyed in Vue 2.0.
  As can be seen, Vue 3.0 has made some minor adjustments to the life cycle, which does not affect the use, and has added some new hook functions, which is extremely convenient for users to develop and maintain.

5. How to create component instances

In Vue 2.0, the creation of component instances is created through the() method or component object literals. In Vue 3.0, the creation of component instances is created through the standard ES2015 class method.

How to create component instances in Vue 2.0:

('my-component', {
  // Component configuration  // ...
});
// Create root instance and render componentsnew Vue({
  el: '#app',
  template: '<my-component></my-component>'
})

How to create component instances in Vue 3.0:

import { defineComponent } from 'vue';
// Define componentsconst MyComponent = defineComponent({
  // Component configuration  // ...
});
// Export componentsexport default MyComponent;

In Vue 3.0, we can use the defineComponent() method to quickly define components and then export them directly. This method returns a component option object, which is different from the component configuration object in Vue 2.0, and has the advantages of type checking, a combined API, building tool integration, and better IDE support. Moreover, the process of creating component instances in Vue 3.0 is simpler, we only need to export the components to use in other files.

Code example:

// 
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      ++;
    }
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `
});

In this example, we use the defineComponent() method to define a component and export it. This component contains a counter named count and provides a method increment() to increase the counter's value. The component's template contains a display of the current counter value and a click button. Each click of the button will perform the increment() method to increase the counter value. We can use it elsewhere like this:

// 
import { createApp } from 'vue';
import MyComponent from './';
const app = createApp({});
('my-component', MyComponent);
('#app')

In this example, we use the createApp() method to create an application instance and force the component MyComponent as the name of the my-component component, and then mount it on the DOM. In this process, we do not need to use () or () to create component instances, but can directly use the defineComponent() method to define the component and export it, and then use it elsewhere. This is an example of creating component instances in Vue 3.0 than in Vue 2.0.

6. Routing

From a routing perspective, the biggest difference between Vue 2.0 and Vue 3.0 is the usage of Vue Router and the changes in API.
In Vue 2.0, we need to use(VueRouter)To introduce Vue Router, then create a Router instance and use it in the root component:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

Then import the Router in and use it:

import Vue from 'vue'
import App from './'
import router from './router'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

In Vue 3.0, the way Vue Router is used has changed. Now, we need to usecreateRouterFactory functions to create a routing instance and then pass it to the root component for use:

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/'
const routes = [
  { path: '/', component: HelloWorld }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

Then, in, we need to pass(router)Mount the routing instance on the root component:

import { createApp } from 'vue'
import App from './'
import router from './router'
const app = createApp(App)
(router)
('#app')

Overall, Vue Router provides more flexible APIs and better type inference support in Vue 3.0, but it is used differently from Vue 2.0. Therefore, if you want to upgrade to Vue 3.0 and use Vue Router in your project, you must read the relevant documentation and make some corresponding changes to be used.

7. Request

• HTTP request library used:

• In Vue 2.0, third-party libraries axios or vue-resource are usually used to encapsulate HTTP requests. These libraries usually need to be imported globally before they can be used, and then requests are initiated by using relevant methods inside the component. Although this method is relatively flexible, it requires writing more duplicate code, and the support for type inference and type verification is also poor.
• In Vue 3.0, the officially recommended HTTP request library is an alternative to axios - vite-plugin-mock. This library has built-in a set of request interception and response interception mechanisms based on axios, and has been enabled by default in Vite. This approach can greatly reduce the workload of writing duplicate code, and also supports better type inference and type verification.

• Code style and specifications when encapsulating requests:

• Vue 2.0 usually uses a Promise encapsulation method, such as encapsulating the request code into a function and then returning a Promise. In Vue 3.0, async/await is more inclined to encapsulate request code. This method can make the code more concise and easy to understand, and also supports better error handling and exception catching.

8. Template Instructions

• v-bind directive: In Vue 2.0, you can use the v-bind directive to bind attributes to a variable or expression, for example:

<div v-bind:class="{'active': isActive}"></div>

In Vue 3.0, the v-bind directive can be replaced with a more concise syntax:

   <div :class="{'active': isActive}"></div>

• v-if and v-for directives: In Vue 2.0, the v-if and v-for directives cannot be used at the same time because v-for is executed before v-if, resulting in the rendering of unnecessary components.

  In Vue 3.0, v-if and v-for can be used at the same time, but the v-if directive needs to be placed on the parent element of the v-for directive:

   <div v-if="show">
     <div v-for="item in items" :key="">{{ item }}</div>
   </div>

• v-model directive: In Vue 2.0, the v-model directive is a syntax sugar that binds the value attribute and input event of a form element to a variable or expression.

  In Vue 3.0, the v-model directive implements the core logic of two-way binding, and the syntax has also been improved to bind form elements and data more flexibly:

   <input v-model="count" type="number">
   <!-- Equivalent to -->
   <input :value="count" @input="count = $" type="number">

In Vue 3.0, the v-model directive also supports custom components, and two-way binding can be achieved by configuring props and events.

9. API

• In Vue, we define components by using the option API. That is, declare attributes and methods such as data, methods, computed, watch, etc. in component options to create components. Although this definition method is simple and easy to understand, it is not conducive to code organization and reuse. When component logic becomes complex, code often becomes difficult to maintain.

• Vue 3.0 introduces a combination API, also known as a functional API. It allows us to use functions to create components, split options into smaller functions, which is conducive to reorganization and reuse of component code. The main feature of a combined API is based on the decoupling and reusability of functions, which can split the logic on the component into smaller and more reusable code units.

• The core function in the combined API issetup(), it is a function called inside the component and is responsible for the main functions of the component logic. usesetup()Functions can access the components' properties such as props, context, attrs, slots, emit, etc.

• In Vue 3.0, we cansetup()A function returns an object, which can contain properties and methods, etc. These properties and methods can be considered as component options in Vue 3.0. These options include data, computed, methods, watcher, and lifecycle hooks, and more.

• It should be noted that in Vue 3.0, component options are separated from component instances, and all options on the instance aresetup()Created during the execution of the function, which also ensures the decoupling and easy refactoring of the combined API.

• Overall, Vue 3.0's combined API allows developers to better organize code and improve code reusability and maintainability. At the same time, becausesetup()The special properties of the function can also improve the performance of Vue 3.0.

10. diff algorithm

• In Vue 2.0, the diff algorithm determines the smallest set of DOM elements that must be updated by comparing old and new virtual DOM trees. This process involves traversal and comparison of DOM trees, which consumes very performance, especially when updating large amounts of data, which will bring about performance bottlenecks.

• The diff algorithm in Vue 3.0 has been improved and optimized, using compile-time optimization dynamic tagging, and using static analysis techniques to determine which nodes are static and which are dynamic. In this way, when performing diff comparisons, only dynamic nodes need to be compared, avoiding unnecessary operations on static nodes, thereby improving performance.

• The diff algorithm in Vue 3.0 also introduces the optimization of "static node improvement", that is, extracting static nodes from the rendering function to reduce redundant DOM operations. This technology can reduce the number of virtual DOM creation and comparison times, thereby improving performance.

• In addition, Vue 3.0 introduced Block Tree. By preprocessing the template during the compilation period, the entire template can be divided into multiple blocks, each block has its own specific identity, so that when performing diff comparison, only nodes within the same identity block need to be compared, thereby improving the efficiency of the diff algorithm.

• In short, the diff algorithm in Vue 3.0 has made many improvements and optimizations in compilation-time optimization, static node improvement, Block Tree, etc., and has greatly improved performance.

Summarize

From the above, we can see that Vue 3.0 has performance:

• There is faster rendering speed: Vue 3.0 is optimized for virtual DOM and responsive systems to enable faster rendering speeds.
• There is a smaller code volume: Vue 3.0 uses Tree-shaking technology, which eliminates unused code, thereby reducing the volume of the application.
• There is higher fault tolerance: In Vue 3.0, template compilation errors throw compile-time errors instead of run-time errors, thus discovering problems earlier.

Secondly, Vue 3.0 introduces a combination API, which makes it easier for developers to combine logic, which improves the development experience. The advantages of a combination API are:

• It can better organize code structure and logic.
• Logic and code snippets can be more conveniently reused.
• It is possible to have more flexibility in logical abstraction across components.

Finally, Vue 3.0 also provides some new features, such as:

• teleport: provides more flexible component position control methods.
• New responsive API: Provides more APIs, such as watchEffect, ref, computed, etc., so that developers can process responsive data more conveniently.
• Fragment: You can use multiple elements in a component without wrapping them with an outer element.

In general, Vue 3.0 is more stable, fast and flexible than Vue 2.0, but it also requires a certain learning cost. We need to adapt again and learn endlessly.

This is the end of this article about the detailed explanation of the differences between vue3.0 and vue2.0. For more information about the differences between vue3.0 and vue2.0, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!