🐮 avatar interviewer out of 30+Vue interview questions, super dry goods (with the answer) | the New Year essay

Vue borrows from Angular’s template and data binding technologies and React’s componentization and virtual DOM technologies.

Website introduction: cn.vuejs.org/index.html

Key points: progressive JavaScript framework, core libraries plus plug-ins, dynamic user interface creation (asynchronous acquisition of background data, data display in the interface)

Features: MVVM mode; Code compact, small volume, high efficiency, suitable for mobile PC terminal development; It only focuses on the UI (similar to React) and can easily be developed by introducing Vue plug-ins or other third-party libraries.

Full name: model-view-viewModel, Model represents the data Model layer. The ViewModel is the bridge between the View and Model layers. Data is bound to the ViewModel layer and automatically rendered to the page. The ViewModel layer is notified to update data when the view changes.

Vue2: Object.defineProperty redefines all attributes in data. Object. DefineProperty can make data acquisition and setting add a intercepting function, intercepting the acquisition of attributes, and collecting dependencies. Intercepts updates to properties for notification.

Specific process: First Vue uses initData to initialize the parameters passed in by the user. Then it uses a new Observer to observe the data. If the data is of an object type, it calls this.walk (value) to process the object. DefineeReactive loop Object properties are used internally to define responsive changes, and the core is to redefine the data using object.defineProperty.

An array is defined by using object.defineProperty. We all know how to change an array: pop, push, shift, unshift, splice, sort, reverse. As soon as these methods execute and change the contents of the array, I’m just going to update the contents, so that makes sense.

1. It’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack, it’s a function hijack.

2. Each item in the array may be an object, so I will observe each item in the array (and only the objects in the array can be observed, and the observed items will not be observed).

Vue3: Use proxy to directly listen for changes in the object array.

• Native DOM binding: Vue calls createElm when creating the real DOM, and invokeCreateHooks are called by default. It iterates through the relative property processing code under the current platform, such as the updateDOMListeners method, passing in the add () method internally

• Component binding events, native events, custom events; Component bindings are implemented through the custom $on method in Vue.

(It can be understood as: The nativeOnOn of the component is equivalent to the ordinary element ON. The ON of the component will be processed separately.)

The V-Model can be thought of as the syntactic sugar (component) of the Value + Input method. The native V-Model generates different events and attributes depending on the tag. Parse an instruction.

Custom: write the model property and put the prop and event inside it

Vue is a component-level update. If asynchronous update is not adopted, the current component will be re-rendered every time the data is updated. Therefore, for the sake of performance, Vue will update the view asynchronously after this round of data update. Core idea nextTick.

Dep.notify () notifies watcher of the update, subs[I]. Update calls watcher’s update in turn, queueWatcher dequeues watcher, NextTick (flushSchedulerQueue) flusks the watcher queue in the nextTick (asynchronous).

The asynchronous method, the last step of asynchronous rendering, is closely related to the JS event loop. Using macro tasks and microtasks (setTimeout, promise, etc.), we define an asynchronous method. Multiple calls to nextTick will put the method in a queue and asynchronously clear the current queue.

When is it called?

• BeforeCreate: Called after instance initialization and before data observation
• Created: called after the instance is created. Instance completion: data observation, operation of attributes and methods, watch/eventEvent callback. There is no $el .
• BeforeMount: called before mounting, related renderFunction is called for the first time
• Mounted: Was newly createdvm.$elReplace, and call the change hook after mounting the instance.
• BeforeUpdate: Called before data update, which occurs after the virtual DOM is rerendered and patched, and after which the change hook is called.
• Updated: The virtual DOM is rerendered and patched due to a data change, after which the change hook is called.
• BeforeDestroy: Called before the instance is destroyed, the instance is still available.
• All event listeners and all child instances will be removed from the Vue instance. You will see that the Vue instance is destroyed and all the event listeners will be removed from the Vue instance

What can be done within each lifecycle?

• Created: The instance has been created and can be used to request data or resources because it is the first to be triggered.
• Mounted: The instance has been mounted and some DOM operations can be performed.
• BeforeUpdate: You can further change the state in this hook without triggering rerendering.
• Updated: Performs DOM dependent operations, but avoid changing the state, which may result in an update wireless loop.
• Destroyed: You can perform some optimization operations to clear the timer and unbind the event.

In which lifecycle is Ajax placed? : is usually placed in Mounted to ensure logical unity because the life cycle is executed synchronously and Ajax is executed asynchronously. Singular server rendering SSR is also created because server rendering does not support mounted methods. When to use beforeDestroy? : The current page uses $on and needs to unbind the event. Know the timer. Unbind the event, scroll mousemove.

Render order: father before son; finish order: son before father

Update order: The parent updates the child, and the child updates the parent

Destruction order: father before son; completion order: son before father

• Communication between father and son: Father provides data to son using the attribute props; The son binds his father’s event via $on and triggers his own event via $EMIT (publish subscribe)

