Vue Interview Test Points (serial…)

1. How do Vue components communicate

Vue parent and child components

The father the son

The parent passes the value through :data=”message”, and the child receives the value through the props object.

Direct access to

This. Children this refers to the current vue instance children this refers to the current vue instance children is an array of all of the following child components

Child the parent

The child sends the event via this.$emit(“message”,data) and the parent receives the event via the @Message =”getMessage” getMessage method.

Direct access to

Parent this refers to the current vUE instance parent this refers to the current Vue instance parent is the instance object of the parent component above

Sibling and grandparent components

Emit Emit events this. Emit Emit events this. On Receive events

Use localStorage,vuex across pages

2. Describe the process of component rendering and updating

Initial rendering process

Parse the template as the Render function (or completed in the development environment, vue-loader)

Trigger reactive, listening for getters and setters for the data property

Execute render function to trigger getter, generate vnode,patch(elem,vnode)

The update process

Modify data to fire the setter(previously listened on in the getter)

Re-execute the render function to generate newVnode

patch(vnode,newVnode)

Asynchronous rendering

$nextTick

Summarize data changes and update the view once

Reduce dom operations and improve performance

3. Realization principle of two-way data binding V-Model

Object. DefineProperty () is used to set and get events.

The Observer is the most important part. It uses Object.defineProperty to hijack the data, and then uses its set and get methods to notify and trigger update methods to update the view

4. Customize the V-Model

On a componentv-modelBy default, names are usedvalueProp and namedinputEvent, but input controls such as checkboxes, checkboxes, etcvalueThe attribute is used toDifferent purpose.modelOptions can be used to avoid such conflicts:

Synchronous tasks are tasks that are queued on the main thread; Asynchronous tasks are those that are ready to be executed and are placed in a "task queue". Once all synchronous tasks on the main thread have been executed, the task in the queue will stop waiting and start executing. The main thread reads tasks from the queue in a continuous Loop called an Event Loop.Copy the code

This is a big pity. This is a big pityCopy the code

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
};
Copy the code