The difference between vue.js 3.0 and 2.x

  • Changes in the way source code is organized

The ue. Js 3.0 source code is rewritten with TypeScript. The development of large projects recommends the use of typed language, which helps us check type problems during the coding process, such as passing parameters to functions. Vue.js 3.0 uses Monorepo to manage the project structure, extracting independent functional modules into different packages. Each functional module is clearly divided and the dependencies between modules are also clear, and each functional module can be tested, published and used separately.

Packages directory structure



Compiler-core: platform-independent compiler

Compiler-dom: browser-specific compiler that relies on compiler-core

Compiler-sfc: Used to compile single-file components, depending on compiler-core and compiler-DOM

Compiler-ssr: a server-side rendering compiler that relies on compiler-DOM

Reactivity: A data-responsive system that can be used independently

Run-time core: Platform-independent runtime

Runtime-dom: An API for handling native DOM, events, and so on for the runtime of the browser

Run-time test: a lightweight runtime written specifically for testing. Since the DOM tree rendered by the runtime is actually a JS object, the runtime can run in any JS environment, can be used to test the render, can be used to serialize the DOM, trigger DOM events, and log DOM operations in an update.

Server-renderer: Used for server-side rendering

Shared: Common apis used internally by a VUE

Template-explorer: compile the component while the browser is running and output the render function. The package’s README file provides the online access address.

Vue: Used to build the full VUE, depending on compiler and Runtime

  • Composition API

Vue. Js 3.0 was rewritten, but more than 90% of the API is compatible with 2.x. Vue. Js 3.0 added Composition API to solve the problem that large components in 2.x development projects cannot be split and reused using Options API.

  • Performance improvement

Vue.js 3.0 has seen significant performance improvements, including reactive code rewrite using proxy (proxy object) and compiler optimizations to rewrite the virtual DOM, resulting in significant improvements in rendering and update performance. In addition, server-side rendering performance has been improved 2-3 times.

  • Vite

With the release of Vue. Js 3.0, an official development tool Vite is available. Using Vite to test projects during the development phase can run projects directly without packaging, improving development efficiency.

Vue3.0 builds different versions

packages/vue

  • Modularity of CJS common.js, where both files are full versions of VUE, including runtime and compiler
    • Vue. Js. Js development version, the code is not compressed
    • Vue. Js. Prod. js production version, the code is compressed
  • The four global files can be imported directly from the browser via the script tag. After importing JS, a global Vue object will be added
    • Vue.global.js development version, the code is not compressed. Full version of VUE, including runtime and compiler
    • Vue.global.prod. js production version with compressed code. Full version of VUE, including runtime and compiler
    • Vue.runtime.global.js development version, the code is not compressed. Only the build version of the runtime is included
    • Vue. Runtime. Global. Prod. Js production version of the code is compressed. Only the build version of the runtime is included
  • Browser this set of files contain ESM (ES Module), the browser native modular way, can be directly through the browser<script type='module' src='*'/>To import these modules
    • Vue. Esm – Browser.js development version, code is not compressed. The full version
    • Vue. Esm – Browser.prod. js production version, code is compressed. The full version
    • Vue. Runtime.esm -browser.js development version, code is not compressed. Only the build version of the runtime is included
    • Vue.runtime.esm -browser.prod.js production version with compressed code. Only the build version of the runtime is included
  • The Bundler files don’t pack all the code and need to be used with the bundler tool. Both use es Module modularization and import run-time core internally
    • Vue. Esm-bundler. js is a complete version of vue
    • Vue. Runtime.esm – Bundler. js runtime version, which only imports runtime internally, is the smallest version of Vue. After a project is developed, only the code used is packaged when repackaged, making the VUE smaller

Composition API

  • RFC (Request For Comments)

github.com/vuejs/rfcs

  • Composition API RFC

composition-api.vuejs.org

The motivation

