You should know, vue.js.

Objective

Team colleagues have been learning the front-end recently, the front-end technology stack of our group is mainly vue. In the process of communicating with colleagues, they found that they did not understand vue, so they sorted out the more questions they asked.

Why does the component data have to be a function?

Because components may be used in multiple places, but their data is private, each component will return a new data object, and if you share data, modifying one of them will affect the other components

Component communication

• Parent-Child component communication: props ,, $emit / $on provide / inject (2.2.0 new, mainly for high-level plug-in/component libraries to provide use cases)
• Communication for non-parent-child components: Event Bus
• Complex situation: Vuex

How to add components dynamically

Scene: In Vue, click button to randomly generate a, B, C component

• is
• render

Idea: Set up an array of components, button click once, push a component name, v-for traverse parts, and use is or render dynamically generate

Below, framework Related: https://zhuanlan.zhihu.com/p/32911022

What is Vue-loader?

Vue-loader is a webpack loader that can convert a single-file component to a JavaScript module

To quote a document:

• Default support ES2015 ;
• Allow other parts of the Vue component to be used webpack loader , such as for <style> use Sass and for use <template> Jade ;
• .vueA custom node is allowed in the file and then processed using a custom loader;
• The <style> <template> static resources are treated as modules and used webpack loader for processing.
• Simulate the CSS scope for each component;
• Supports hot overloading of development-time components.

Implementing the Vue SSR Fundamentals

Mainly by vue-server-renderer outputting the Vue component to HTML, the process:

1. The client entry-client the primary role on the DOM, and the server Entry-server in addition to creating and returning instances, routing matching and data prefetching
2. Webpack packaged client is Client-bundle, package server is Server-bundle
3. The server receives the request, loads the corresponding component according to the URL, and then generates HTML to send to the client
4. Client-side activation, Vue takes over the static HTML sent by the server at the browser, making it a dynamic DOM managed by Vue, to ensure a successful mix, the client and servers need to share the same set of data. On the server side, the data can be fetched before rendering and populated into the Stroe so that the data can be fetched directly from the store before the client mounts to the DOM. The first screen of Dynamic Data through window. Initial_state Send to Client

Data bidirectional binding principle

Common practices for implementing data binding:

• Object.defineProperty: Hijacking of various properties setter ,getter
• Dirty value detection: round-robin through specific events
• Publish/Subscribe mode: Publish by message and subscribe to a message

Vue uses data hijacking in conjunction with the Publisher-Subscriber pattern, which Object.defineProperty() enables the hijacking of attributes and the posting of messages to subscribers as data changes, triggering the corresponding listener callbacks.

Specific steps:

1. Realize Observer

Recursive traversal of data objects that need to be observe, including attributes of child Property objects, plus setter and getter . Implement a message subscriber, maintain an array to collect subscribers, data changes trigger notify, and then call the Subscriber's Update method

2. Realize compile

Compile parse the template directives, replace the variables in the template with data, and then initialize the rendered page view, and the node binding update function for each instruction, add subscribers to the listener data, once the data is changed, receive notification, update the view

3. Realize Watcher

Watcher subscribers are the bridge between observer and compile communication

The main things to do are:

• Add yourself to the attribute Subscriber (DEP) in the case of self instantiation
• itself must have an update () method
• When a property change dep.notice () notification is called, it can call its own update () method and trigger a callback bound in compile, then retire.

4. Implementing MVVM

MVVM, as the gateway to data binding, integrates observer, compile, and watcher to listen to their model data changes through observer, and to parse the compiled template instructions through compile. Finally, the communication bridge between observer and compile is built with watcher, and the view update is achieved with data change. Bidirectional binding effect of data model changes with view interaction change (input)

Reference: Anatomy Vue Principle & Implement two-way binding MVVM

Understanding of Vue.js's template compilation

The template will be compiled into an AST syntax tree, and the AST will pass generate to get the render function, and the return value of render is Vnode,vnode is the virtual DOM node of Vue.

• The parse process transforms the template into an AST abstract syntax tree using the regular.
• Optimize the process, flags the static node, and after the diff process skips the static node, improves performance.
• Generate process, generating a render string

Sishida has a very good article: the principle and implementation of the front-end template

Why Vue uses Virtual DOM？

On the one hand, for performance reasons:

• The cost of creating a real dom is high: The real DOM node implements a lot of properties, and Vnode only implements some of the necessary properties, compared to a lower cost to create a vnode.
• Trigger multiple browser redraw and reflow: Using Vnode, the equivalent of adding a buffer, so that all node changes caused by a data change, first modified in the Vnode, and then after the diff to all the nodes that make the difference, the DOM tree is modified. To reduce browser redraw and reflow

But performance is affected by the scene is very large, different scenarios may result in different implementations of the performance gap between the multiple, so relying on fine-grained binding and Virtual DOM which performance is better is not an easy question. The more important reason is to understand the coupling HTML dependency, which brings two very important benefits:

• No longer rely on the HTML parser for template parsing, you can do more AOT work to improve the efficiency of the runtime: through the template AOT compilation, Vue runtime volume can be further compressed, run-time efficiency can be further improved;
• Can render to the platform outside the DOM, achieve SSR, isomorphic rendering these advanced features, such as Weex framework application is this feature.

In summary, the Virtual DOM performance benefits are not the most important, and more importantly, it gives Vue the advanced features that the modern framework should have.

diff algorithm

This part is more complex, not understand, recommend a good article:
A diff algorithm for analytic vue2.0

Vue and react differences

Same point:

• All supportSSR
• All haveVirtual DOM
• Modular development
• Data-driven
• ...

Different points:

• Vue recommends a single-file component format using Webpack + Vue-loader, React Recommended practice is JSX + inline style
• Vue Virtual DOM is tracking each component's dependencies and does not render the entire component tree, react all subcomponents will re-render whenever the state is changed
• ...

What are the advantages of Vue?

• Low coupling. Views can be independent of model changes and modifications, a viewmodel can be bound to different "view", when the view changes the model can be unchanged, when the model changes when the view can be unchanged.
• Reusability. You can put some view logic in a viewmodel and let many views reuse this view logic.
• Independently developed. Developers can focus on business logic and Data Development (ViewModel), designers can focus on page design, and using Expression Blend makes it easy to design interfaces and generate XML code.
• can be tested. The interface is always more difficult to test, and now the test can be written for ViewModel.

Reference article: HTTPS://GITHUB.COM/ALVIN-LIU/BLOG/ISSUES/13

You should know, vue.js.