Crazy tech nerd

www.zeolearn.com/interview-q…

Reproduction without permission is strictly prohibited

1. What is the role and importance of the “key” attribute when rendering a list of items?

The key attribute allows Vue to track each Vnode when rendering the list of items. The key value must be unique.

If the key attribute is not used, and the contents of the list change (such as sorting the list), the virtual DOM would rather patch the node with updated data to reflect the change than move the element up and down. This is the default mode, and it works very well.

When a unique key value IS IS provided, elements are reordered based on changes to the key (and they are not patched with new data), and if the key IS removed (for example, when an item in a list IS removed), the corresponding element node IS destroyed or deleted.

Please note the following figure:

There is a parent component rendering a list of child components. We see three list items rendered as three child component nodes. Each of these child components contains a span tag, an input box, and possibly, optionally, a local state object. Now let’s examine two cases:

When the key attribute is not used: for example, if the list has been reordered, Vue will use the reordered data to simply patch the existing three nodes without having to move them. This method works fine as long as the user does not enter or change the local state of one or more of these child components. So suppose the user enters the input box with component number 3. After reordering the list, the content of the span tag with component number 3 will be changed, but the input box will remain here along with the user’s input break state data. This is because Vue does not recognize component number 3, and it simply refixes the updated data it sees, namely the contents of the SPAN tag.

When the key attribute is used on a child component, Vue knows the identity of the component and moves the node instead of patching it when reordering the list. This ensures that manually edited input boxes and entire components are moved to new locations.

When conditionally rendering a component or element, you can also use the key attribute to signal to Vue about the uniqueness of the element and to ensure that the element is not patched with new data.

2. How will you render the raw HTML in the template?

A typical way to output content in a template is to use the Mustache syntax tag to output data from a method, attribute, or data variable. But Mustache renders text. If you try to render HTML with Mustache, it will be rendered as a text string and won’t be parsed. To render and parse the content into HTML, we can use the V-HTML directive, as shown below.

The template

<div id="app" v-html="Title"></div>
Copy the code

An App

