PS: refer to some blogs, arrange for their own review ~

Talk about your understanding of VUE

Vue is an easy-to-use, flexible, and efficient progressive JavaScript framework. Its main feature is the MVVM mode. Small size, high efficiency, suitable for mobile PC development. Focus on the UI itself and you can easily introduce VUE plug-ins or other third-party libraries for development.

Talk more about MVVM

MVVM is fully called model-view-ViewModel, Model represents the data Model layer, View represents the View layer, ViewModel is the bridge between View and Model layer, data is bound to the ViewModel layer and automatically rendered to the page. View changes notify the ViewModel layer to update data.

How does VUE implement responsive data?

In Vue2. X, data hijacking combined with publisher – subscriber mode is adopted. Setter and getter of each attribute is hijacked through Object.defineProperty, and messages are published to subscribers when data changes and corresponding listener callback is triggered. There is a drawback, however, that you can’t do anything about new attributes on an object.

Object.defineProperty(data, 'count', {
  get() {},
  set(){},})Copy the code

Vue3. X is implemented by proxy. Intercepts “modify any key on data” and “read any key on data”.

new Proxy(data, {
  get(key){},set(key, value){},})Copy the code

How does VUE listen for array changes

The data is to redefine each item of the array using Object.defineProperty.

  • Using function hijacking, the array method is overwritten, specifically changing the prototype of the data to its own, when the user calls some methods of the array, it is its own method, and then notifies the view to update.
  • Every item in the array could be an object, every item in the array would be observed. (Only if it’s an object).

Why did VUE use asynchronous rendering

Vue is a component-level update. If asynchronous updates are not used, each update will re-render the current component. For performance purposes, VUE will update the view asynchronously after this data update. The core idea is nextTick.

Just a quick word about nextTick

Asynchronous methods, the last step in asynchronous rendering, are closely associated with THE JS event loop. An asynchronous method is defined using macro tasks and microtasks. Multiple calls to nextTick will queue the method, and the current queue will be emptied by the asynchronous method.

Parent component lifecycle call order

  • Render order: first parent after child, finish order: first child after parent.
  • Update order: Parent update leads to child update, and child update completes parent update.
  • Destruction order: first parent after child, completion order: first child after parent.

Vue component communication

  • Parent-child communication: The father provides data through attributespropsPass on to a son; The son through$onBind the parent event and pass again$emitTrigger their own events.
  • Using the father-child relationship$parent,$children.

To get a parent component instance:

  • The parent component provides the data and the child component injects it.
  • refGets the component instance and invokes its properties and methods.
  • Cross component communicationEvent Bus.
  • vuexState management enables communication.

How Vuex works

  • Vuex is a state management mode developed specifically for vue.js applications.
  • The state self-management application consists of the following parts:
    • State, the data source that drives the application.
    • View to declaratively map state to the view.
    • Actions, in response to changes in state caused by user input on the view.
  • Vuex, multi-component shared state, is easy to break due to the simplicity of one-way data flow.
    • Multiple views depend on the same state.
    • Actions from different views need to change the same state.

How do I get from the real DOM to the virtual DOM

Vue template compilation principle, the main process is:

  1. Convert templates into AST trees, which use objects to describe real JS syntax (converting real DOM into virtual DOM).
  2. Optimization of the tree.
  3. Generate code from the AST tree.

A virtual node is an object that represents a real DOM element. The template is first converted to an AST, and the AST tree generates the render function via codepen. The _c method in the render function converts it into a virtual DOM.

The DIFF algorithm

Time complexity: A tree’s full Diff algorithm is a time complexity O(n*3), vue optimized into O(n)

  • Minimum update,keyVery important. This is the unique identity of the node. TelldiffAlgorithm, whether they are the same DOM node before and after the change.
    • v-forWhy should there bekeyIf not, violence will be reused. addkeyDOM manipulation is reduced.
  • Only the same virtual node is used for fine comparison. Otherwise, the old node will be forcibly deleted and the new node will be inserted.
  • Only one layer is compared, not across layers.

Diff algorithm optimization strategy: four matching search, four Pointers

  1. The old and the new
  2. The old and the new
  3. Old before and new after
  4. The old before the new

The Computed and Watch

Computed: By default Computed is also a Watcher with a cache that computs only when the dependent data changes, and when the data does not change, it reads the cache data. If one data depends on other data, use computed.

Watch: The function needs to be executed every time. Watch is better suited for asynchronous operations when data changes. If you need to do something when some data changes, use Watch.

V-for and V-if cannot be used together

V-for has a higher priority than V-if. If used continuously, each element of V-IF will be added as follows, causing performance problems.

Why is data in a component a function

Avoid data interaction between components. When the same component is reused multiple times, multiple instances are created, which are essentially the same constructor. If data is an object, the object is of the reference data type, which affects all instances. To ensure data independence for components, each component must return an object as the state of the component through the data function.

keep-alive

Keep-alive can cache components so that the current component will not be uninstalled when the component is switched.