​

Xiaobian in the group to see a sentence, said three pieces plus vue can find internship, three pieces estimated to say is HTML+JavaScript+CSS, but there is this good thing? We can’t rush to arrange the VUE interview questions. Real practice is not important, mainly want to learn ha ha ha ha (plus dog head).

​

Xiaobian collated a set of VUE interview questions, the electronic version has been packed, I hope to help you!!

The interview question paper

1. What are the advantages and disadvantages of MPA/SPA?

MPA multi-page application.

Structure: There are multiple pages composed of HTML, jump mode: page jump from one page to another page refresh mode: full page refresh page data jump: rely on URL/cookie/localStorage Resources will be reloaded after jump advantages: SEO friendly, low development difficulty.

SPA single page application

Page: by a shell page package, multiple pages (components) of fragments Jump jump way: in the shell page, will fragment the page refresh (components) to show or hide way: page fragments of partial page refresh data jump: between components of resource after the value is relatively easy to jump not reload the faults: Iframe is actually MPA, but it can achieve some effects of SPA, but it has many problems.

2. Cliche: Why do we need these MVC/MVVM patterns? Talk about your differences between MVC and MVVM patterns,

Purpose: To learn from the ideas of the backend, responsibility division and layerization, Vue and React are not really MVVM, let alone MVC, and their core only deals with the view layer view.

The MVC pattern

​

One-way data, each step of the user operation needs to re-request the database to modify the rendering of the view layer, forming a one-way closed loop. Such as jQuery + the underscore + backbone. M: Model Data storage layer V: View: view layer C: Controller: CONTROLLER JS logical layer The controller control layer will process the data of the data layer model layer and display it in the view layer view layer. Similarly, the view layer view layer can also act on the data layer Model through the control layer Controller. So the downside of MVC is that the view layer can’t interact directly with the data layer.

The MVVM pattern

​

Hide the Controller layer and directly control the View layer and Model data layer.

M: model V: View view template VM: view-model View data template (vUE layer, vue definedProperty is the logical processing VM layer) two-way data binding: Model Data model layer directly influences View layer View through Data Bindings, and View layer View can also change Data model layer model by listening Dom Listener. Data binding and DOM event listening are what the viewModel layer Vue does. In other words, bi-directional data binding can be achieved by simply mounting data from the data Model layer Model to the ViewModel layer Vue. Vuex/Redux can be used as the model data layer for VUE and React. Var vm = new Vue() copies the code

Vm is the VIEW-Model data model layer, and data: is the data represented by the VM View-Model layer. To sum up the differences between the two: MVC view layer and data layer interaction needs to be one-way link through the control layer controller. MVVM hides the control layer controller, so that the view layer and the data layer can interact directly and belong to the bidirectional connection.

3. Explain your understanding of responsive data in Vue

Small tip: Reactive data means that the data has changed and the view can be updated. Reactive data vue implements a definedReactive method, which internally adds get/set attributes to each attribute via Object.definedProperty(). DefinedReactive can only monitor the outermost objects and needs to recursively hijack data for the inner objects. Push pop Shift unshift reverse sort splice = push pop Shift unshift reverse sort splice

// src\core\observer\index.js export function defineReactive ( obj: Object, key: string, val: any, customSetter? :? Function, shallow? : Boolean) {// Prepare to add a DEP to the property to rely on the collection Watcher to update the view. Const dep = new dep () // some code // observe() Const dep = new dep () // some code // observe() shallow && observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: Function reactiveGetter () {const value = getter? Getter.call (obj) : function reactitter () {const value = getter? Getter.call (obj) : If (childOb) {childob.dep.depend (); if (childOb) {childob.dep.depend (); There's a DEP for the key and value of the array. if (Array.isArray(value)) { dependArray(value) } } } return value }, set: Function reactiveSetter (newVal) {function reactiveSetter (newVal) {Copy the code

What is the above Dep(class) used for? A: What is a Watcher for collecting renderings? A: Watcher is a class that updates views

