Last week talked about “front-end interview CSS summary”, today brings programmers in the front-end interview also can not be ignored “Vue”. In recent years, Vue stands out among many front-end frameworks with its syntax refinement, code readability and mature modular components, and has become a difficult problem to be overcome in the interview and technical learning of front-end engineers. Coincing with the release of the full version of Vue3.0, this tweet also added some of the basic theories of Vue3.0 **** and interview questions **** **.

Pate One · Foundation

1. Briefly describe the response formula principle of Vue
When a Vue instance is created, Vue iterates over the properties of the data option, turning them into getters/setters with Object.defineProperty and internally tracking the dependencies, notifying the properties of changes when they are accessed and modified. Each component instance has a corresponding Watcher program instance, which records properties as dependencies during component rendering and then, when setters for dependencies are called, tells Watcher to recalculate, causing its associated components to be updated.
2. How to monitor the change of an attribute value in Vue?

For example, monitor changes in obj. A in data.

Monitoring object property changes in Vue can be like this
This is implemented by taking advantage of the nature of computed properties, where a new value is recalculated when a dependency changes.

3. What are the advantages of virtual DOM scheme over native DOM operation? What is the principle of implementation?

The virtual DOM improves performance by being partially refreshed rather than completely rerendered. The realization principle is JS object, diff algorithm.

4. Vue vs. jQuery

  • JQuery uses the selector ($) to select a DOM object and perform operations such as assignment, value, and event binding. The only difference between jQuery and native HTML is that it is easier to select and manipulate DOM objects, and the data and interface are together.
  • Vue completely separates the data from the View through Vue objects. Manipulation of data no longer refers to the corresponding DOM object; data and View are separated.

5. Talk about your understanding of the MVVM development model (VUE)

MVVM is divided into Model, View and ViewModel.

Model: Represents the data Model, in which both data and business logic are defined
View: represents the UI View, which is responsible for displaying data
ViewModel: Listens for changes to data in the Model and controls updates to the view, handling user interactions

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

Pate Two

1. What are the methods of custom instruction (V-check, V-focus)? What hook functions does it have? What other hook function arguments are there?

  • Global directives: The directive method of a Vue object takes two arguments, the directive name and the function. Component defines directives: directives
  • Inserted hook functions: Bind (triggered by a bind event), Update (triggered when a node is inserted), update (associated updates within the component)
  • Hook function parameters: EL, binding

React/Vue () {React/Vue ();

The function of key is to find the corresponding node faster and improve the diFF speed during the execution of diFF algorithm. Both VUE and React use the diff algorithm to compare old and new virtual nodes to update nodes.

3. What’s the difference between V-if and V-show?

V-show controls only how elements are displayed, switching the display attribute between block and None back and forth to 46; V-if controls the presence or absence of the DOM node. When we need to switch the show/hide of an element frequently, using V-show is more cost-effective in terms of performance; Using V-if makes more sense when you only need to show or hide once.

4. The vUE subcomponent calls the parent component’s method

  • The first method is to call the parent component directly from the child with this.$parent. Event

  • The second method is to use $emit in the child component to emit an event to the parent component, which listens for the event

  • Each of the three methods allows the child to call the parent.

5. What is the difference between computed and Watch

 computed

  • Computed is calculated attributes, that is, calculated values, and it is more used in scenarios where values are computed

  • Computed is cached. Computed values are cached after the getter is executed. Only when the property values on which it depends are changed, the corresponding getter is invoked again the next time the computed value is obtained

  • Computed applies to computing scenarios that compare consumption performance

watch

  • Watch is more of an observation function, similar to a listening callback for some data. It is used to observe the props $emit or the value of this component and perform the callback when the data changes

  • No caching, and the page is re-rendered without changing the value

Pate Three Vue3.0

1. Why did Vue3. X use Proxy instead of Object.defineProperty?

Because proxies can listen directly for changes in objects and arrays, there are as many as 13 interception methods. And ** as a new standard will be subject to ongoing performance optimization by browser vendors **.
Proxy only proxies the first layer of an object. How does Vue3 handle this problem?
Check if reflect. get is Object, and reactive is used to proxy it.
Get /set = multiple get/set = multiple get/set = multiple get/set
We can determine whether key is the property of the current proxied object target itself or whether the old value is equal to the new value. Trigger can be executed only when one of the above two conditions is met.

4. Advantage comparison between Proxy and Object.defineProperty

** Advantages of Proxy **

  • Proxies can listen directly on objects rather than properties
  • The Proxy can listen for changes to the array directly
  • Proxy has up to 13 intercepting methods, not limited to apply, ownKeys, deleteProperty, has, and so on that Object. DefineProperty does not have
  • Proxy returns a new Object, so we can just manipulate the new Object for our purposes, whereas Object.defineProperty can only be modified by iterating through Object attributes
  • Proxy as the new standard will be subject to ongoing performance optimization by browser vendors, which is also known as the performance bonus of the new standard
** Advantages of object.defineProperty **

  • 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)