Vue: See you often

Compile vUE common basic interview questions

1. Talk about your understanding of the MVVM development model

MVVM is divided into Model, View and ViewModel.

Model: Represents the data Model, in which data and business logic are defined;
View: represents the UI View, responsible for the display of data;
ViewModel: responsible for monitoring data changes in Model and controlling view updates, and handling user interaction operations;

The Model and View are not directly related, but through the ViewModel to be connected, Model and ViewModel have two-way data binding relationship. So when data changes in the Model, it triggers a refresh of the View layer, and data changes in the View due to user interactions are synchronized in the Model.

This mode automatically synchronizes the data between the Model and View, so developers can only focus on the maintenance of the data instead of manipulating the DOM themselves.

2. Common Vue commands

V-text: The InnerText property of an element, used for data binding
V-html: The InnerHTML attribute of the element, used to bind a section of HTML
V-bind: assign an attribute to an element,v-bindThe back is: Attribute name =[Variable name], abbreviated asAttribute name:
V-for: Cyclic rendering of a list. grammarv-for="item in data"Data can be an array or an object
V-show, V-if: Controls the display and hiding of page elements
V-if, v-else, v-else:v-ifConditional rendering and JavaScript conditional judgment statementsIf, else, else ifVery similar.
V-on: binds events to elements, usageV-on: Event name =" method"
V-model: Implements bidirectional data binding
V-pre: Bypassing the compilation of the element and its children, that is, treating the node and its children as a static node
V-once: The template only displays the data when it is updated for the first time. The content is not automatically updated when the data referenced in the DOM is updated again

3. V – if and v – show

V-show controls only how elements are displayed, switching the display attribute back and forth between block and None;

V-if controls whether the DOM node exists or not.

The main difference is whether or not to render. When we need to switch the show/hide of an element frequently, using V-show saves more on performance. Using V-if makes more sense when you only need to show or hide once.
When v-if is used with V-for, v-for has a higher priority than V-if, which means that V-IF will be repeated separately in each V-for loop. Therefore, it is not recommended to use v-if and V-for together.
If v-if and v-for are used together, vUE will automatically indicate that v-if should be placed in the outer layer.

4. V – model principle

V-model is a powerful directive that automatically binds the value of the native form component to the value of your choice. We often use it for bi-directional binding. View layer input value affects data attribute value, data attribute value changes will update the view layer value changes.

Dependency collection: When a component initializes, such as a Render function that references a responsive object, it fires the getter for that object’s property and puts the Render function in the object’s subscriber list (track).
The next time the response sets the property of the reactive object, the getter for the property of the object is fired and the corresponding trigger is called.

1. Basic understanding of implementation principle: Trigger input event to modify value

The V-Model is a syntactic sugar that actually does two steps:

V-bind: binds responsive data
The INPUT > tag has an onInput event that is similar to the onchange event, except that the onInput event fires immediately when the element value changes and the onchange event fires when the element loses focus.

2, deep understanding: using Object.defineProperty() data hijacking to achieve.

One of the biggest advantages of many frameworks currently in use is that data binding can be implemented without the need for manual DOM manipulation, and one of the principles of their implementation is data hijacking.

Object.defineproperty () implements data hijacking

Object.defineproperty (obj,prop, Descriptor) is used to define a new property directly on an Object, or to modify an existing property. But you can’t listen for array changes.

In Vue, we use Object.defineProperty to hijack setters and getters for Object properties and “plant” a listener to notify when data changes. We have complete control over the setting and reading of object properties. Getter functions are used for dependency collection when data is read, storing all watcher in the corresponding DEP; Setters are the ones that tell all watchers to update when the data is updated.

DefineProperty (a, 'b', {enumerable: false, different: false, get: function(){console.log(' c '+' x '); {}, set: function (newVal). The console log (' b '+' has been changed, and the new '+' b '+' = '+ newVal); }}); a.b = 2; // the new b=2 a.b; // b is accessedCopy the code

Get: Calls back to this method once the target property has been accessed and returns the result of the operation to the user.

Set: This method is called back once the target property is assigned a value.

Note: When using getter or setter methods, the writable and value properties are not allowed

5. How to optimize the slow loading speed of the first screen of SPA application?

