Vue中级面试题汇总

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

<template>
    <div v-show="value">
        <span>我的组件</span>
        <button @click="$emit('input',false)">隐藏</button>
    </div>
</template>
<script>
    export default{
        props:{
            value:{
                type:Boolean,
                default:false,
            }
        },
        data(){
            return{}
        },
    }
</script>

其有三个参数

• include定义缓存白名单，会缓存的组件；
• exclude定义缓存黑名单，不会缓存的组件；
• 以上两个参数可以是逗号分隔字符串、正则表达式或一个数组,include="a,b"、:include="/a|b/"、:include="['a', 'b']"；
• 匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配；
• max最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉；
• 不会在函数式组件中正常工作，因为它们没有缓存实例；
• 当组件在内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。

当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用。

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

如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。

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

主要看v-for渲染的是什么。

• 如果渲染是一个简单的列表，如不依赖子组件状态或临时DOM状态(例如：表单输入值)的列表渲染输出,不用key性能会更好，因为不用key采用的是“就地更新”的策略。如果数据项的顺序被改变， Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素。

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

  以上的例子，v-for的内容会生成以下的DOM节点数组，我们给每一个节点标记一个身份id，以辨别节点的位置：

  [
      '<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
  ]
  

  将lists中的数据进行位置调换，变成[2,4,3,1,5]，在没有key的情景下，节点位置不变，但是节点的内容更新了，这就是“就地更新”

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

  但是在有key的情景下，节点位置进行了交换，但是内容没有更新

  [
      '<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
  ]
  

• 如果渲染不是一个简单的列表，用key性能会更好一点，因为vue是采用diff算法来对比新旧虚拟节点来更新节点，在diff算法中，当新节点跟旧节点头尾交叉对比没有结果时，先处理旧节点生成一个健为key，值为节点下标index的map映射，如果新节点有key，会通过map映射找到对应的旧节点，如果新节点没有key，会采用遍历查找的方式去找到对应的旧节点，一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。

  // vue源码 src/core/vdom/patch.js 488行
  // 以下是为了阅读性进行格式化后的代码
  // oldCh 是一个旧虚拟节点数组
  // oldKeyToIdx map映射对象
  // idxInOld 对比后得到旧节点下标
  if (isUndef(oldKeyToIdx)) {
      oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
  }
  if (isDef(newStartVnode.key)) {
      // map 方式获取
      idxInOld = oldKeyToIdx[newStartVnode.key]
  } else {
      // 遍历方式获取
      idxInOld = findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
  }
  

  创建map函数

  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
  }
  

  遍历寻找函数

  // sameVnode 是对比新旧节点是否相同的函数
  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
      }
  }
  

还可以强制替换元素/组件而不是重复使用它。在以下场景可以使用

• 完整地触发组件的生命周期钩子
• 触发过渡

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

当 text 发生改变时，<span>会随时被更新，因此会触发过渡。

• 不要使用对象或数组之类的非基本类型值作为key，请用字符串或数值类型的值；

• 不要使用数组的index作为key值，因为在删除数组某一项，index也会随之变化，导致key变化，渲染会出错。

  例：在渲染[a,b,c]用 index 作为 key，那么在删除第二项的时候，index 就会从 0 1 2 变成 0 1（而不是 0 2)，随之第三项的key变成1了，就会误把第三项删除了。

给组件命名有两种方式，一种是使用链式命名my-component，一种是使用大驼峰命名MyComponent，

• 在字符串模板中<my-component></my-component> 和 <MyComponent></MyComponent>都可以使用，

• 在非字符串模板中最好使用<MyComponent></MyComponent>，因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突。

• 通过在父组件上自定义一个监听事件<myComponent @diy="handleDiy"></myComponent>,在子组件用this.$emit('diy',data)来触发这个diy事件，其中data为子组件向父组件通信的数据,在父组件中监听diy个事件时，可以通过$event访问data这个值。
• 通过在父组件上用修饰符.sync绑定一个数据<myComponent :show.sync="show"></myComponent>,在子组件用this.$emit('update:show',data)来改变父组件中show的值。
• 通过v-model。

