vue常见面试题汇总

雨点打透心脏的1/2处 2022-11-29 12:15 309阅读 0赞

**1.v-if 和 v-show有什么区别**

（1）相同点：都是判断 DOM 节点的显示和隐藏

（2）不同点：  
v-if 是从 DOM 树上删除或重建节点，v-show 是通过修改display 的属性值来控制元素的显隐。

v-if 是惰性的，初始条件为假就什么也不做，为真才会编译，v-show 在任何条件下都被编译。

v-if有更高的切换消耗，不适合做频繁的切换，v-show 有更高的初始渲染消耗，适合做频繁的切换。

**2.v-on可以监听多个方法**

**3.v-if 和 v-for一起使用的弊端以及解决办法**

由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制dom元素的显隐，所以就会不停地去创建和销毁元素，造成页面卡顿，性能下降。

解决办法：在v-for的外层或内层包裹一个元素来使用v-if。

**4.beforeDestroy 里面一般进行什么操作**

beforeDestroyed 是组件销毁前执行的一个生命周期，在这个生命周期里，我们可以进行回调函数或定时器的清除，不用的 dom 元素的清除等。

**5.vue 组件间的传值有几种方式**

（1）兄弟间传值：小项目通过eventBus

eventBus.js

// 定义一个新的vue实例专门用于传递数据，并导出
    import Vue from 'vue'
    export default new Vue()

兄弟A：定义传递的方法名和传输内容，点击事件或钩子函数触发$emit事件

<template>
      <div class="A">
        <h2>我是A</h2>
        <p @click="toBClick">点击向兄弟B传递数据</p>
        <child1></child1>
      </div>
    </template>
    
    <script>
    // 引入eventBus，其实就是引入另一个vue实例
    import eventBus from '../../common/js/eventBus'
    
    import child1 from './Child1'
    
    export default { 
      components: { child1},
      methods: { 
        toBClick () { 
          // 定义方法名，和要传输的数据
          eventBus.$emit('fromA', '我是小可爱，来自A火星')
        }
      }
    }
    </script>
    <style scoped>
    .A{ 
      width: 260px;
      height: 300px;
      margin: 50px 50px;
      padding: 10px 10px;
      border: 1px solid blue;
    }
    p{ 
      margin-top: 15px;
      padding: 10px 10px;
      background: palegreen;
    }
    </style>

兄弟B：显示传过来的值，在mounted执行。

<template>
     <div class="B">
         <h2>我是B</h2>
        <p>来自兄弟A的值：{ { content}}</p>
     </div>
    </template>
    
    <script>
    // 引入
    import eventBus from '../../common/js/eventBus'
    
    export default{ 
      data () { 
        return { 
          content: ''
        }
      },
    
      // 在这里执行数据获取的方法
      mounted () { 
        this.getA()
      },
      methods: { 
        getA () { 
          let that = this
          eventBus.$on('fromA', function (val) { 
            // 这里的that指的是项目vue的实例，用that接收，与eventBus的vue作区分
            that.content = val
          })
        }
      }
    }
    </script>
    
    <style scoped>
    .B{ 
      width: 200px;
      height: 200px;
      margin: 30px 30px;
      border: 1px solid green;
    }
    p{ 
        margin-top: 20px;
        line-height: 15px;
    }
    </style>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150]

（2）父传子：父组件使用props向子组件传递数据（在父组件内定义，在子组件里用props接收）

父组件

<template>
      <div class="parent">
        <h2>{ {  msg }}</h2>
        <child1 psMsg="父传子的内容:我是你爸爸"></child1> 
      </div>
    </template>
    
    <script>
    import child1 from './Child1'
    export default { 
      components: { child1},
      name: 'Index',
      data () { 
        return { 
          msg: '父组件'
        }
      },
      methods: { 
      }
    }
    </script>
    <style>
    .parent{ 
      width: 260px;
      height: 300px;
      margin: 50px 50px;
      padding: 10px 10px;
      border: 1px solid blue;
    }
    </style>

子组件

<template>
     <div class="son">
        <p>{ {  sonMsg }}</p>
        <p>子组件接收到内容：{ {  psMsg }}</p>
     </div>
    </template>
    
    <script>
    export default{ 
      name: 'Child1',
      data () { 
        return { 
          sonMsg: '子组件'
        }
      },
      props: ['psMsg']
    }
    </script>
    
    <style>
    .son{ 
      width: 200px;
      height: 200px;
      margin: 30px 30px;
      border: 1px solid green;
    }
    p{ 
        margin-top: 20px;
        line-height: 15px;
    }
    </style>

效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150 1]

（3）子传父：子组件主要通过事件传递数据给父组件，在子组件中通过$emit来自定义一个事件，在父组件中调用该事件，从而得到从子组件中传给父组件的值。

子组件

<template>
     <div class="son">
        <p>子组件</p>
        <p @click="chuanClick()">点击向父组件传值</p>
     </div>
    </template>
    
    <script>
    export default{ 
      name: 'Child1',
      data () { 
        return { 
          sonMsg: '儿子来了'
        }
      },
      methods: { 
        chuanClick () { 
          this.$emit('sonMsg1', this.sonMsg)
        }
      }
    }
    </script>
    
    <style scoped>
    .son{ 
      width: 200px;
      height: 200px;
      margin: 30px 30px;
      border: 1px solid green;
    }
    p{ 
        margin-top: 20px;
        line-height: 15px;
    }
    p:nth-child(2){ 
        padding: 10px 10px;
        border: 1px solid palegreen;
        background: palegreen;
    }
    </style>

父组件