To reduce the size of app.bundel, let the browser download resource files in parallel, improve the download speed;
When routing is configured, pages and components are introduced in a lazy way to further reduce the size of app.bundel, and the corresponding JS file is loaded when a component is called.
Add a front-screen loading diagram to improve user experience;

6. Transfer values between VUE components

Components are one of the most powerful features of vue.js, and the scope of component instances is independent of each other, which means that data between different components cannot be referenced to each other. In general, components can have the following relationships:

As shown in the figure above, A and B, B and C, B and D are all father-child relationships, C and D are brothers, and A and C are atavistic relationships (possibly multiple generations apart).

ref 与 $parent / $childrenApplicable to parent-child component communication

Ref: If used on a normal DOM element, the reference refers to the DOM element; If used on a child component, the reference refers to the component instance

$parent /$ Children: accesses the parent/child instance
Parent components pass dataprops/$emit
EventBus ($emit / $ON)This approach uses an empty Vue instance as the central event bus (event center), which triggers events and listens for events to communicate between any component, including parent, generational, and sibling components
$emit/$onAn empty Vue instance acts as the central event bus (event hub), which is used to trigger and listen for events, enabling communication between any component, including parent, sibling, and cross-level, in a clever and lightweight way
Attrs/Listeners are suitable for intergenerational component communication

attrs: contains property bindings (except class and style) in the parent scope that are not recognized (and retrieved) by prop. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included, and the internal component can be passed in via v−bind=”attrs”. Often used in conjunction with the inheritAttrs option.

listeners: contains a V −on event listener in the parent scope (excluding the. Native modifier). Listeners can notice the process by means of V −on=” Listeners: V-ON event listeners in the parent scope (without the.native modifier). The listeners can be listeners of V-on events in the parent scope (native modifiers are not included) via V-on =”listeners: Internal components can be passed on via V − ON =” Listeners”
provide / injectIt is suitable for intergenerational component communication

The ancestor component provides variables through provider, and the descendant component injects variables through Inject.

Provide/Inject API mainly solves the communication problem between cross-level components, but its usage scenario is mainly that sub-components obtain the state of the upper level components, and a relationship between active provision and dependency injection is established between cross-level components.
vuexIt is suitable for communication between father-child, intergenerational, and sibling components

Vuex’s state storage is reactive. When the Vue component reads the state from the Store, if the state in the store changes, the corresponding component is updated efficiently accordingly.

The only way to change the state in a store is to commit mutation explicitly. This allows us to easily track each state change.

7.vuex

Vuex implements a unidirectional data flow and stores data in a global State. Of course, if Vuex is simple and has few shared states, you can use vuue. Observe to replace Vuex without installing a library.

When a component wants to change data in State, it must do so through Mutation, which also provides a subscriber pattern for external plug-in calls to get updates to State data.
When all asynchronous operations (common in calling back-end interfaces to get updated data asynchronously) or batch synchronous operations need to go to Action, but the Action cannot directly modify the State, so the State data still needs to be modified by Mutation. Finally, render to the view as the State changes.

Properties: State, Getter, Mutation, Action, Module

State => Basic data (where data source is stored), defines and initializes the global state.
Getters => Data derived from the base data, dependent on the State in the State, secondary wrapping, does not affect the State source data.
Mutations => Changes the State as a function, and must be synchronous.
Actions => for Mutation submission, which can contain any asynchronous operation.
Modules => If the application is complex, the Store will be bloated with a large object. Module allows us to modularize the Store.

8. com puted and watch

computed:
- Evaluates properties, depends on other property values, and values have caching properties. The next fetched value is recalculated only if the value of the attribute it depends on changes.
- Computed is used when an attribute is affected by more than one attribute
- Applies to numerical calculations and depends on other attributes. Because you can take advantage of the caching feature, you don’t have to recalculate every time you get a value.Shopping cart checkout time
watch:
- When one data affects multiple data sets, watch is needed
- Observe properties and listen for changes in property values. Whenever the property value changes, the corresponding callback is executed.
- This method is suitable for asynchronous or expensive operations when data changes.Search data

9. Why must data be a function in vue component

