Close read Vue official documentation series 🎉

What is Vue?

Pronunciation (/vju /, similar to View) is a set of progressive frameworks for building user interfaces.

How to understand the progressive framework?

The easiest way to understand it is to compare Vue with Angular and React:

  • Angular is a compelling framework. No matter how complex your business functions are, Angular is very intrusive because you have to understand the module mechanics, dependency injection, and comment syntax before you can use them.
  • React is less aggressive than Angular, but it advocates functional programming, so you need to understand the concepts of pure functions, side effects, and JSX syntax before using React.

Compared to them, Vue is much more free, simple and easy to use. We can use Vue functionality on demand, incrementally and incrementally based on the application, from simple to complex.

Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, and other enhancements rely on third-party libraries and project build tools.

How to manage from bottom up?

Start at the bottom and write the basics well, such as implementing the page first and then adding effects and features layer by layer.

This section describes the Vue version

Major version

vue.js

The full version, packaged in the UMD module, includes both the compiler and runtime versions.

Compiler: Code used to compile template strings into JS rendering functions.

vue.runtime.js

The runtime version, which does not have a compiler, creates Vue instances and renders and processes the code for the virtual DOM.

Version Suffix

  • .commonBased on:CommonJSVersion of the module specification.
  • .esmBased on:ESModuleVersion of the module specification.
  • .esm.browser: available directly in the browserESModuleThe module.
  • Min: in the production version, the code will be compressed, and comments and warnings will be removed.

Runtime + compiler Vs includes runtime only

The full version includes both run-time and compiler parts that are used to parse template strings on the browser side.

// A compiler is required
new Vue({
  template: '<div>{{ hi }}</div>'
})
Copy the code

When vue-loader or Vueify is used, the build tool automatically compiles the templates in *. Vue into JavaScript rendering functions, and only the runtime version is used:

// No compiler is required
new Vue({
  render (h) {
    return h('div'.this.hi) // The rendering code is compiled by the build tool.}})Copy the code

We recommend using the runtime version because the runtime version is 30% smaller than the full version in terms of file size.

Common / Esm Vs UMD

For UMD releases, the development/production mode is hard-coded: uncompressed code for development and compressed code for production.

The CommonJS and ES Module versions retain the original process.env.node_env detection, which is easy to use in combination with build tools to control the form of source code based on different environment variables.

CSP environment

The Vue runtime version supports running in an environment with content Security Policy (CSP) enabled.

content-security-policy.com/

Declarative rendering

At its heart, Vue. Js is a system that allows for declarative rendering of data into the DOM using concise template syntax.

The core of declarative rendering lies in the responsiveness of data, from the traditional command way of changing data and controlling rendering and processing behavior to the data-based changes that drive DOM rendering and processing behavior.

Vue components and custom elements

Both Vue components and Vue custom elements follow W3C Web component specifications, such as slot APi and IS dynamic component properties.

Due to browser support for native custom elements, Vue replaces custom elements in templates by default, but if necessary, Vue components can be built and distributed as native custom elements through the Vue CLI.

vue-cli-service build --target wc --name my-element [entry]
Copy the code

Vue components enhance the functionality of native custom elements, most notably cross-component data flow, custom event communication, and build tool integration.