<template>
      <div class="parent">
        <h2>父组件</h2>
        <p>父组件接收的内容：{ { getMsg}}</p>
        
        <child1 @sonMsg1='getsonMsg'></child1>
      </div>
    </template>
    
    <script>
    import child1 from './Child1'
    export default { 
      components: { child1},
      name: 'Index',
      data () { 
        return { 
          getMsg: ''
        }
      },
      methods: { 
        getsonMsg (sonMsg) { 
          this.getMsg = sonMsg
        }
      }
    }
    </script>
    <style scoped>
    .parent{ 
      width: 260px;
      height: 300px;
      margin: 50px 50px;
      padding: 10px 10px;
      border: 1px solid blue;
    }
    p{ 
      margin: 15px;
    }
    </style>

效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150 2]

**6.watch 和 computed 的区别**

watch 作用通常是由一个值影响多个值的改变并且能监听到这个值变化时，会去执行一个回调函数，此时我们可以在这个回调函数中做一些逻辑处理。

computed 是根据依赖的值衍生出一个新的值，并且依赖的值可以有多个，只有当被依赖的值发生改变时，才会重新去执行计算。

**7.vue 父组件和子组件生命周期的顺序**

（1）渲染

父组件 beforeCreate() --> 父组件 created() --> 父组件 beforeMount() --> 子组件 beforeCreate() --> 子组件 created() --> 子组件 beforeMount() --> 子组件 mounted() --> 父组件 mounted()

（2）更新

父组件更新：父组件 beforeUpdate() --> 父组件 updated()  
子组件更新：父组件 beforeUpdate() --> 子组件 beforeUpdate() --> 子组件 updated() --> 父组件 updated()

（3）销毁

父组件 beforeDestroy() --> 子组件 beforeDestroy() --> 子组件 destroyed() --> 父组件 destroyed()

**8.vue 中父组件监听子组件的生命周期**

父组件通过 @hook：对子组件的生命周期进行监听。

**9.vue 中的事件修饰符主要有哪些以及作用**

.stop：阻止事件冒泡  
.native：绑定原生事件  
.self：将事件绑定在自身身上，相当于阻止事件冒泡  
.prevent：阻止默认事件  
.caption：用于事件捕获

**10.什么是 keep-alive**

keep-alive 是用于做组件缓存的，只会执行一次，不会被销毁。  
被 keep-alive 包裹的组件，没有 create 和 beforeDestroyed 等方法，但是有 activated 和 deactivated 方法。

**11.watch 能否监听到数组的 pop 行为**

对于有返回值的数据，watch就能监听到，比如数组的 pop，push，unshift，map 等行为。

**12.vue 中如何解决页面不重新渲染问题**

（1）修改对象属性后页面未重新渲染可以使用 this.$set(对象名称，‘属性名’，‘属性值’)

（2）使用 this.$forceUpdate() 方法可重新渲染页面

**13.跳转方法**

（1）根据路由跳转：this.$router.push(\{ path:’ ',，query：\{ set:123 \} \})

（2）标签带参跳转：<router-link to=’“\{path：’ '，query：\{ set:123\} \}”>

**14.vue 中 key 值的作用**

（1）给每一个节点做一个唯一标识

（2）主要是为了高效的更新虚拟 DOM

**15.什么是 vuex？在那种场景下使用？**

vuex是全局状态管理工具，它有以下几个核心部分组成：

state:存储数据；

mutations:更新数据的方法；

actions:调用mutations方法，更新state数据；

getters:对state中的数据进行预处理；

**16.对于 MVVM 的理解？**

M（数据层） V（视图层） VM（view-model）视图模型层）用来连接（数据层）（视图层）

**17.vue 的生命周期**

beforeCreate: 进行数据和方法的初始化；

created: 已经完成数据和方法的初始化；

beforeMount: 开始渲染dom

mounted:可以渲染dom

beforeUpdate: data中的数据即将被更新；

updated: data中的数据更新完毕；

beforeDestroy: 实例即将销毁；

destroyed:实例已被销毁；

**18.vue 创建组件的时候 data 中为什么会被 return 出一个对象**

可以保证组件的每一次调用都是创建一个新对象，组件之间不会产生影响；

**19.vue 中常见的命令**

v-text 可以覆盖已有的内容，不会解析带标签的数据

v-html 可以解析带标签的数据

v-on 绑定事件（例：v-on：click（“”））双击事件：@dblclick=“”方法中通过this获取数据

v-show 本质是控制元素的display

v-if 本质操作的是dom树，直接从dom树中删除了

v-show 和 v-if 都是控制元素的显隐

v-for 本质是把数据拷贝若干份

v-model 双向数据绑定

v-bind 设置元素的属性比如（class，src）

// 简写
    <img  :src=" show? '' : '' " > 
    // 全写
    <img v-bind:src="">

**20.el 挂载点**

1.vue会管理el选项命中的元素及其内部的后代元素。

2.可以使用其他的选择器，但是建议使用ID选择器。

3.可以使用其他的双标签，不能使用HTML和BODY。

**21.ssr是什么**

服务端渲染

什么是SPA

SPA是单页面应用程序，vue react angular 都是,整个项目只有一个页面；局部刷新而来；

**22.vue中有哪些内置组件**

component slot transtion fliters

**23.什么是路由懒加载**

路由懒加载是通过异步的方式来加载对应的路由组件，提高页面相应速度

**24.vue如何优化页面加载**

使用cdn,不要打包一些公共的文件和组件库

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150]: /images/20221124/1c431ebb8ed34452b232dc6f4ddf376c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150 1]: /images/20221124/3d7100fea2574e0f8eb6520f2717ace6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_150x150 2]: /images/20221124/308432aaca6b4518bac1e958be2283d3.png