4. How does Vue detect array changes?

  • Rather than intercepting each item of the array with definedProperty(), Vue overwrites the array by pushing pop Shift unshift reverse sort splice.

  • Manually call notify to Render Watcher and perform update

  • Arrays with object types (objects and arrays) are intercepted.

  • So there’s no intercepting by changing the array subscript and the array length, so there’s no responsive change. For example, arr[0] = 1, arr. Length = 2 will not have a response

  • Extension:

    // src\core\observer\array.js const methodsToPatch = [‘push’,’pop’,’shift’,’unshift’,’splice’,’sort’,’reverse’] methodsToPatch.forEach(function (method) { const original = arrayProto[method] def(arrayMethods, method, function mutator (… args) { const result = original.apply(this, args) const ob = this.ob let inserted switch (method) { case ‘push’: case ‘unshift’: inserted = args break case ‘splice’: Inserted = args.slice(2) break} // Insert the new type again if (inserted) ob.observearray (inserted) // Manually call notify to send an update ob.dep.notify() return result }) })

5. How does Vue rely on collections? (What is the relationship between DEP and Watcher?)

​

Dep is a class that collects the Watcher, which is a class that encapsulates the render view logic to distribute updates. It is important to note that Watcher cannot update the view directly, but also requires a combination of Vnode and the diff algorithm in Patch () to generate the real DOM

  • Each property has its own DEP property to store the dependent Watcher, and when the property changes, Watcher is notified to update it.
  • Vue adds a DEP attribute to each attribute to collect as Dependency when the user gets the data. When user setting sets the property value, dep.notify() informs the collected Watcher to re-render. See defineReactive() above for details
  • Dep relies on the collection class which has a many-to-many bidirectional storage relationship with the Watcher class
  • You can have multiple Watcher classes for each property, because the property may be used in different components.
  • A Watcher class can also correspond to multiple properties.

6. Template compilation in Vue

​

Template compilation in Vue: Essentially converting a template into a render function. Basically, compile a real DOM(template) into a virtual DOM(Vnode)

  • The first step is to convert the Template template string into an AST syntax tree (the Parser), which uses a lot of regees to match tag names, attributes, text, and so on.
  • The second step is to mark the AST static node, which is used for the virtual DOM’s render optimizer, and it will also mark all the child nodes as static
  • The third step is to regenerate the render function code string code using the AST syntax tree. (codeGen Code Generator)

Why label nodes statically? If they are static (no binding data, no change between nodes is required) then the diff algorithm is not required for subsequent comparisons.

7. Lifecycle hook implementation principles

  • The lifecycle hook in VUE is simply a callback function that is invoked during the creation of a component instantiation.

  • Multiple functions are defined in a hook or lifecycle mixed with vue.mixin ({}), and mergeHook() is called inside the Vue to merge the hooks into a queue for execution

  • extension

    // src\core\util\options.js function mergeHook ( parentVal: ? Array, childVal: ? Function | ? Array ): ? Array { const res = childVal ? parentVal ? Parentval. concat(childVal) // Merge: array.isarray (childVal)? childVal : [childVal] : parentVal return res ? dedupeHooks(res) : res }

8. What is the well-worn VUE lifecycle, and where are requests generally sent?

  • BeforeCreate: just initialize the vUE instance and call it before the data observation observer. Data /methods and other attributes have not been created yet
  • Created: The vue instance is initialized and all attributes are created.
  • BeforeMount: Trigger this hook before vue mounts data to the page and the Render function fires.
  • Mounted: The VM.$el is replaced by the vm that is created. In this case, the DOM can be accessed. This is where you typically request data.
  • BeforeUpdate: Called when data is updated, that is, before the virtual DOM is re-rendered.
  • Updated: Occurs after data changes cause the virtual DOM to be re-rendered.
  • BeforeDestroy: This hook is called before instance destruction, while the instance is still around. Vm.$destroy triggers two methods.
  • Destroyed: Called after the Vue instance is destroyed. All event listeners will be touched.

The request data depends on the specific business requirements for where to send ajax

9. Application scenarios and principles of vue.mixin ({})

  • Usage scenario: Used to separate a common business logic for reuse.

  • How it works: The mergeOptions() method is called to merge different attributes in a policy pattern. If there is a conflict between mixed data and component data, use the component’s own data.

  • Vue. Mixin ({}) defects: 1. It may cause naming conflicts between mixed attribute names and component attribute names; 2. The source of data dependence

  • extension

    export function mergeOptions ( parent: Object, child: Object, vm? : Component ): Object { // some code if (! child._base) { if (child.extends) { parent = mergeOptions(parent, child.extends, vm) } if (child.mixins) { for (let i = 0, l = child.mixins.length; i < l; i++) { parent = mergeOptions(parent, child.mixins[i], vm) } } }

    Const options = {} let key for (key in parent) {mergeField(key)} for (key in child) {if (! hasOwn(parent, key)) { mergeField(key) } } function mergeField (key) { const strat = strats[key] || defaultStrat options[key] = strat(parent[key], child[key], vm, key) } return options }

