Vue intermediate interview questions

In Created, the page view does not appear. If there is too much request information, the page will remain in a white screen for a long time, and the DOM node will not come out, so DOM nodes cannot be operated. Not in Mounted. Better.

<template> <div> <my-component v-model="value"></my-component> <! <my-component :value="value" @input="value=$event"></my-component> <button @click="value=true"> </div> </template> <script> export default{ data(){ return{ value:false, } }, components:{ myComponent:resolve =>require(['./my_component'],resolve), } } </script>Copy the code

<button @click="$emit('input',false)"> Hide </button> </div> </template> <script> export default{ props:{ value:{ type:Boolean, default:false, } }, data(){ return{} }, } </script>Copy the code

Keep-alive is an abstract component: it does not render a DOM element on its own and does not appear in the parent component chain; When a dynamic component is wrapped with keep-alive, inactive component instances are cached rather than destroyed.

It takes three parameters

• includeDefine a cache whitelist, which components will be cached;
• excludeDefine the cache blacklist, do not cache components;
• These two arguments can be a comma-separated string, a regular expression, or an array,include="a,b",:include="/a|b/",:include="['a', 'b']";
• Matching first checks the name option of the component itself, and if the name option is not available, matches its locally registered name (the key value of the parent component’s Components option). Anonymous components could not be matched.
• maxMaximum number of component instances can be cached. Once this number is reached, the cached component instances that have not been accessed for the longest time are destroyed before new instances are created.
• Does not work in functional components because they have no cached instances;
• When a component is switched internally, its activated and deactivated lifecycle hook functions are executed accordingly.

When they are on the same node, V-for takes precedence over V-IF, which means that V-IF will run separately in each V-for loop. This priority mechanism is useful when you only want to render nodes for a subset of items.

<ul>
    <li v-for="item in items" v-if="item.show">{{item}}</li>
</ul>
Copy the code