The data in the component is written as a function, and the data is defined in the form of the return value of the function. In this way, every time the component is reused, a new data will be returned, which means that each component instance has its own private data space, and they are only responsible for the data they maintain, without causing confusion. In pure object form, all component instances share the same data, so change one all changed.

Because of the nature of JavaScript, in Component, data must exist as functions, not objects.
Key is needed to make a unique identification for each node, and Diff algorithm can correctly identify this node. The main purpose is to update the virtual DOM efficiently.

9. $nextTick use

When you modify the value of data and immediately retrieve the dom element value, you cannot retrieve the updated value. You need to use the $nextTick callback to render the modified data value and update it to the DOM element before retrieving it.

10. Differences, advantages and disadvantages between single-page application (SPA) and multi-page application (MPA)

SPA: In layman’s terms, this is an application that has only one home page, and the browser starts by loading all the necessary HTML, JS, and CSS. All page content is contained in this so-called home page. However, when writing, it is still written separately (page fragment), and then dynamically loaded by the routing program during interaction, single-page page jump, only refreshing local resources. It is mainly used on PCS.
MPA: The entire page is refreshed when multiple pages exist in an application

Advantages of single page: good user experience, fast, content change does not need to reload the whole page, based on this point spa less pressure on the server; Front and rear end separation; The effects of the page will be cool (such as a special animation when switching between pages).

Single page disadvantages: bad for SEO; Navigation is not available. If you must navigate, you need to implement forward and backward. (because it is a single page and cannot use the browser’s forward and backward function, so you need to build your own stack management); The initial loading is time-consuming; Page complexity has increased considerably.

11. Vue common modifier

.stop: equivalent to JavaScript event.stopPropagation() to prevent event bubbles; .prevent: Equivalent to event.preventDefault() in JavaScript, to prevent the preset behavior from being performed (if the event is cancelable, cancel the event without stopping further propagation of the event); .capture: In contrast to the direction of event bubbling, events are captured from the outside in; .self: triggers only events within its own scope, no child elements; .once: Triggers only once.

12. Vue has two core points

Data-driven: ViewModel to ensure consistency between data and view. Component systems: The application UI can be thought of as being entirely composed of component trees.

13. Vue life cycle

BeforeCreate: After new a vue instance, only some default lifecycle hooks and default events are left uncreated. When the beforeCreate life cycle is executed, the data in data and methods are not initialized. You cannot use data in DATA and methods in Methods at this stage
Create: Data and methods are already initialized. If you want to call methods in methods or manipulate data in data, you can do it in this stage at the earliest
BeforeMount: When this hook is executed, the template is compiled in memory but not yet mounted to the page, the page is still old
Mounted: When this hook is mounted, the Vue instance is initialized. At this point, the component leaves the creation phase and enters the run phase. If we want to manipulate DOM nodes on the page through plug-ins, we can do so at the earliest in this and phase
BeforeUpdate: When executing this hook, the data displayed in the page is old, the data in data is updated, and the page has not yet been synchronized with the latest data
Updated: The data displayed on the page is updated with the data in data
BeforeDestory: The Vue instance moves from run to destroy, where all data and methods, instructions, filters… They’re all available. It hasn’t really been destroyed yet
Destroyed: all data, methods, commands, filters… They are all unavailable. The component has been destroyed.

The following commands are triggered when the interface is loaded for the first time: beforeCreate, created, beforeMount, mounted

Created: Called before a template is rendered to HTML, usually by initializing some property values and then rendering to a view.
Mounted: Specifies whether to perform operations on AN HTML DOM node after the template is initialized.

To get the data: generally created/beforeMount/mounted. For example, if you want to manipulate the DOM, you should only do so when mounted.

14.vue-router

1. Vue is used to write and route a plug-in. Components: router-link and router-view

2. Router-link component of vue-Router module. The children array defines the child routes

3. Define dynamic routes. In the index.js file under the router directory, add /:id to the path attribute. Use the params.id of the Router object.

4. Navigation hook

- Global navigation hook: router. BeforeEach (to,from,next). - Hooks within components - Separate routes to exclusive componentsCopy the code

5. Navigation Guard

Global front-guard: Triggered before a route jump to do some logon authentication before executing the next method.

