vue.js you should know

foreword

Colleagues in the group have been learning the front-end recently. Currently, the front-end technology stack of our group is mainly Vue. In the process of communicating with colleagues, I found that they didn't know much about Vue, so I sorted out the more questions asked.

Why does component data have to be functions?

Because components may be used in multiple places, but their data is private, each component must return a new data object. If data is shared, modifying one of them will affect other components.

component communication

Parent-child component communication: props, $emit / $on, provide / inject(new in 2.2.0, mainly to provide use cases for high-level plug-ins/component libraries)
Communication between non-parent-child components: event bus
Complications: vuex

How to dynamically add components

Scenario: In Vue, click the button to randomly generate one of the a, b, and c components

is
render

Idea: Set an array of components, click the button once, push a component name, v-fortraverse the components, and use isor renderdynamically generate

The following content is related to the framework: https://zhuanlan.zhihu.com/p/32911022

What is vue-loader?

vue-loader is a webpack loader that converts single-file components into JavaScript modules

Quoting the documentation:

Default support ES2015;
Allows to use other components of Vue components webpack loader, such as pair <style> usage Sass and pair <template> usage Jade;
.vue Allow custom nodes in the file, and then use custom loader for processing;
Treat the static resources in <style> and <template> as modules and use webpack loader them for processing;
Simulate CSS scope for each component;
Supports hot reloading of components during development.

Implement Vue SSR Fundamentals

Mainly by vue-server-rendereroutputting Vue components into HTML, the process:

The client-side entry-client is mainly used to mount on the DOM, and the server-side entry-server not only creates and returns instances, but also performs route matching and data prefetching.
The webpack packaging client is client-bundle, and the packaging server is server-bundle
The server receives the request, loads the corresponding component according to the url, and then generates html and sends it to the client
Client-side activation, Vue takes over the static HTML sent by the server on the browser side and turns it into a dynamic DOM managed by Vue. To ensure successful mixing, the client-side and the server-side need to share the same set of data. On the server side, data can be fetched before rendering and filled into stroe, so that data can be fetched directly from the store before the client mounts it to the DOM. The dynamic data of the first screen is sent to the client through window.INITIAL_STATE

Principle of two-way data binding

Common practices for implementing data binding:

Object.defineProperty: hijacks each attribute setter,getter
Dirty value detection: round robin through specific events
Publish/Subscribe Mode: Publish and subscribe to messages through messages

Vue uses the method of data hijacking combined with the publisher-subscriber mode, Object.defineProperty()which realizes the hijacking of attributes, and publishes messages to subscribers when the data changes, so that the corresponding monitoring callbacks are triggered.

Specific steps:

1. Implement Observer

Recursively traverse the data objects that need to be observed, including the attributes of the sub-attribute objects, and add the settersum getter. Implement a message subscriber, maintain an array to collect subscribers, trigger notify when data changes, and then call the subscriber's update method

2. Implement Compile

Compile parses the template instructions, replaces the variables in the template with data, then initializes and renders the page view, binds the update function to the node corresponding to each instruction, and adds subscribers that monitor the data. Once the data changes, receive a notification and update view

3. Implement Watcher

Watcher subscriber is the bridge of communication between Observer and Compile

The main things to do are:

Add yourself to the property subscriber (dep) when it is instantiated
It must have an update() method itself
When the property changes dep.notice() notification, it can call its own update() method and trigger the callback bound in the Compile, then it will be successful.

4. Implement MVVM

MVVM, as the entry point of data binding, integrates Observer, Compile and Watcher, monitors its own model data changes through Observer, parses and compiles template instructions through Compile, and finally uses Watcher to build a communication bridge between Observer and Compile to achieve Data change -> view update; view interaction change (input) -> two-way binding effect of data model change

Reference: Analyzing Vue Principles & Implementing Two-Way Binding MVVM

Understanding of template compilation of Vue.js

The template will be compiled into an AST syntax tree, and the AST will be generated to get the render function. The return value of render is VNode, which is the virtual DOM node of Vue.

The parse process converts the template into an AST abstract syntax tree using regular expressions.
The optimize process marks static nodes, and the post-diff process skips static nodes to improve performance.
generate process, generate a render string

Situ has a very good article: The principle and implementation of front-end templates

Why use vue `Virtual DOM`?

On the one hand, it is for performance considerations:

The cost of creating a real DOM is high: the real DOM node node implements a lot of properties, while the vnode only implements some necessary properties. In comparison, the cost of creating a vnode is relatively low.
Trigger multiple browser redraws and reflows: using vnode is equivalent to adding a buffer, so that all node changes brought about by a data change are first modified in vnode, and then diffed and then all nodes that generate differences are concentrated once Modify the DOM tree to reduce browser redraws and reflows

However, the performance is greatly affected by the scenario. Different scenarios may cause multiple performance gaps between different implementations. Therefore, it Virtual DOMis not an easy question to decide which one has better performance depending on fine-grained binding. The more important reason is to decouple HTMLdependencies, 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: Through template AOT compilation, the runtime volume of Vue can be further compressed, and runtime efficiency can be further improved;
It can render to platforms other than DOM, and implement advanced features such as SSR and isomorphic rendering. This feature is used by frameworks such as Weex.

To sum up, Virtual DOM the performance gain is not the most important, more importantly, it makes Vue have the advanced features that a modern framework should have.

diff algorithm

This part is more complicated and difficult to understand. I recommend a good article:
Parsing the diff algorithm of vue2.0

The difference between vue and react

Same point:

both supportSSR
haveVirtual DOM
component development
data driven
...

difference:

Vue recommends the single-file component format using webpack + vue-loader, and React recommends JSX + inline style
Vue Virtual DOMtracks the dependencies of each component and does not render the entire component tree. React will re-render all child components whenever the state should be changed.
...

What are the advantages of vue?

low coupling. The View can be changed and modified independently of the Model. A ViewModel can be bound to different "Views". When the View changes, the Model can remain unchanged, and when the Model changes, the View can also remain unchanged.
Reusability. You can put some view logic in a ViewModel and let many views reuse this view logic.
Independent development. Developers can focus on business logic and data development (ViewModel), designers can focus on page design, using Expression Blend can easily design the interface and generate xml code.
Testable. Interfaces have always been difficult to test, and now tests can be written against ViewModels.

Reference article: https://github.com/Alvin-Liu/Blog/issues/13