Vue Advanced Interview questions summary

Is a Web application that only needs to load a single page into the server. When the browser sends the first request to the server, the server will return an index. HTML file, and the JS and CSS required by it will be loaded uniformly during display, and some pages will be loaded as required. When the URL address changes, the server does not request the page. The page switch is implemented through routing.

Advantages:

• Good interactive experience, users do not need to refresh the page, data is also asynchronously obtained through Ajax, the page display is smooth;
• Good front and rear end working separation mode.

Disadvantages:

• SEO is difficult, because all the content is displayed in a dynamic replacement page, so it has a natural disadvantage in SEO.
• Slow loading of the first screen (time-consuming for initial loading)

• In hash mode, the window listens for hashchange events (triggered by hash changes in the address bar) to drive interface changes;
• In history mode, listen for popState events (triggered by the browser’s forward or back button) on window to drive interface changes. Listen for a link click event to drive interface changes with history.pushState and history.replaceState methods.
• Hide event driven interface changes with display directly in the interface.

In the past development process, interface layout code, interface interaction logic code, business logic code are mixed together. As business requirements grow, code becomes more and more complex, which not only makes it difficult to develop, but also makes it more difficult to maintain code, especially other people’s code.

Therefore, MVC pattern emerged to solve this problem, where M stands for Model, specialized for processing and storing data. V stands for View, specifically for page presentation. C stands for Controller, which deals exclusively with business logic.

The user operates the View, and the View sends instructions to Control. After completing the business logic processing, the Model is required to process the corresponding data, and the processed data is sent to the View, and the View is required to show the data to the user.

Of course, users can also directly issue instructions to Control, complete the corresponding business logic processing, ask Model to process the corresponding data, send the processed data to View, ask View to show these data to the user.

You can also ask Moder to process data directly through the View, send the processed data to the View, and ask the View to show the data to the user.

However, in MVC mode,Model, Control and View depend on each other, and it is still very difficult to modify the other two.

So MVP mode is used to solve this problem. In MVP mode, P stands for Presenter instead of Control.

When the user operates on the View, the View sends instructions to the Presenter. After completing the business logic processing, the Model is asked to process the corresponding data and return the processed data to the Presenter. The Presenter sends the data to the View and asks the View to present the data to the user.

In MVP mode, Presenter completely isolates the View from the Model. Presenter and View depend on each other, Presenter and Model depend on each other, and View and Model no longer depend on each other, reducing code coupling.

Because presenters and views depend on each other, presenters can’t do unit testing on their own until the View is ready. The View interface is called the View interface, and the Presenter only relies on the View interface. In this way, the Presenter does not need to rely on the View interface to test, and also increases the reuse, as long as the View implements the View interface part, the Presenter can be very powerful.

However, in MVP mode, it is still a lot of annoying code for Presenter to send data to the View and for the View to display, which is really uncomfortable. Can we make the View update automatically when the Model changes?

So the MVVM pattern emerged to realize this idea, where VM represents the ViewModel and is responsible for the view display logic and listening for view changes, and M represents the Model becoming the business logic and data handler.

When the user operates the View, the ViewModel listens to the change of the View, and will notify the corresponding method in the Model for business logic and data processing. After the processing is finished, the ViewModel will listen to the View and automatically make the corresponding update. ViewModel can correspond to multiple views and has strong reusability.

In the Vue project. New Vue() is a ViewModel, and the View is a template template. Model is Vue options such as Data, methods, etc. During development we focused on how the View presented and how the Model handled the business logic and data. Don’t worry about how to update the View after processing the business logic and data, how to let the Model handle the operation on the View, these are all handed over to the ViewModel implementation, greatly reducing the development cost.

• Object.defineProperty(obj,prop,descriptor)Method directly defines a new property on an object, or modifies an existing property of an object and returns the object.
  • Obj: Object on which attributes are to be defined.
  • Prop: The name of the property to define or modify.
  • Descriptor: Attribute descriptor to be defined or modified.