• 递归组件时，组件调用自身使用；
• 用is特殊特性和component内置组件标签时使用；
• keep-alive内置组件标签中include 和exclude属性中使用。

递归引用可以理解为组件调用自身，在开发多级菜单组件时就会用到，调用前要先设置组件的name选项， 注意一定要配合v-if使用，避免形成死循环，用element-vue组件库中NavMenu导航菜单组件开发多级菜单为例：

<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>

组件的插槽功能

• $attrs: 包含了父作用域中（组件标签）不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。 在创建基础组件时候经常使用，可以和组件选项inheritAttrs:false和配合使用在组件内部标签上用v-bind="$attrs"将非prop特性绑定上去；
• $listeners: 包含了父作用域中（组件标签）的 (不含.native) v-on 事件监听器。 在组件上监听一些特定的事件，比如focus事件时，如果组件的根元素不是表单元素的，则监听不到，那么可以用v-on="$listeners"绑定到表单元素标签上解决。

组件的依赖注入

在有使用$on的组件中要在beforeDestroy钩子函数中用$off销毁。

要，不然会造成多次绑定和内存泄露。关于移除事件监听的坑。

• 如果页面上有很多定时器，可以在data选项中创建一个对象timer，给每个定时器取个名字一一映射在对象timer中， 在beforeDestroy构造函数中for(let k in this.timer){clearInterval(k)}；
• 如果页面只有单个定时器，可以这么做。

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

• push()、pop()、shift()、unshift()、splice()、sort()、reverse()，这些方法在Vue中被重新定义了，故可以监听到数组变化；
• filter()、concat()、slice()，这些方法会返回一个新数组，也可以监听到数组的变化。

• 利用索引直接设置一个数组项时；

• 修改数组的长度时。

  • 第一个情况，利用已有索引直接设置一个数组项时Object.defineProperty()是可以监听到，利用不存在的索引直接设置一个数组项时Object.defineProperty()是不可以监听到，但是官方给出的解释是由于JavaScript的限制，Vue不能检测以上数组的变动，其实根本原因是性能问题，性能代价和获得的用户体验收益不成正比。
  • 第二个情况，原因是Object.defineProperty()不能监听到数组的length属性。

• 用this.$set(this.items, indexOfItem, newValue)或this.items.splice(indexOfItem, 1, newValue)来解决第一种情况；

• 用this.items.splice(newLength)来解决第二种情况。

• 对象属性的添加
• 对象属性的删除

因为Vue是通过Object.defineProperty来将对象的key转成getter/setter的形式来追踪变化，但getter/setter只能追踪一个数据是否被修改，无法追踪新增属性和删除属性，所以才会导致上面对象变化无法监听。

• 用this.$set(this.obj,"key","newValue")来解决第一种情况；
• 用Object.assign来解决第二种情况。

• delete：只是被删除对象成员变为' '或undefined，其他元素键值不变；
• Vue.delete：直接删了对象成员，如果对象是响应式的，确保删除能触发更新视图，这个方法主要用于避开 Vue 不能检测到属性被删除的限制。

• watch：一个数据影响多个数据，当需要在数据变化时执行异步或开销较大的操作时；
• 计算属性：一个数据受多个数据影响。是基于它的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它才会重新求值。

• 计算属性：是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。
• 方法：每当触发重新渲染时，调用方法将总会再次执行函数。当我们不希望有缓存，可以使用方法，但是如果求值开销大时建议用计算属性。

自定义指令的钩子函数

注册一个让字体颜色闪烁的指令v-color

有三种

• 挂载在Vue的prototype上

  // base.js
  const install = function (Vue, opts) {
      Vue.prototype.demo = function () {
          console.log('我已经在Vue原型链上')
      }
  }
  export default {
      install
  }
  

  //main.js
  //注册全局函数
  import base from 'service/base';
  Vue.use(base);
  

• 利用全局混入mixin

• 用this.$root.$on绑定方法，用this.$root.$off解绑方法，用this.$root.$emit全局调用。

  this.$root.$on('demo',function(){
      console.log('test');
  })
  this.$root.$emit('demo')；
  this.$root.$off('demo')；
  