new Vue({
    el: '#app'.data: {
      title: '
Vue.js
'}});Copy the code

The output

Vue.js

As shown in the example above, the V-HTML directive parses all the HTML, resulting in the above statement being rendered as needed. Developers must use V-HTML with an understanding of it. If v-HTML is not used properly, the site may be subject to injection attacks, most likely to inject and execute malicious code from external sources.

3. What is vue-loader?

Vue-loader is a Webpack loader module that allows us to write single-file components in.vue file format. The single-file component file has three parts, template, script, and style. The Vue-Loader module allows WebPack to extract and process each section using a separate loader module (such as a SASS or SCSS loader). This setting allows us to write programs seamlessly using.vue files.

The Vue-Loader module also allows static resources to be treated as module dependencies and to be processed using the WebPack loader. It also allows hot reinstalls during development.

4. What is a mixin?

Mixins enable us to write pluggable and reusable functionality for Vue components. If you want to reuse a set of component options, such as lifecycle hooks, methods, etc., across multiple components, you can write it as a mixin and simply reference it in the component. Then merge the contents of the mixin into the component. If you define a lifecycle hook in a mixin, it will take precedence over the component’s own hook at execution time.

5. How to proxy API requests if your Vue program and back-end API server are not running on the same host during development. Assuming that vue-CLI 3 is used?

Let’s say we have a node.js backend server running on localhost:4040. To ensure it is proxyed in and accessible from the components, we can configure the vue.config.js file and include a devServer section as shown below:

Suppose we have a Node.js back-end server running on localhost:4040. To ensure that the proxy is available and accessible from within the component, you can configure the vue.config.js file to include the devServer section as follows:

In the vue.config.js file:

module.exports: {
    devServer: {
        proxy: {
            '/api': { 
                target: ‘http:/ / localhost: 4040 / API ',
                changeOrigin: true}}}}Copy the code

6. How do I specify the type requirements for a prop?

By implementing the Prop validation option, you can specify type requirements for a single prop. This has no impact on production, but alerts are issued during the development phase to help developers identify potential problems with incoming data and specific types of requirements for the prop.

Example of configuring three prop:

props: {
    accountNumber: {
        type: Number.required: true
    },
    name: {
        type: String.required: true
   },
   favoriteColors: Array
}
Copy the code

7. What is the Virtual DOM?

The document Object Model, or DOM, defines an interface that allows languages such as JavaScript to access and manipulate HTML documents. Elements are represented by nodes in the tree, and interfaces allow us to manipulate them. But this interface comes at a cost, in the form of a lot of very frequent DOM operations that slow down the page.

Vue solves this problem by implementing a virtual representation of the document structure in memory, where virtual nodes (Vnodes) represent nodes in the DOM tree. When manipulation is required, calculations and operations can be performed in the memory of the virtual DOM rather than on the real DOM. This is naturally faster and allows the virtual DOM algorithm to calculate the optimal way to update the real DOM structure.

Once calculated, it is applied to the actual DOM tree, which improves performance, which is why virtual DOM-based frameworks such as Vue and React stand out so well.

8. What is a Vue plug-in?

The Vue plug-in allows developers to build global level functionality and add it to Vue. Used to add globally accessible methods and properties, resources, options, mixins, and other custom apis to a program. VueFire is an example of a Vue plug-in that adds FireBase-specific methods and binds them to the entire program. The Firebase function can then be used in the this context anywhere in the program structure.

9. What is a render function? Let me give you an example.

Vue allows us to build templates in a number of ways, the most common of which is to use HTML only for response functionality with special instructions and mustache tags. But you can also use JavaScript to build templates using special function classes called render functions. These functions are very close to the compiler, which means they are more efficient and faster than other template types. Since you write your rendering functions in JavaScript, you are free to use the language directly to add custom functions where you need them.

Very useful for advanced solutions to standard HTML templates.

Here is the Vue program using HTML as a template

new Vue({
  el: '#app'.data: {
    fruits: ['Apples'.'Oranges'.'Kiwi']},template:
      `
      
 
       
Fruit Basket
 
       
{{ fruit }}
 
       
`
});
Copy the code

Here’s the same program developed with the rendering function:

new Vue({
  el: '#app'.data: {
    fruits: ['Apples'.'Oranges'.'Kiwi']},render: function(createElement) {
    return createElement('div', [
      createElement('h1'.'Fruit Basket'),
      createElement('ol'.this.fruits.map(function(fruit) { 
        return createElement('li', fruit); }))); }});Copy the code

Output:

Fruit Basket

1. Apples
2. Oranges
3. Kiwi

In the example above, we used a function that returns a series of createElement() calls, each responsible for generating an element. Although the V-for directive works in htML-based templates, when using rendering functions, you can simply iterate through the Fruits data array using the standard.map() function.

10. Which lifecycle hook is best for fetching data from API calls?

Although this depends on the purpose and purpose of the component, the life cycle hooks created are usually a good place to place API calls. The component’s data and responsiveness capabilities are available, but the component has not yet been rendered.

11. When to call the “updated” lifecycle hook?

After the responsive data is updated and the virtual DOM is rerendered, the updated hook is called. It can be used to perform DOM-related operations, but there is no guarantee (by default) that the child component will be rendered, although this can be ensured by using this.$nextTick in the update function.

12. Why not use arrow functions when writing lifecycle hooks or other options/properties in Vue instances?

The arrow function itself does not define the this context, but is bound to the context of its parent function. When you use the arrow function (=>) in a Vue program, the this keyword is not bound to the Vue instance and therefore raises an error. So it is strongly recommended that you use standard function declarations instead.

13. When to use keep-alive elements?

When components are dynamically switched due to data properties or some other response state, they are rerendered each time they are switched to the rendered state. Although you may need this behavior, in some cases re-rendering may not be appropriate. For example, components that import data from API calls at creation time. You probably don’t want to call this API every time you dynamically switch the component to render. You can then include the component in the keep-alive element. The keep-alive element caches the component and gets it from there, rather than re-rendering it every time.

14. What is the recommended approach to managing state in a large Vue program? Why is that?

As the program grows in functionality and code, state management becomes difficult, and using endless downstream network prop and upstream events is certainly not a wise decision. In this case, it is necessary to move state management to a central management system. Provided in the Vue ecosystem, Vuex is the official state management repository and a recommended pattern for centralized state storage.

Vuex allows maintenance of central state. The component uses Vuex as a responsive data store and updates when status updates occur. Multiple or unrelated components can depend on the same central storage.

In this case, Vue acts as the pure View layer. To modify the state, the view layer (such as a button or interactive component) needs to issue a Vuex Action and then perform the required task. To update or modify the state, Vuex provides Mutations.

The purpose of this workflow is to leave traces of usable operations.

15. What are asynchronous components?

When a large program uses a large number of components, it may not make sense to load them all from the server at the same time. In this case, Vue allows us to define components that are loaded asynchronously from the server as needed. When a component is declared or registered, Vue accepts the factory function that provides the Promise. The component can then be “parsed” when it is invoked.

You can save bandwidth and program load time by loading only the base components and deferring the loading of the asynchronous components to a future call time.

This is a simple example of an asynchronous component.

new Vue({
    components: {" tweet - box ":(a)= > import(". / components /async/TweetBox’)
    }
}); 
Copy the code

When used in this way, Webpack’s code split is used to provide this functionality.

Welcome to pay attention to the front public number: front pioneer, free to receive webpack full series of tutorials (from entry to advanced).