What is your understanding of MVVM?

MVVM hides the control layer on the basis of MVC.

Vue is not an MVVM framework, it is a view-level framework.

ViewModal is a bridge that connects data to a view.

What is your understanding of responsive data in Vue?

When the values of arrays and object types change, we add getters and setters to all attributes using defineReactive with the help of defineProperty. Users can perform certain operations when setting values and parameters.

Pitfalls: Only the outermost attributes can be monitored; if they are multi-layered, full recursion is required.

Dep [watcher, watcher] deP [watcher, watcher] set

How to detect array changes in Vue?

There is no defineProperty on the array in VUE. Instead, the seven methods of the array are overridden. Respectively is:

  • push
  • shift
  • pop
  • splice
  • unshift
  • sort
  • reverse

Because all of these methods change the array itself.

The index and length of an array cannot be monitored.

How is dependency collection implemented in Vue?

When the Vue is initialized, it is compiled after being mounted. Generate renderFunction.

And when it’s evaluated, it collects the watcher and puts it in the DEP.

When the user changes the value, watcher is notified to update the view.

How to understand the principle of template compilation in Vue?

The core of the problem is how to convert template into the render function.

  1. Convert the Template module to the AST syntax – parserHTML
  2. Marking static syntax (some nodes do not change)
  3. Regenerate the code – codeGen, wrapping the string with the with syntax

How are Vue lifecycle hooks implemented?

Vue’s lifecycle hooks are callback functions that are called during component instance creation. Hooks are handled internally, maintaining hook functions as arrays.

What are the life cycles of Vue components?

  • BeforeCreate is called after instance initialization, but before data observation observer and event and watcher events are configured
  • The Created instance has been created, and in this step, the following configuration is completed
    • The data observed
    • Property and method operations
    • Watch/Event time callback
    • $el has not been generated
  • BeforeMount is called before mounting, Render is not called yet
  • Mounted el is replaced by a vm.$el created by the instance
  • BeforeUpdate Is called when data is updated, which occurs before the virtual Dom is re-rendered and patched
  • Update is called after the virtual Dom is re-rendered and patched due to data changes
  • BeforeDestroy Called before instance destruction
  • Called after the Destroyed instance is destroyed, everything in the Vue instance is unbound, all event listeners are removed, subinstances are destroyed, and the hook is not called during server rendering
  • Keep-alive (activated & deactivated)

The usage scenarios and principles of vue.mixin?

The function of Vue mixins is to separate the common business logic, similar to the principle of object inheritance. When components are initialized, mergeOptions method will be called to merge, using the strategy mode for different attributes to merge. If there is a conflict between the mixed data and the data of the component, use the data of the component.

Disadvantages: name conflict, unclear data source

Why does Vue’s component Data have to be a function?

New Vue is a singleton and does not perform any merge operations, so the root instance does not have to verify that data must be a function. The component’s data must be a function to prevent contamination of both components’ data. If they’re both objects, they’re going to point to the same address when they merge. And if it’s a function, called when it’s merged, it creates two Spaces.

X. Please explain the principle of nextTick.

NextTick is a microtask.

  • The callbacks in nextTick are deferred callbacks that are executed after the next Dom update cycle ends
  • Can be used to get the updated Dom
  • Data updates in Vue are asynchronous, and using nextTick ensures that user-defined logic is executed after the update

11. What is the difference between computed and Watch?

  • Both computed and Watch are based on Watcher.
  • Computed attributes are cached, dependent values do not change, and the calculation method does not repeat its value
  • Watch monitors the value change and calls the callback function when the value changes

How to implement vue. set method?

  • Vue adds DEP attributes to both the object and the array itself
  • When a property is added to an object that does not exist, the watcher on which the object depends is triggered to update it
  • When an array index is changed, the splice method of the array itself is called to update the array

Why does Vue use virtual Dom

  • The virtual DOM is an abstraction of the real DOM by using JS objects to describe the real DOM
  • Because the performance of direct Dom operation is low, but the operation efficiency of JS layer is high, Dom operation can be converted into object operation. Finally, Dom is updated through diff algorithm to compare differences
  • The virtual Dom is independent of the real platform environment and can be implemented across platforms

What is the principle of Vue’s diff algorithm?

Vue diff algorithm is horizontal comparison, not considering the case of cross-level comparison. The internal use of deep recursion + double pointer way comparison

  • First, compare the two nodes to see if they are the same node
  • Compare attributes of the same node and reuse the old node
  • Compare the sons of the old node and the new node
  • Optimization comparison: head, tail, head, tail
  • Comparison search, reuse

15. Since VUE can accurately detect data changes through data hijacking, why do we need diff to detect differences?

  • Responsive data changes. Vue can actually tell the responsive system immediately when the data changes. But if you add Watcher to every attribute, the performance will be very poor.
  • If the granularity is too fine, the update will be inaccurate

Therefore, watcher + Diff algorithm is used to detect differences.

Please explain the function and principle of key

  • Vue During patch, the key is used to determine whether two virtual nodes are the same.
  • The absence of a key causes problems with the update
  • Try not to use indexes as keys

Talk about the understanding of components

  • Componentized development can greatly improve application development efficiency, testability and reusability
  • Common componentization techniques: properties, custom events, slots
  • Lower the update range to re-render the value of the changed component
  • High cohesion, low coupling, one-way data flow

Describe the component rendering process