• Descriptor properties come in two main forms: data descriptor and access descriptor.The descriptor must be one of these two forms; You can’t be both.
  • Data descriptors and access descriptors are co-owned
    • The properties of the object can be deleted, and any other features other than the value and writable feature can be modified. The default is false.
    • Enumerable: A property that enumerable is true can be considered in a for… Are enumerated in the in loop and object.keys (). The default is false.
  • Data descriptor
    • Value: indicates the value of the attribute. It can be any valid JavaScript value (numeric value, object, function, etc.). The default is undefined.
    • Writable: Value can be changed by the assignment operator if and only if the writable of this property is true. The default is false.
  • Access descriptor
    • Get: A method that provides a getter for a property, undefined if there is no getter. When the property is accessed, the method is executed with no arguments, but with this object (which is not necessarily the object defining the property because of inheritance). The default is undefined.
    • Set: a method that provides a setter for a property, otherwise undefined. This method is triggered when the property value is modified. This method takes a unique parameter, the new parameter value for the property. The default is undefined.
• When you define descriptor, it is better to define these attributes clearly to prevent errors during inheritance or inheritance.

function Archiver() {
    var temperature = null;
    var archive = [];
    Object.defineProperty(this, 'temperature', {
        get: function() {
          console.log('get! ');
          return temperature;
        },
        set: function(value) { temperature = value; archive.push({ val: temperature }); }}); this.getArchive =function() { return archive; };
}
var arc = new Archiver();
arc.temperature; // 'get! '
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]
Copy the code

Official definition: Proxy objects are used to define custom behavior for basic operations (such as property lookup, assignment, enumeration, function call, etc.).

Generally speaking, interception is provided before the operation of the target object, filtering the operation of the outside world and modifying the default behavior of some operations. You can not directly operate the object itself, but indirectly operate the object through the operation of the object’s proxy object.

let proxy = new Proxy(target, handler)

• targetIs the target object wrapped in a Proxy (which can be any type of object, including a native array, a function, or even another Proxy);
• handlerAn object whose properties are functions that define the behavior of the agent when an operation is performed, i.e., custom behavior.

handleCan I do for{}, but not fornullOtherwise, an error will be reported

Proxy currently provides 13 kinds of Proxy operations, which are commonly used

• Handler. get(target,property,receiver) Gets value interception
• Handler. Set (target, the property, the value, the receiver) value is set to intercept
• Handler. Has (target,prop)in operator interception

let obj = {
	a : 1,
	b : 2
}
let test = new Proxy(obj,{
    get : function (target,property) {
        return property in target ? target[property] : 0
    },
    set : function (target,property,value) {
        target[property] = 6;
    },
    has: function (target,prop){
        if(prop == 'b'){
            target[prop] = 6;
        }
        return prop in target;
    },
})

console.log(test.a);        // 1
console.log(test.c);        // 0

test.a = 3;
console.log(test.a)         // 6

if('b' in test){
    console.log(test)       // Proxy {a: 6, b: 6}
}
Copy the code

• Object.defineProperty
  • Cannot listen for array length changes;
  • Cannot listen for object addition;
  • Only properties of objects can be hijacked, so we need to traverse each property of each object.
• Proxy
  • You can listen for changes to the array length property.
  • Can listen to the addition of objects;
  • Can proxy the whole object, do not need to traversal the object, greatly improve performance;
  • There are as many as 13 interceptions, far more than Object. DefineProperty only has get and set interceptions.

Mustache’s Web template engine Mustache. Js is used

<script type="text/javascript" src="./mustache.js"></script>
<script type="text/javascript">
    var data = {
        "company": "Apple",
    }

    var tpl = '<h1>Hello {{company}}</h1>';
    var html = Mustache.render(tpl, data);

    console.log(html);
</script>
Copy the code

At its heart, vue.js is a system that allows you to declaratively render data into the DOM using concise template syntax.

This is the official quote, from which you can see that the core of Vue is template syntax and data rendering.

One-way data flow is an exponential data flow that can only transmit data from the parent to the child, and the child cannot change the data transmitted from the parent to the child.

Two-way data flow is the transmission of data from the parent to the child, and the child can change the data from the parent to the child by some means.

For example, v-Model and.sync are used to realize two-way data flow.

Bidirectional binding is a bidirectional binding between data model (Module) and View (View).

The principle is to use data hijacking combined with the publisher-subscriber pattern to achieve.

Vue iterates through all the properties in the data option (publisher) by hijacking them with Object.defineProperty to convert them into getters/setters. Getters are triggered when data is read. Setters fire when data is modified.

Each attribute is then assigned a new Dep(), which is dedicated to collecting dependencies, deleting them, and sending messages to them. Target = Dep; Dep = Dep; Dep = Dep; Dep = Dep; Dep = Dep