10. Why does data in vUE components have to be a function?

  • This is related to the js mechanism itself. The object reference address returned in the data function is different, which can ensure that the data between different components do not pollute each other.
  • If the data attribute is mixed with vue.mixin (), then data must also be a function. Because vue.mixin () can also be used in multiple ways.
  • Instance data can be either an object or a function, since we typically only initialize one Vue instance per page (singleton)

Vue vm.$nextTick(CB) implementation principle and scenario

  • Scenario: Called at the end of the DOM update cycle to get updated DOM data
  • Principle: the vm. $nextTick (cb) is an asynchronous method in order to make a lot of compatibility down-cycled have promise in turn. Then, MutationObserver, setImmediate, setTimeout. After data is modified, the view is not updated immediately. Instead, the set notify method notifies Watcher of the update, and the Watcher is put into an asynchronous queue. NexTick’s callback function is placed after the Watcher. Wait for synchronous code execution in the main thread to lodge and then empty the queue in turn, so vm.nexttick (callback) is executed after the DOM update is complete.

This is the principle of vUE asynchronous batch update. A quick thought: why not just use setTimeout instead? Because setTimeout is a macro task, the performance of multiple macro tasks is also poor.

12. The cliche difference between watch and computed

  • Computed internally is implemented according to Object.definedProperty()
  • With computed data caching, it does not recalculate if the dependent values do not change.
  • Watch is to monitor the change of the value and execute the corresponding callback function when the value changes.
  • Computed and Watch are performed based on the Watcher class

Computed caching relies on a variable called dirty, which is true by default and false, and returns the last value when it is used again.

// SRC \core\instance\state.js computed value function function createComputedGetter (key) {return function computedGetter () { Const watcher = this._computedWatchers && this._computedWatchers[key] if (watcher) {if (watcher dirty watcher.evaluate() } if (Dep.target) { watcher.depend() } return watcher.value } } } // src\core\instance\state.js Watch implementation Vue. Prototype. $watch = function (expOrFn: string | function, cb: any options? : Object) : Function { const vm: Component = this if (isPlainObject(cb)) { return createWatcher(vm, expOrFn, cb, The options)} options = options | | {} options. The user = true / / instantiate the watcher const watcher = new watcher (vm, expOrFn, cb, options) if (options.immediate) { const info = `callback for immediate watcher "${watcher.expression}"` pushTarget() invokeWithErrorHandling(cb, vm, [watcher.value], vm, info) popTarget() } return function unwatchFn () { watcher.teardown() } }Copy the code

Vue interview questions collection

How can 12 questions be enough for an interview? Vue interview questions into a collection of 105 questions, not many but classic oh.

  • What are the two cores of vue.js?
  • How does vUE’s bidirectional binding work?
  • What are the VUE lifecycle hook functions?
  • What is the difference between V-IF and V-show?
  • Vue is a common modifier
  • nextTick
  • What is the VUE lifecycle
  • Data response (data hijacking)
  • Virtual DOM principle
  • Advantages of Proxy over defineProperty
  • vuex
  • The function of the key value in vUE
  • Why does data have to be a function in a Vue component?
  • Priority of V-for and V-IF
  • Name at least 4 vUE directives and their usage
  • The vUE neutron component calls the parent component’s method
  • A method in VUE that a parent component calls a child component
  • Vue passes values between page-level components
  • Talk about the dynamic components of VUE.
  • The function of keep-Alive built-in components
  • Use of recursive components
  • How to define a vue-router dynamic route? How do I get the passed value?
  • What kinds of route guards does vue-router have?

​

What is the difference between a Router?

  • Vue-router responds to route parameter changes
  • Vue – the router to participate
  • What are the problems with not using Vuex?
  • What are the attributes of VUex?
  • What is the State feature of VUex?
  • What is the Getter feature of Vuex?

​

​

The complete version of VUE collection PDF information has been packaged, I hope to help you!!

Check out my other posts and videos →video,The article

​