What you should know about vue.js

This article mainly on the Vue should be mastered in some knowledge points. It is just a prelude without too much depth, but I hope I can have a better understanding of Vue from various points according to this article and have a better positioning for myself. A front-end that only uses apis is not a good programmer.

Why does component data have to be a function?

Because components may be used in more than one place, but their data is private, each component returns a new data object, and if data is shared, modifying one of them affects the other components

Component communication

  • Parent-child component communication:$on,$emit
  • Communication of non-parent components: Event Bus
  • Complications: Vuex

How do I add components dynamically

Scenario: In VUE, click button to randomly generate one of components A, B, or C

  • is
  • render

Set a components array, button click once, push a component name, V-for traverses the components, and use is or render to dynamically generate

What is vue-loader?

Vue-loader is a Webpack loader that converts single-file components into JavaScript modules

To quote the document:

  • The default supportES2015;
  • Allows the use of other components for Vue componentswebpack loaderFor example,<style>useSassAnd for<template>useJade;
  • .vueAllow custom nodes in the file, and then use custom loaders for processing;
  • the<style> 和 <template>Static resources are treated as modules inwebpack loaderTo process;
  • Simulate the CSS scope for each component;
  • Support for hot overloading of development-stage components.

Vue SSR basic principles

Output vUE components to HTML using vue-server-renderer:

  1. The entry-client client is mounted to the DOM. The entry-server server creates and returns instances, and performs route matching and data preacquisition
  2. Webpack packages the client as a client-bundle and the packaged server as a server-bundle
  3. The server receives the request, loads the component based on the URL, and generates HTML to send to the client
  4. When the client is activated, the Vue takes over the static HTML sent by the server at the browser side, turning it into a dynamic DOM managed by the Vue. To ensure a successful mixing, the client and the server need to share the same set of data. On the server side, data can be retrieved before rendering and filled into the stroe so that data can be retrieved directly from the Store before the client is mounted into the DOM. The dynamic data for the first screen is sent to the client through window.initial_state

Principle of data bidirectional binding

Common practices for implementing data binding:

  • Object.defineProperty: hijacks attributessetter.getter
  • Dirty value detection: Round-robin by specific events
  • Publish/subscribe: Publish and subscribe messages

Vue uses a combination of data hijacking and the publisher-subscriber pattern, using Object.defineProperty() to hijack attributes and publish messages to subscribers when data changes, causing them to trigger corresponding listening callbacks.

Specific steps:

1. Implement Observer

Perform recursive traversal of data objects requiring Observe, including properties of child property objects, with setters and getters. Implement a message subscriber that maintains an array that collects subscribers, triggers notify, and calls the update method of the subscriber

2. Compile

Compile parses the template instructions, replaces variables in the template with data, initializes the render page view, and binds the corresponding node of each instruction to update function, adds subscribers to listen to the data, receives notification once the data changes, and updates the view

Implement Watcher

Watcher subscribers are the communication bridge between Observer and Compile

The main things to do are:

  • Add yourself to the attribute subscriber (DEP) during self instantiation
  • There must be an update() method itself
  • If you can call your own update() method and trigger the callback bound with Compile when notified of property changes to dep.notice(), you are done.

4. Implement MVVM

MVVM, as the entry of data binding, integrates Observer, Compile and Watcher, uses Observer to monitor its model data changes, and uses Compile to parse and Compile template instructions. Finally, Watcher is used to build a communication bridge between Observer and Compile to achieve data change -> view update; View Interactive Changes (INPUT) -> Bidirectional binding effect of data model changes

Reference: Analyzing Vue principle & Implementing bidirectional binding MVVM

An understanding of template compilation for vue.js

Template is compiled into the AST syntax tree, and the AST is generated to generate the render function, which returns VNode, the virtual DOM node of Vue

  • A parse process that converts a template into an AST abstract syntax tree using re.
  • Optimize process, mark static nodes, post diff process skips static nodes, improve performance.
  • Generate process, which generates the render string

Stuart has a very good article: the principle and implementation of front-end templates

Why is VUE adoptedVirtual DOM?

Partly for performance reasons:

  • The cost of creating a real DOM is high: A real DOM node, Node, implements many properties, whereas a VNode implements only the necessary properties, making the cost of creating a vNode relatively low.
  • Trigger multiple browser redraws and reflow: With vNode, you add a buffer, so that all node changes caused by a data change are first modified in the VNode, and then diff the DOM tree changes for all nodes with differences at once to reduce browser redrawing and backflow

However, performance is greatly affected by scenarios, and different scenarios may result in multiple performance gaps between different implementation schemes. Therefore, it is not easy to decide which one is better based on fine-grained binding and Virtual DOM. The more important reason is to decouple HTML dependencies, which brings two very important benefits:

  • No longer relying on HTML parser for template parsing, more AOT work can be done to improve runtime efficiency: by template AOT compilation, the runtime volume of Vue can be further compressed, and the runtime efficiency can be further improved;
  • It can render to platforms outside the DOM, implementing advanced features such as SSR and isomorphic rendering, which are used in frameworks like Weex.

To sum up, it is not the performance benefits of Virtual DOM that are the most important, but rather the advanced features that Vue has to offer in modern frameworks.

The diff algorithm

This part is more complicated, not easy to understand, recommend a good article: analysis of vue2.0 diff algorithm

Vue is different from React

Similarities:

  • All supportSSR
  • There areVirtual DOM
  • Componentized development
  • Data driven
  • .

Difference:

  • Vue recommends a single-file component format using WebPack + vue-Loader, while React recommends JSX + inline style
  • The vueVirtual DOMKeep track of each component’s dependencies, instead of rendering the entire component tree, react all child components will re-render whenever the state should be changed
  • .