• el：提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例。
  • 因为所有的挂载元素会被Vue生成的DOM替换。因此不推荐挂载Vue实例到html或者body上。
  • 如果在const vm = new Vue({})中存在这个选项，实例将立即进入编译过程，否则，需要显式调用vm.$mount()手动开启编译。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">我是el挂载的内容:小明今年{{age}}岁了</div>
    </body>
    <script>
        const vm= new Vue({
            el:'#app',
            data:{
                age:17
            },
        }
    </script>
</html>

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

• template：一个字符串模板作为Vue实例的标识使用。如果el存在，模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
  • 如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。

<script>
    const vm= new Vue({
        el:'#app',
        data:{
            age:17
        },
        template:'<div>我是template的内容:小明今年{{age}}岁了</div>',
    })
</script>

<script type="x-template" id="mb">
	<div>我是template的内容:小明今年{{age}}岁了</div>
</script>
<script>
    const vm= new Vue({
        el:'#app',
        data:{
            age:17
        },
        template:'#mb',
    })
</script>

<body>
    <div id="app">
        我是el挂载的内容:小明今年{{age}}岁了
    </div>
    <template id="mb">
        <div>我是template的内容:小明今年{{age}}岁了</div>
    </template>
</body>
<script>
    const vm= new Vue({
        el:'#app',
        data:{
            age:17
        },
        template:'#mb',
    })
</script>

• render :Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            我是el挂载的内容:小明今年{{age}}岁了
        </div>
    </body>
    <script>
        const vm= new Vue({
            el:'#app',
            data:{
                age:17
            },
            template:'<div>我是template的内容:小明今年{{age}}岁了</div>',
            render(h){
                return h('div',`我是render的内容:小明今年${this.age}岁了`)
            }
        })
    </script>
</html>

用delimiters选项,其默认是["{{", "}}"]

// 将分隔符变成ES6模板字符串的风格
new Vue({
  delimiters: ['${', '}']
})

以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突，你可以使用例如 vm.$data._property 的方式访问这些属性。

• errorCaptured是组件内部钩子，当捕获一个来自子孙组件的错误时被调用，接收error、vm、info三个参数，return false后可以阻止错误继续向上抛出。
• errorHandler为全局钩子，使用Vue.config.errorHandler配置，接收参数与errorCaptured一致，2.6后可捕捉v-on与promise链的错误，可用于统一错误处理与错误兜底。

• 静态配置 <link rel="icon" href="<%= BASE_URL %>favicon.ico">, 其中<%= BASE_URL %>等同vue.config.js中publicPath的配置;
• 动态配置<link rel="icon" type="image/png" href="">

  import browserImg from 'images/kong.png';//为favicon的默认图片
  const imgurl ='后端传回来的favicon.ico的线上地址'
  let link = document.querySelector('link[type="image/png"]');
  if (imgurl) {
      link.setAttribute('href', imgurl);
  } else {
      link.setAttribute('href', browserImg);
  }
  

• 在Vue CLI2中修改config/index.js文件中的build.assetsPublicPath的值；
• 在Vue CLI3中配置publicPath的值。

在项目中一般通过配置alias路径别名的方式解决,下面是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'),
        }
    },
},

因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。

<template>
    <img class="logo" :src="logo" alt="公司logo">
</template>
<script>
export default {
    data() {
        return {
            logo:require("assets/images/logo.png"),
        };
    }
};
</script>

• 先在主入口页面 index.html 中用 script 标签引入<script src="./static/jquery-1.12.4.js"></script>,如果你的项目中有用ESLint检测，会报'$' is not defined，要在文件中加上/* eslint-disable */
• 先在主入口页面 index.html 中用 script 标签引入<script src="./static/jquery-1.12.4.js"></script>,然后在webpack 中配置一个 externals，即可在项目中使用。

  externals: {
      'jquery': 'jQuery'
  }
  

• 先在webpack中配置alias，最后在main.js中用import $ from 'jquery'，即可在项目中使用。

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

• 在webpack中新增一个plugins，即可在项目中使用

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