• $parent, $children,

Method to get parent and child component instances.

• The parent component provides the data and the child component injects it. Provide, inject, and use more plugins.

• Ref gets the component instance and calls the properties and methods of the component

• = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

• Vuex state management to achieve communication

Liverpoolfc.tv: vuex.vuejs.org/zh/

• Vuex is a state management pattern developed specifically for vue.js applications.
• The state self-management application consists of the following parts:
  • State, the data source driving the application;
  • View, which maps state to the view declaratively;
  • Actions, which responds to state changes caused by user input on the view. The following is a schematic diagram of unidirectional data flow:

  

• Vuex, multiple components share state, because – the simplicity of unidirectional data flow is easily broken:
  • Multiple views depend on the same state.
  • Behaviors from different views need to change the same state.

Related to the template compilation principle in Vue, the main process:

1. Convert the template to an AST tree. The AST uses objects to describe the real JS syntax (convert real DOM to virtual DOM).

2. Optimization of tree

3. Generate code from the AST tree

A virtual node is an object that describes a real DOM element. The template (real DOM) is first converted to an AST. The AST tree generates the render function through CodeGen. The _c method in the render function converts it to a virtual DOM

Time complexity: the complete DIFF algorithm of a tree is a time complexity of O(n*3), which is optimized by VUE into O(n).

To understand:

• Minimum number of updates, key is important. This can be a unique identifier for the node, telling diff that they are the same DOM node before and after the change

  • extension v-forWhy should there be key, there is no keyI’m going to use it violently. I’m going to give you an example like moving a node or adding a node (modifying the DOM), plus keyIt only moves the DOM to reduce manipulation.

• Only the same virtual node will be compared, otherwise the old one will be forcibly deleted and the new one will be inserted.

• Only comparisons are made on the same layer, not across layers.

Diff algorithm optimization strategy: four hit search, four Pointers

1. Old before and new before (in the case of inserting and deleting nodes)

2. Old after and new after (compared to the end, before insert or delete case)

3. Old before and new after (head to tail ratio, this happens, involves moving nodes, so the nodes that the new forward points to, move to the old after)

4. Old back and new front (tail to head ratio, this happens, involves moving the node, so the node that the new front points to, moves to before the old front)

Computed: The default computed is also a watcher that has a cache. The watcher computes the data when the dependent data changes, and reads the cached data when the data does not change. If one data depends on other data, use computed

Watch: You need to execute the function every time. Watch is more suitable for asynchronous operations when data changes. If you need to do something when some data changes, use Watch.

Method: Once the method is applied to the template, the view will be rerendered every time it changes, resulting in high performance overhead

• V-if Will not render the DOM element of the node where the current directive resides if the condition is not valid

• V-show simply toggles the current DOM display and hide

V-for has a higher priority than V-IF, which can cause performance problems by adding every element of V-IF.

• XSS attacks

• V-html replaces the elements inside the tag

When a component is rendered, the constructors of the child components are built and instantiated through the vue.extend() method. Finally, mount is done manually by calling $mount(). The patchVnode process is implemented when components are updated. The core of the process is the DIff algorithm.

Avoid data interaction in components. Multiple instances of the same component being reused will be created, using the same constructor if data is an object. In order to keep the components’ data independent, each component must return an object as the component’s state through the data function.

1. To save the result of packaging, asynchronous components are packaged separately, and jSONP is used for loading, effectively solving the problem of oversized files.
2. The core is that the package component definition becomes a function, a dependencyImport ()Syntax, you can achieve the split file loading.

See the official document in detail: cn.vuejs.org/v2/guide/co…

• mutationIt’s a synchronous update, $watchErrors are reported in strict mode
• actionIs an asynchronous operation that can be invoked after obtaining data mutationSubmit final data

• When a component virtual node is created, the child virtual nodes of the component are saved. When initializing components, the sons are classified by slot properties {a:[vnode],b[vnode]}

• The rendering component replaces the node with the corresponding slot attribute. (Slots are scoped to parent components)

• Scope slots are not parsed as child nodes of components. Is parsed into a function that is called for rendering when the child component is rendered.

• The scope of a normal slot rendering is the parent component, and the scope slot’s rendering scope is the current child component.

In fact, it is a matter of looking at the use of vue.mixin and mixing some common logic into functions for each lifecycle of a component.

Keep-alive caches components without uninstalling them when they are switched. Include /exclude, that is, activated and deactivated

Coding optimization:

• The event agent
• keep-alive
• Break up the component
• keyGuaranteed uniqueness
• Lazy route loading, asynchronous component
• If the throttle

Optimized Vue loading performance

• Import third-party modules on demand ( babel-plugin-component ）
• Lazy image loading

The user experience

• app-skeletonSkeleton screen
• shellapP shell
• pwa

SEO optimization

• pre-rendered