Create a virtual node for the component -> Create a real node for the component -> Insert to the page

Describe the component update process

The patchVnode method is triggered by the property update, and the component’s virtual node invokes the PrePatch hook to update the property and the component.

Principle of asynchronous component

Render asynchronous placeholder nodes first -> Call forceUpdate to force the update after the component is loaded.

Advantages and principles of functional components

  • Features of functional components: stateless, no lifecycle, no this. So the performance will be a little bit higher.

A normal component is a class that extends from Vue.

A functional component is just a normal function.

22. What are the transmission methods of components?

  1. Props and EMIT: The parent component passes data to the child component, via prop. The child component passes data to the parent component via emit: the parent component passes data to the child component via prop. The child component passes data to the parent component via emit: the parent component passes data to the child component via prop. The child component passes data to the parent through emit events
  2. The parent, the parent, the parent and children takes the current components of the parent component and the current component child components
  3. Attrs and listeners attrs and listeners.
  4. Parent components are provided through provide, and child components inject variables through inject
  5. $ref gets the instance
  6. EventBus Horizontal component data transfer
  7. Vuex

What problem is $attrs designed to solve?

The main function is to achieve batch data transfer.

Provide/Inject is more suitable for plug-in to realize cross-level data transfer.

24. Which has a higher priority: V-for or V-if?

First, v-for and V-if cannot be used in the same tag.

Do v-for first, then V-if.

If it is encountered at the same time, we should consider using calculated attributes to process data first, and v-for can reduce the number of cycles.

How is V-Mode implemented?

The V-Models used on components are Model and callback

Using a V-model on a normal element generates instructions, possibly for different elements:

  • Generate value and input
  • Generate change and radio
  • Generate change and checked

When will the instruction be invoked?

Source:

Vue normal Slot and scope Slot differences

Ordinary slot

Normal slots are rendered after doing the replacement job. After the parent component is rendered, the content of the child component is replaced.

When the template is compiled, the child nodes and slot tags in the component are processed

When creating an element, replace the contents of _v() with the _t() method method.

Scope slot

The scope slot retrieves properties from child components. Attributes are passed in the child component and rendered.

The result of compiling the scoped slot:

What does vue.use do?

Vue.use is used to use plug-ins. We can extend global components, directives, prototype methods, and so on in plug-ins. The install method is called to pass in the Vue builder function by default, and you can use Vue in your plug-in without relying on the Vue library

What are the benefits of component write name?

  • Adding the name property adds the component itself to the Components property, implementing recursive calls to the component.
  • The name of a component can be used to debug and locate the corresponding component.

What are the modifiers for vue?

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
  • .right
  • .center
  • .middle
  • .alt

31. How to understand custom instructions?

  • When the AST syntax tree is generated, directives are encountered to add the cache attribute to the current element
  • Generate the instruction code by genDirectives
  • Before patch, the hook of the instruction is extracted into CBS, and the corresponding hook is called during patch
  • When the CBS corresponding hook is executed, the corresponding instruction definition method is called

Where is keep-alive used at ordinary times? How does it work?

  • When a dynamic component is wrapped with keep-alive, the component is cached to avoid component re-creation

There are two scenarios, one for dynamic components and one for router-view

A whitelist and a blacklist are created. Indicates what needs to be cached and what doesn’t. And the maximum number of caches.

The cached component instances are held in key and value objects.

Monitor include and exclude while loading.

If no caching is required, return to the virtual node directly.

If caching is required, generate a key using the component ID and label name, and store the current VNode instance as value as an object. This is the cache list

If the maximum number of caches is set, the 0th cache is deleted. Add the latest cache.

And add a keepAlive variable to the component that will not be initialized when the component is initialized.

How many hook functions does vue-router have? How about the execution process?

There are three types of hook functions:

  • Global guard
  • Routing guard
  • Component guard

34. The difference between vuerouter’s two models

  • Vue-router has three modes: Hash, History, and Abstract
  • Abstract is used for scene casting in apis that do not support browsers
  • The hash mode is compatible, but not aesthetically pleasing and not conducive to SEO
  • History is nice, historyAPI+popState, but a 404 appears when you refresh

What are the performance optimizations of Vue?

  • Don’t go too deep in the data hierarchy, and properly set up responsive data
  • When using data, the result of caching values is not frequently evaluated
  • Setting keys Properly
  • Reasonable use of V-show (high switching performance) and V-if
  • Control component granularity -> Vue uses component-level updates
  • Use functional components -> functional group cost low
  • Adopt asynchronous components -> leverage webpack’s subcontracting strategy
  • Use keep-alive to cache components
  • Virtual scrolling, time sharding and other strategies
  • Packaging optimization

What is your understanding of Vuex?

Vuex is a global status management system for VUE. It is used for data sharing and data caching among multiple components.

Problem: Cannot persist.

  • Mutation Changes the status and is executed synchronously
  • Action executes business code for easy reuse, and logic can be asynchronous. You cannot change the status directly.

37. What design patterns are used in VUE?

  • Singleton pattern: New multiple times, only one instance

  • Workshop mode: Pass in parameters to create instance (virtual node creation)
  • Publish and subscribe mode: eventBus
  • Observer mode: Watch and DEP
  • Proxy mode: _data attribute, Proxy, anti-shake, throttling
  • Mediator mode: VUex
  • The strategy pattern
  • The appearance model