Big front-end study notes--Vue.js 3.0

Introduction to Vue.js 3.0

Article content output source: big front-end high-paying training camp

1. Vue.js source code organization

1. The source code is rewritten in TypeScript

Improve the maintainability of the code. It is recommended to use a typed language for the development of large projects, and to check type problems during the coding process.

2. Use Monorepo to manage project structure

Use one project to manage multiple packages, put the codes of different functions in different packages for management, and each function module can be released separately, tested separately, and used separately.

3. Different build versions

In Vue3, the UMD modular approach is no longer built, because UMD will make the code more redundant, and it must support multiple modular approaches. In Vue3, the CJS, ESModule, and self-executing functions are packaged into different files. There are different build versions of Vue3 in packages/vue.

• cjs (both versions are full versions, including compiler)
  • vue.cjs.js
  • vue.cjs.prod.js (development version, the code is compressed)
• global (all four versions can be imported directly through the scripts tag in the browser, and a global Vue object will be added after import)
  • vue.global.js (full version, including compiler and runtime)
  • vue.global.prod.js (full version, including compiler and runtime, this is the development version, the code is compressed)
  • vue.runtime.global.js
  • vue.runtime.global.prod.js
• browser (Esm is included in all four versions, the browser's native modular approach, you can <script type="module" />import modules directly )
  • vue.esm-browser.js
  • vue.esm-browser.prod.js
  • vue.runtime.esm-browser.js
  • vue.runtime.esm-browser.prod.js
• bundler (these two versions do not package all the code, only the code used, it needs to be used with the packaging tool, which will make Vue smaller)
  • vue.esm-bundler.js
  • bue.runtime.esm-bundler.js

二 、 Composition API

• RFC (Request For Coments)
  • https://github.com/vuejs/rfcs
• Composition API RFC
  • https://composition-api.vuejs.org

1. Design Motivation

• Options API
  • Contains an object describing component options (data, methods, props, etc.)
  • Options API develops complex components, the code of the same functional logic is split into different options
• Composition API
  • A new set of APIs in Vue.js 3.0
  • A set of function-based APIs
  • The logic of components can be organized more flexibly

Three, performance improvement

1. Responsive system upgrade

Vue3 uses the Proxy object to rewrite the reactive system.

• The core of the responsive system in Vue.js 2.x, definePropertyrecursively traverse all properties during initialization and transform them into getters and setters
• ProxyRewrite the responsive system with objects in Vue.js 3.0
  • Can monitor dynamically added attributes
  • Can monitor deleted attributes
  • Can monitor the index and length properties of the array

2. Compiler optimization

Rewrite the DOM to improve rendering performance.

• Vue.js 2.x optimizes the diff process by marking the static root node
• In Vue.js 3.0, all static root nodes are marked and promoted. When diffing, only dynamic node content needs to be compared
  • Fragments (upgrade vetur plugin)
  • Static boost
  • Patch flag
  • Cache event handler

3. Optimization of source code volume

Reduce the size of large packages by optimizing the size of the source code and better TreeShaking support

• Some uncommon APIs have been removed in Vue.js 3.0
  • For example: inline-template, filter, etc.
• Tree-shaking
  • For example: unused modules in Vue3 will not be packaged, but core modules will be packaged. Keep-Alive, transition, etc. are all introduced on demand.

Four, Vite

Vue packaging tool. Vite means "fast" in French

1. ES Module

• Modern browsers support ES Module (not supported by IE)

• Load the module in the following way

• <script type="module" src="..."></script>

• Support the default lazy loading of the script of the module

• Modules with type="module" are lazily loaded, similar to the script tag setting defer

  • After the document is parsed, that is, after the DOM tree is generated, execute before triggering the DOMContentLoaded event

2. Quick as Vue-CLI

• Vite can run directly without packaging in development mode
• In the Vue-CLI development mode, the project must be packaged to run
• Vite uses Rollup packaging in a production environment
  • Package based on ES Module
• Vue-CLI is packaged with Webpack

3. Vite features

• Fast cold start
• Compile on demand
• Module hot update

4. Create project with Vite

• Vite create project

  npm init vite-app <project-name>
  cd <project-name>
  npm install
  npm run dev
  

• Create project based on template

  npm init vite-app --template react
  npm init vite-app --template preact