Vue面试题-经典篇

最新推荐文章于 2025-10-16 13:32:01 发布

原创

最新推荐文章于 2025-10-16 13:32:01 发布 · 822 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #面试题 #Vue #经典Vue面试题

本文汇总了Vue.js的常见面试问题，包括Vue的优点、数据传递、指令比较、组件通信、CSS隔离、DOM获取、指令使用、vue-loader作用、key的作用、axios使用、v-model和v-if/v-show的用法等，旨在帮助开发者准备Vue面试。

Vue常见面试题

1.Vue优点

低耦合 视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性 你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试 界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

2.vue父组件向子组件传递数据？

1.父组件将数据绑定在子组件上

<template>
  <transition name="slide">
    <music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
  </transition>
</template>

2.子组件接受数据props

export default {
   
   
  props: {
   
   
    bgImage: {
   
   
      type: String,
      default: ''
    },
    songs: {
   
   
      type: Array,
      default: () => []
    },
    title: {
   
   
      type: String,
      default: ''
    }
  },
}

3.子组件向父组件传递事件

在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了
父组件

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
   
   
    components: {
   
   
      child
    },
    methods: {
   
   
      fatherMethod() {
   
   
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
   
   
    methods: {
   
   
      childMethod() {
   
   
        this.$emit('fatherMethod');
      }
    }
  };
</script>

4.v-show和v-if指令的共同点和不同点

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

5.如何让CSS只在当前组件中起作用

将当前组件的修改为<style scoped>

6.`<keep-alive></keep-alive>`的作用是什么?

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

7.如何获取dom

通过refs方法
HTML

<div id="App">
     <div class="aa" ref="menuItem" @click="aa($event)">aa</div>
    <div @click="bb"\>bb</div>
</div>

<script>
     new Vue({
   
   
          el: '#App',
          methods: {
   
   
               bb: function() {
   
   
                    var getMenuText = this.$refs.menuItem.innerText;
                    console.log(getMenuText);//aa
               },
               aa: function(e) {
   
   
                    var el = e.target;
                    console.log(el);//<div class="aa">aa</div>
               }
          }
     })
</script>