Vue 2.x is already useful for small to medium sized projects. However, using Vue 2.x can be somewhat limiting when developing large projects that require long iterations. In large projects, there may be some complex components that are difficult to understand when looking at the components developed by others. The reason is that Vue 2.x component development usesOptions API.

The Options API is a way to create a component using an object that describes its Options (data, methods, props, and so on). The Options API develops complex components, where the code of the same functional logic is split into different Options.

Here’s a simple example of the Options API:

This code describes displaying the position of the mouse on the page as it moves. The mouse position corresponds to position in the data option, the mousemove event registered for the mouse is created in the lifecycle hook function, and the event needs to be removed when the component is destroyed. Finally, a function needs to be added to methods to record the mouse position.

Now imagine that if you wanted to add a new function to this component, such as a search function, you would need to add code to multiple options. If there is a lot of code, you will drag the scroll bar from time to time to find the code. It is also difficult to extract reusable logic from components using the Options API. Although Vue 2.x has Mixin mechanisms, it is possible to extract and reuse duplicate code from components. However, mixins also have problems, such as naming conflicts and unclear data sources.

Composition APIVue 3.0 is a new set of apis, a set of function-based apis that allow us to organize component logic more flexibly.



This code is rewritten logic using the Composition API. Wrap the logic that gets the mouse position into a function that other components can use directly. We simply extract the useMousePosition into one module and import it in the other. When we need to add new functionality, such as search, we simply add a useSearch function to encapsulate the search function. Any future component that needs this functionality simply calls the useSearch function in that component’s setup function.

Compared to the Options API, the advantage of this is that when viewing a certain logic, you only need to focus on the specific function. The current logic code is wrapped inside the function.

Performance improvement

Responsive system upgrade

  • DefineProperty is at the heart of the reactive system in Vue 2.x. All the members in the data are iterated during initialization, and attributes of the object are converted to setters and getters via defineProperty. If the attributes in data are also objects, the attributes of each child object need to be processed recursively. Note that this is done at initialization time, which means that if you don’t use the property, it is also handled in a reactive manner.
  • Vue 3.0 rewrites reactive systems using Proxy objects. The performance of Proxy objects is inherently better than that of defineProperty. In addition, proxy objects can intercept property access, assignment, deletion, and so on, without traversing all properties during initialization. If multiple attributes are nested, the next level of attributes will be recursively processed only when one attribute is accessed. By default, Proxy objects can listen for dynamically added properties, for property deletions, and for changes to the array index and length properties. Vue 2.x calls vue.set () to dynamically add a responsive attribute, and Vue 2.x does not listen for attribute deletion, nor does it listen for array index and length changes.

Compiler optimization

  • Vue 2.x optimizes the diff process by marking static root nodes.
  • In Vue 3.0, all static root nodes are marked and promoted, and only dynamic node content is compared to diff. Vue 3.0 has introduced Fragments, a feature that eliminates the need to create a unique root node in templates and allows them to place text content, or many tags of the same class. The vetur plugin needs to be upgraded in VS Code, otherwise VS Code will tell you there is an error if there is no unique root node in the template.

Optimized packing volume

Vue 3.0 removed some unusual apis, such as inline-template and filter, to make the final package size smaller. In addition, Vue 3.0 supports tree-shaking better. Tree-shaking relies on ES Modules for static analysis at compile time to find modules that are not introduced, and filters them out at package time to make them smaller.

Vite

Vite is a Web development build tool that enables lightning cold server startup thanks to its native ES module import approach. You can use Vite to quickly build a Vue project by running the following command from your terminal. Use NPM:

$ npm init vite <project-name> -- --template vue
$ cd <project-name>
$ npm install
$ npm run dev
Copy the code

Or yarn:

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev
Copy the code

Vite characteristics

  • Quick cold start
  • According to the need to compile
  • Module hot update

Vite vs Vue-Cli

  • Vite runs directly in development mode without packaging; In vue-CLI development mode, the project must be packaged to run
  • Vite is packaged in the production environment using Rollup, based on ES Module. Vue-cli Uses Webpack to pack