const router = new VueRouter({}) router.beforeEach((to, from, next) => { ... // The next method must be executed to trigger a route jump next()})Copy the code

Global resolution guard: similar to beforeEach, it is triggered before a route jump. The difference is that it is triggered before a route jumpAfter all the guard and asynchronous routing components within the component are resolvedThat is, beforeRouteEnter is called within the component.

const router = new VueRouter({}) router.beforeResolve((to, from, next) => { ... // The next method must be executed to trigger a route jump next()})Copy the code

Global post-hooks: Unlike guards, these hooks do not acceptnextThe function also does not change the navigation itself.

router.afterEach((to, from) => {
  // ...
})
Copy the code

Route Exclusive Guard: You can define beforeEnter directly on route configuration

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      beforeEnter: (to, from, next) => {
      
      }
    }
  ]
})
Copy the code

Guards within a component: The following routing navigation guards can be defined directly within the component

const Foo = { template: `... ', beforeRouteEnter(to, from, next) {// Cannot get component instance this // Before the guard executes, }, beforeRouteUpdate(to, from, next) {// The current route changed, This}, beforeRouteLeave(to, from, next) {// Navigation is called when leaving the component}}Copy the code

6. Route parameters are transmitted

The routing configuration

// Route configuration {path: '/detail/:id', name: 'detail ', Component: () => import('./ detail.vue ')} // Redirect let id = 1 this.$router.push({path: '/detail/${id}'}) // Get this.$route.params.idCopy the code

The URL does not show our passed parameters, but it does get them in the child component. Of course, there are problems: there are refresh missing parameters. To avoid route loss, the route configuration must be the same as that in scheme 1. The reason is that the second method of passing parameters is carried in the push function of the previous page, and the refresh has no push action.

// Route configuration {path: '/detail', name: 'detail', Component: $route. push({name: 'Detail', params: {id: {name: 'Detail', params: {id: {name: 'Detail')} Id}}) // Get the parameter this.$route.params.idCopy the code

The routing configuration

// Route configuration {path: '/detail', name: 'detail', Component: $router.push({name: 'Detail', query: {id: $router.push({name: 'Detail', query: {id: $router.push({name: 'Detail', query: {id: $router.push({name: 'Detail', query: {id: Id}}) // Get the parameter this.$route.query.idCopy the code

15. `hash`,`history`and`abstract`

Hash: the hashchange event that listens on, the # symbol in the URL of the address bar; The hash, while present in the URL, is not included in the HTTP request and has no impact on the back end, so changing the hash does not reload the page. Good compatibility, support browsers of earlier versions and Internet Explorer.
History: The history mode listens for pushState and PopState (browser-specific), which are applied to the browser’s history stack and provide the ability to modify the history in addition to the existing back, forward, and Go methods. It’s just that when they make changes that change the current URL, the browser doesn’t immediately send requests to the back end.
Abstract: All JS modes are supported. Vue-router verifies the environment itself. If no browser API is found, the route is automatically forced into Abstract mode. Abstract mode is also used in the mobile native environment.

Usage Scenarios:

In general, hash and history will work, unless you’re more concerned with the appearance level, and the # symbol does look a little ugly in the URL.

The history advantages:

PushState () sets the new URL to any URL of the same origin as the current URL; Hash can only change the part after #, so you can only set the URL of the same document as the current URL.
PushState () sets the new URL to be exactly the same as the current URL, which also adds the record to the stack; The new hash value must be different to trigger the action to add the record to the stack;
PushState () uses the stateObject argument to add any type of data to a record; Hash can only add short strings;
PushState () sets the title property in addition for later use.

The history disadvantage:

/hd/{:path} = /hd/{:path} = /hd/{:path} = /hd/{:path

16. Implementation principle of Vue nextTick

NextTick: Executes a deferred callback after the next DOM update loop ends. It is used to retrieve the updated DOM after modifying the data. Source location: Vue/SRC /core/util/next-tick.js is implemented in the order of whether the browser supports promise->mutation-observe->setImmediate->setTimeout. The effect is roughly the same as setTimeout

Using the concept of an asynchronous lock, only one flushCallbacks are in the task queue at any one time. When pengding is false, there is no flushCallbacks in the browser task queue. When pengding is true, the browser task queue is already loaded with flushCallbacks. When the flushCallback function is executed, pengding is set to false again, indicating that the next flushCallbacks can enter the task queue.
Environment capability detection, select the most efficient (macro task/micro task) for packaging execution, ensure that the synchronization code is completed before performing operations such as DOM modification.
FlushCallbacks are copied before flushing. To prevent nextTick from nesting nextTick, the loop does not end.

Vue source code core

Template compiler
Virtual DOM and diff
Virtual DOM to real DOM
Reactive principle based on dependency collection

18. Diff algorithm of Vue

Core source: vue/SRC/core/vdom/patch. Why js diff, namely contrast, depth-first, both ends

The reason we need diff in the first place is that dom manipulation is expensive, so we need to minimize the differences between the old and new virtual DOM and reuse the original DOM as much as possible
Since we rarely move dom across hierarchies, the DIff algorithm only compares children under the same parent node, making the algorithm’s time complexity O(n).
Depth-first, compare the new Vnode to find the corresponding old vnode, and then execute patchChildren to enter the comparison of child nodes, so it is depth-first
Compare the first and last of the old VNode array with the first and last of the new VNode array in turn. If there is a match, enter the comparison of their child nodes. If there is no match, find the index corresponding to the first node of the new Vnode array through the key index. If you still can’t find it, create a new VNode. When the old vNode array still has nodes, but the new vNode array has been traversed, remove the corresponding extra real DOM

19. The slot slot

Slot Indicates that slot is prepositioned in the component template. When a component is reused and a slot label is used, the content in the slot label is automatically replaced by the slot label in the component template as an outlet for the distribution content. The main function is to reuse and expand components, do some customized components processing.

The default slot

// Child <template> <slot> <div> Default slot alternative </div> </slot> </template> // parent <template> <Child> </div> </template>Copy the code

Named slot: Slot tag does not existnameProperty, is the default slot. havenameProperty, is the named slot

</slot> <slot name="content"> </slot> </template> // parent <template> <Child> <template v-slot:default> Default... </template> <template V-slot :content> Contents... </template> </Child> </template>Copy the code

Scope slot: Properties that a child binds to a scope to pass information about the component to the parent. These properties are hung on objects accepted by the parent

// Child <template> <slot name="footer" childProps=" Child "> Scope slot content </slot> </template> // Parent component <template> <Child v-slot="slotProps"> {{ slotProps.childProps }} </Child> </template>Copy the code

20. Vue.directive

Vue.directive can register both global and local directives.

The instruction definition function provides the following hook functions

Bind: called when the directive is first bound to an element (only called once)
Inserted: Used when a bound element is inserted into a parent (called if the parent exists)
Update: Called when the template to which the bound element belongs is updated, regardless of whether the binding value changes. By comparing the binding values before and after the update.
ComponentUpdated: Called when the template to which the bound element belongs completes an update cycle.
Unbind: Called only once, when an instruction is unbound from an element.

The project involves one-key copy and permission control, which can be controlled by instruction. The purpose is to simplify our workload.

21. The Vue filter

Vue filters are available in two places: double curly brace interpolation and V-bind expressions. This feature has been deprecated in VU3.

Local filter

<div>{{ message | formatMessage }}</div> </template> <script> export default { filters: { formatMessage: Function (value) {return value}}} </script>Copy the code

Global filter

Return value})Copy the code

Filters can be executed in series from left to right, with the second filter input value being the output value of the first filter.

<div>{{ message | formatMessage1 | formatMessage2 }}</div>
Copy the code

22. Comparison between proxy and Object.defineProperty

The advantages of Proxy are as follows:

Proxies can listen directly on objects rather than properties;
Proxy can listen for array changes directly;
Proxy has up to 13 interception methods, not limited to Apply, ownKeys, deleteProperty, HAS, and so on
Object.defineproperty Does not exist;
Proxy returns a new Object. We can only manipulate the new Object to achieve our purpose. Object.defineproperty can only be modified by iterating through Object attributes.
Proxy as the new standard will be subject to browser vendors focus on continuous performance optimization, which is the legendary performance bonus of the new standard;

“Object.defineproperty has the following advantages:”

It has good compatibility and supports IE9, but Proxy has browser compatibility problems and cannot be smoothed by Polyfill. Therefore, the author of Vue announced that Proxy can be rewritten until the next big version (3.0).

23. Custom components

Create your component file (smithButton.vue) in the Components directory, script must be usedexport default {
Import in the required page (component) :The import smithButton from '.. / components/smithButton. Vue '
Injected into the components property of vue’s child components,components:{smithButton}
intemplateView,<smith-button> </smith-button>
smithButtonName, when usedsmith-button.

24. Understanding the compilation of vue.js template

The render function returns VNode (Vue’s virtual DOM node).

First, compile the template into an AST syntax tree using the Compile compiler. Compile is the return value of createCompiler. CreateCompiler is used to create compilers. Compile is also responsible for merging options.
The AST then generates the render function by generating (converting the AST syntax tree into a render funtion string). The render returns VNode, which is a Vue virtual DOM node containing (tag name, child nodes, text, etc.)

25. Vue project optimization

Code level optimization

V-if and V-show are used in different scenarios
Computed and Watch distinguish usage scenarios
V-for traversal must add a key to the item and avoid using v-if at the same time
Long list performance optimization
Destruction of events
Lazy loading of image resources
Route lazy loading
The introduction of third-party plug-ins on demand
Optimize infinite list performance
Server render SSR or prerender

Webpack level optimization

Webpack compresses images
Reduce redundant code from ES6 to ES5
Extract common code
Template precompilation
Extract the COMPONENT’s CSS
Optimize SourceMap
Build results output analysis
Compilation optimization of Vue project

3. Optimization of basic Web technology

Enable Gzip compression
Browser cache
The use of CDN
Use Chrome Performance to find Performance bottlenecks

26. Vue3.0 new features

Detection mechanism changes

3.0 will bring a proxy-based Observer implementation that provides reactive tracing with full language coverage. This removes many of the limitations of the object.defineProperty-based implementation in Vue 2:
- Only properties can be monitored, not objects
- Detect the addition and removal of attributes;
- Detect array index and length changes;
- Supports Map, Set, WeakMap, and WeakSet.

The new Observer also provides the following features:

A public API for creating Observables. This provides a simple and lightweight cross-component state management solution for small to medium scale scenarios.
- Lazy observation is used by default. In 2.x, no matter how large the equation data is, it will be observed at startup. If your data set is large, this can cause significant overhead at startup time. In 3.x, only the data used to render the first visible part of the application is observed.
- More accurate notification of changes. In 2.x, forcing a new attribute through vue.set causes the Watcher that depends on the object to be notified of the change. In 3.x, only the Watcher that depends on a particular property is notified.
- Immutable Observable: We can create “immutable” versions of values (even nested properties) unless the system temporarily “unlocks” them internally. This mechanism can be used to freeze prop transfers or changes outside the Vuex state tree.
- Better debugging: Can we use the new renderTracked and renderTriggered hooks to track exactly when and why components are being rerendered

There are no major changes to the template, only the scope slot has been changed. 2.x changed the scope slot and the parent component will be re-rendered, while 3.0 changed the scope slot to function mode, which will only affect the re-rendering of child components and improve rendering performance. As for the render function aspect, vue3.0 will also make a number of changes to make it easier to use the API directly to generate the VDOM.
Components in Vue2. X pass in a set of options declaratively, and TypeScript is combined with decorators, which are functional but cumbersome. 3.0 changes the way components are declared to be class-like, making it easy to integrate with TypeScript. In addition, the source code for Vue is written in TypeScript. In fact, when the functionality of the code is complex, it is necessary to have a static type system to do some auxiliary management. Now vue3.0 is fully rewritten in TypeScript, making it easier for exposed apis to incorporate TypeScript. Static type systems are really necessary for the maintenance of complex code.

The changes to VUe3.0 are comprehensive, with only three main areas covered above, as well as some other changes:

Support for custom renderers, which allows WEEX to be extended by custom renderers instead of forking the source code.
Fragment (multiple root nodes) and Protal (rendering components in other parts of the DOM) components are supported for specific scenarios.
Based on Treeshaking optimization, more built-in features are provided.

27. Source code structure