If your goal is to conditionally skip the loop, place v-if on the outer element (or

<ul v-if="items.length">
    <li v-for="item in items">{{item}}</li>
</ul>
Copy the code

Keys () to an array to ensure order.

It depends on what v-for is rendering.

• If rendering is a simple list, such as a list rendering output that does not depend on child component state or temporary DOM state (for example, form input values), performance is better without keys because the “update in place” strategy is used instead. If the order of data items is changed, Vue does not move DOM elements to match the order of data items, but instead updates each element in place.

  <template>
      <div>
          <span v-for="item in lists">{{item}}</span>
      </div>
  </template>
  <script>
  export default {
      data() {
          return {
              lists: [1, 2, 3, 4, 5]
          }
      },
  }
  </script>
  Copy the code

  In the above example, the contents of v-for generate the following DOM node array. We give each node an id to identify its location:

  [' < span > 1 < / span > ', / / id: A '< span > 2 < / span >', / / id: B '< span > 3 < / span >', / / id: C '< span > 4 < / span >', / / id: D '<span>5</span>' // id: E ]Copy the code

  Transpose the data in lists to become,4,3,1,5 [2]In the case of no key, the node position remains unchanged, but the contents of the node are updated. This is called “in-place update”.

  [' < span > 2 < / span > ', / / id: A '< span > < / span > 4', / / id: B '< span > 3 < / span >', / / id: C '< span > 1 < / span >', / / id: D '<span>5</span>' // id: E ]Copy the code

  But in the case of a key, the node positions are swapped, but the content is not updated

  [' < span > 2 < / span > ', / / id: B '< span > 4 < / span >', / / id: D '< span > 3 < / span >', / / id: C '< span > 1 < / span >', / / id: A '<span>5</span>' // id: E ]Copy the code

• If rendering is not a simple list, the performance of using key is better, because Vue uses the diff algorithm to compare the old and new virtual nodes to update the node. In the DIff algorithm, when the new node and the old node have no result, the old node is first processed to generate a map map with key and node index. If the new node has a key, it will find the corresponding old node through map mapping. If the new node does not have a key, it will find the corresponding old node through traversal search. One is map mapping, the other is traversal search. By comparison. Map enables faster mapping.

  // oldCh is an old virtual node array // oldKeyToIdx map mapping object // idxInOld IsUndef (oldKeyToIdx)) {oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, OldEndIdx)} if (isDef(newStartvNode.key)) {// idxInOld = oldKeyToIdx[newStartvNode.key]} else {// idxInOld = oldKeyToIdx[newStartVNode.key]} else {// idxInOld = oldKeyToIdx[newStartVNode.key]} else {// idxInOld = oldKeyToIdx[newStartVNode.key] idxInOld = findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx) }Copy the code

  Creating a map function

  function createKeyToOldIdx(children, beginIdx, endIdx) {
      let i, key
      const map = {}
      for (i = beginIdx; i <= endIdx; ++i) {
          key = children[i].key
          if (isDef(key)) map[key] = i
      }
      return map
  }
  Copy the code

  Traverse to find the function

  Function findIdxInOld(node, oldCh, start, end) {for (let I = start; i < end; i++) { const c = oldCh[i]; if (isDef(c) && sameVnode(node, c)) return i } }Copy the code

You can also force elements/components to be replaced rather than reused. It can be used in the following scenarios

• Triggers the component’s lifecycle hook completely
• Trigger a transition

<transition>
  <span :key="text">{{ text }}</span>
</transition>
Copy the code

When the text changes, is updated at any time, thus triggering a transition.

• Do not use non-primitive values such as objects or arrays as keys. Use strings or numeric values instead.

• Do not use the index of the array as the key value, because when you delete an item in the array, the index will also change, resulting in the key change, rendering errors.

  For example, when rendering [a,b, C] with index as key, the index will change from 0, 1, 2 to 0, 1 (instead of 0, 2), and the key of the third item will change to 1, thus mistakenly deleting the third item.

There are two ways to name components: chain my-Component and big hump MyComponent.

• Both < my-Component >
  and
  can be used in string templates,

• It is best to use
  in non-string templates because you follow the custom component names in the W3C specification

(all lowercase and must contain a hyphen) to avoid conflicts with current and future HTML elements.

The object is a reference type. When reusing components, data objects point to the same data object. When modifying data in one component, data in other reusable components will be modified at the same time. A function that returns an Object does not have this problem because it returns a new Object (an instance of Object) at a different reference address.

• By customizing a listening event on the parent component<myComponent @diy="handleDiy"></myComponent>, used in child componentsthis.$emit('diy',data)$event = $event; $event = $event; $event = $event; $event = $event;
• By using a modifier on the parent component.syncBind a data<myComponent :show.sync="show"></myComponent>, used in child componentsthis.$emit('update:show',data)To change the parent componentshowThe value of the.
• throughv-model.

• When a component is recursively invoked, the component calls itself.
• withisSpecial characteristics andcomponentUsed for built-in component labels;
• keep-aliveBuilt-in component taginclude andexcludeProperty.

Recursive reference can be understood as component call itself, which will be used in the development of multi-level menu components. Before calling, set the component name option, and ensure that it is used with V-IF to avoid the formation of an infinite loop. Use NavMenu component in element-Vue component library to develop multi-level menu as an example:

<template>
    <el-submenu :index="menu.id" popper-class="layout-sider-submenu" :key="menu.id">
        <template slot="title">
            <Icon :type="menu.icon" v-if="menu.icon"/>
            <span>{{menu.title}}</span>
        </template>
        <template v-for="(child,i) in menu.menus">
            <side-menu-item v-if="Array.isArray(child.menus) && child.menus.length" :menu="child"></side-menu-item>
            <el-menu-item :index="child.id" :key="child.id" v-else>
                <Icon :type="child.icon" v-if="child.icon"/>
                <span>{{child.title}}</span>
            </el-menu-item>
        </template>
    </el-submenu>
</template>
<script>
    export default{
        name: 'sideMenuItem',
        props: {
            menu: {
                type: Object,
                default(){
                    return {};
                }
            }
        }
    }
</script>
Copy the code

Component slot function

• $attrs: contains feature bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope (component tags). Often used when creating base components, you can add component optionsinheritAttrs:falseUsed in conjunction with component internal labelsv-bind="$attrs"Bind non-prop features to it;
• $listeners: contains the parent scope (component label) (excluding.nativeV-on event listener. You can listen for specific events on a component, such as a focus event, if the root element of the component is not a form element and cannot be listened onv-on="$listeners"Bind to form element tags.

Dependency injection of components

In components that use $on, destroy with $off in the beforeDestroy hook function.

Yes, otherwise it will cause multiple bindings and memory leaks. About removing pits for event listening.

• If the page has a lot of timers, can be indataOption to create an objecttimerGive each timer a name and map it to the objecttimer,

In the beforeDestroy constructor for(let k in this.timer){clearInterval(k)};

• Do this if the page has only a single timer.

  const timer = setInterval(() =>{}, 500);
  this.$once('hook:beforeDestroy', () => {
     clearInterval(timer);
  })
  Copy the code

• push(),pop(),shift(),unshift(),splice(),sort(),reverse()These methods have been redefined in Vue to listen for array changes;
• filter(),concat(),slice()These methods return a new array and can also listen for changes to the array.

• When setting an array item directly using an index;

• Modify the length of the array.

  • The first case, useExisting indexWhen you set an array entry directlyObject.defineProperty()iscanTap intoA nonexistent indexWhen you set an array entry directlyObject.defineProperty()isCan not beBut the official explanation is that Vue cannot detect the above array changes due to the limitations of JavaScript. In fact, the root cause is performance problem, and the performance cost is not proportional to the user experience benefit.
  • The second case, the reason isObject.defineProperty()Can’t listen on an arraylengthProperties.

• $set(this.items, indexOfItem, newValue) or this.items. Splice (indexOfItem, 1, newValue) to solve the first case;

• Use this.items.splice(newLength) to solve the second case.

• Add object attributes
• Deletion of object attributes

Because Vue uses object.defineProperty to convert the key of an Object into a getter/setter to track changes, getter/setter can only track whether a data has been modified, but cannot track new attributes or deleted attributes, so the above Object changes cannot be monitored.

• withthis.$set(this.obj,"key","newValue")To solve the first case;
• withObject.assignTo solve the second case.

• Delete: Only the deleted object member becomes' 'orundefined, the key values of other elements remain unchanged;
• Vue. Delete: Deletes the object member directly. If the object is responsive, make sure the deletion triggers an update to the view.

• watch: One data affects more than one data, when asynchronous or expensive operations need to be performed when the data changes;
• Calculated properties: One data affected by more than one data. Is cached based on its reactive dependencies and is reevaluated only when the associated reactive dependencies change.

• Evaluated properties: are cached based on their reactive dependencies and are reevaluated only when the associated reactive dependencies change.
• Method: Whenever rerendering is triggered, the calling method will always execute the function again. Methods can be used when we don’t want caching, but computed properties are recommended if evaluation is expensive.

Custom instruction hook functions

Register a command to make the font color flash v-color

There are three kinds of

• Mounted on Vue’s Prototype

  // base.js const install = function (Vue, Opts) {vue.prototype. demo = function () {console.log(' I am on Vue prototype ')}} export default {install}Copy the code

  Import base from 'service/base'; Vue.use(base);Copy the code

• Use globals to blend in mixins

• $on bind with this.$root.$off unbind with this.$root.$emit global call with this.

  this.$root.$on('demo',function(){ console.log('test'); }) enclosing $root. $emit (' demo '); This. $root. $off (' demo ');Copy the code

• el: Provides an existing DOM element on the page as the mount target for the Vue instance. It can be a CSS selector or an HTMLElement instance.
  • Because all mount elements are replaced by the DOM generated by Vue. Therefore, mounting Vue instances to is not recommendedhtmlorbodyOn.
  • If theconst vm = new Vue({})With this option, the instance will be compiled immediately, otherwise it will need to be called explicitlyvm.$mount()Manually enable compilation.

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" > < / script > < / head > < body > < div </div> </body> <script> const vm= new Vue({el:'#app', data:{age:17}, } </script> </html>Copy the code

<script>
    const vm= new Vue({
        data:{
            age:17
        },
    })
    vm.$mount('#app')
</script>
Copy the code

• template: A string template is used as the identity of the Vue instance. ifelIf yes, the template will replace the mounted element. The content of the mounted element is ignored unless the content of the template has distribution slots.
  • If the value starts with #, it is used as a selector and uses the innerHTML of the matching element as the template.

<script> const vm= new Vue({el:'#app', data:{age:17}, template:'<div> ') </script>Copy the code

</div> </script> <script> const vm= new Vue({type="x-template" id=" MB "> el:'#app', data:{ age:17 }, template:'#mb', }) </script>Copy the code

<div> <body> <div id="app"> <div> <div> <div> </template> </body> <script> const vm= new Vue({ el:'#app', data:{ age:17 }, template:'#mb', }) </script>Copy the code

• renderIf the render function is present in the Vue option, the Vue constructor does not compile the render function from the HTML template option or from the mount element specified by the EL option.

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" > < / script > < / head > < body > < div id = "app" > </div> </body> <script> const vm= new Vue({el:'#app', data:{age:17}, Template :'<div> I am template content: xiaoming year {{age}} age </div>', Render (h){return h('div', 'I am render')}}) </script> </ HTML >Copy the code

As an invisible wrap element, reduce unnecessary DOM elements and the structure becomes clearer.

Delimiters option, which defaults to [“{{“, “}}”]

// Change delimiters to ES6 template string style new Vue({delimiters: ['${', '}']})Copy the code

Attributes starting with _ or $are not proppable by Vue instances because they may conflict with Vue built-in attributes and API methods. You can access these attributes using methods such as vm.$data._property.

• errorCapturedIs an internal component hook that is called when an error from a descendant component is caughterror,vm,infoThree parameters,return falseTo prevent the error from being thrown upward.
• errorHandlerFor global hooks, useVue.config.errorHandlerConfigure, receive parameters anderrorCapturedConsistent, 2.6 can be capturedv-onwithpromiseChain errors can be used to unify error handling with error pockets.

Make an object responsive. Can be used as a minimal cross-component state store.

• Static configuration<link rel="icon" href="<%= BASE_URL %>favicon.ico">.

<%= BASE_URL %> is the same as the publicPath configuration in vue.config.js.

• Dynamic configuration<link rel="icon" type="image/png" href="">

  import browserImg from 'images/kong.png'; // imgurl =' favicon.ico 'let link = document.querySelector('link[type="image/ PNG "]'); if (imgurl) { link.setAttribute('href', imgurl); } else { link.setAttribute('href', browserImg); }Copy the code

• Modify config/index.js in Vue CLI2build.assetsPublicPathThe value of the;
• Set the publicPath value in Vue CLI3.

In a project, the alias path alias is usually configured. Here is the configuration of Vue CLI3.

configureWebpack: {
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src'),
            'assets': resolve('src/assets'),
            'css': resolve('src/assets/css'),
            'images': resolve('src/assets/images'),
        }
    },
},
Copy the code

Since adding SRC dynamically is treated as a static resource and is not compiled, require is added.

<template> <img class="logo" : SRC ="logo" Alt =" company logo"> </template> <script> export default {data() {return { logo:require("assets/images/logo.png"), }; }}; </script>Copy the code

• Start with the script tag in the main entry page index.html< script SRC = ". / static/jquery - 1.12.4. Js "> < / script >Will be reported if ESLint is used in your project'$' is not defined, to be added to the file/* eslint-disable */
• Start with the script tag in the main entry page index.html< script SRC = ". / static/jquery - 1.12.4. Js "> < / script >, and then configure externals in webpack to be used in your project.

  externals: {
      'jquery': 'jQuery'
  }
  Copy the code

• Configure alias first in Webpack and then in main.jsimport $ from 'jquery', can be used in the project.

  resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'jquery': Resolve (' static/jquery - 1.12.4. Js)}}Copy the code

• Add a plugins to the Webpack and use them in your project

  plugins: [
           new webpack.ProvidePlugin({
               $:"jquery",
               jQuery:"jquery",
               "windows.jQuery":"jquery"
           })
       ]
  Copy the code