Components will create a New Watcher instance during the mount process. This example is a dependency (subscriber). Watcher’s second argument is a function that updates and renders the node. During the first rendering process, the Dep method is automatically called to collect the dependency, which is bound to every piece of data in the component. When the data changes, the dependencies are notified in the Seeter to update. The second function argument of Wacther is triggered by reading the data during the update process. Once triggered, the Dep method is automatically called again to collect dependencies, and patch (DIff operation) is run in this function to update the corresponding DOM node, completing bidirectional binding.

The virtual DOM is one of many solutions for mapping states to views by generating a virtual tree of nodes from the states and then using the virtual tree to render the real DOM. Before rendering, the newly generated virtual node tree is compared to the last virtual node tree, rendering only the different parts.

The first step is to build a VNode class. All attributes on DOM elements have corresponding attributes on objects instantiated by the VNode class. For example, tag represents the name of an element node, text represents the text of a text node, chlidren represents child nodes, and so on. Classify objects instantiated from the VNode class, such as comment nodes, text nodes, element nodes, component nodes, functional nodes, and clone nodes.

Then compile the template into render, execute render, create different types of VNode classes in it, and finally integrate to get a virtual DOM (VNode).

Finally, after comparing VNode and oldVnode through patch, real DOM is generated.

At the end of initialization, if the option is detected to have an EL attribute, the vm.$mount method is called to mount the VM with the goal of rendering the template into the final DOM.

• Step 1: Make surevm.$optionsThere’s the render function.

Because the mount process is different on different builds, the $mount method on the Vue prototype is functionally hijacked.

Start by creating a variable mount to which you will save the $mount method from the Vue prototype. Then the $mount method on the Vue prototype is overridden by a new method. The original mount method is called in this new method.

Get the DOM element via the EL attribute. If EL is a string, the DOM element is obtained using Document. querySelector and assigned to EL. If not, an empty div element is created and assigned to el. If el is not a string, it is a DOM element by default and is not processed.

Determine if el is an HTML or body element and exit the program with a warning if it is.

$options = $render = $mount = $mount = $mount = $mount = $mount = $mount = $mount = $mount = $mount = $mount = $mount

If not, the template is checked to see if it exists. If not, assign el’s outerHTML to template. If template is a string and begins with #, get the innerHTML of the DOM element and assign it to template. If template is already a DOM element type, get the innerHTML of the DOM element and assign it to template.

We then compile the template into a code string and turn the code string into the render function, assigning it to the render property of vm.$options.

Finally, the original $mount method is called.

• Step 2: In the original$mountMethod is triggered firstbeforeMountThen create an instance of Watcher, passing in a function as the second argumentvm._update.

This function is the first render and update render function, taking the render function (vnode) and the first render if vm._vnode does not exist.

At the same time, hijacked data in vNode automatically collects dependencies. When hijacked data in a VNode changes, the corresponding dependency is triggered, which triggers vm._update for update rendering.

Finally, the Mounted hook function is triggered.

Current virtualDOM differences and diff algorithms rely heavily on always having only one root element per child component.

Axios is an HTTP library based on promises, wrapped for use.

Use proxyTable configuration to solve cross-domain problems.

Like you to call http://172.16.13.205:9011/getList this interface

First configure baseURL to add flags in axios.create()

const service = axios.create({
  baseURL: '/api'});Copy the code

service.get(getList, {params:data});

Then configure it in the config/index.js file

dev:{
    proxyTable: {
        '/api': {
            target: 'http://172.16.13.205:9011'// Set the domain name and port number of the interface you call secure:false,
            changeOrigin: true,// cross-domain pathRewrite: {'^/api': ' '}}},}Copy the code

NPM run dev after configuration

F12 see request is http://localhost:8080/api/getList, actually the request is http://172.16.13.205:9011/getList.

Application of functional components

JSX is a combination of Javascript and XML. React invented JSX, which uses HTML syntax to create a virtual DOM. JSX treats < as HTML parsing and {as JavaScript parsing.

• With mixins with
• With extends, it fires before mixins
• Use high-level component HOC encapsulation

Lazy loading and pagination

Vue-loader is a Webpack loader, is a module converter, used to convert the original content of the module into new content as required.

It allows you to write Vue components in a format called single-file components (SFCs). Vue files can be parsed and converted to extract the logic code Script, style code style, and HTML template, and then handed to the corresponding loader for processing.