vue2.0面试题合集 2021版

最新推荐文章于 2025-06-08 06:00:00 发布

小舟同学

最新推荐文章于 2025-06-08 06:00:00 发布

阅读量1.9k

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端框架文章标签： java

本文链接：https://blog.youkuaiyun.com/qq_44021875/article/details/110956697

前端框架专栏收录该内容

4 篇文章

订阅专栏

本文全面解析Vue.js核心概念，包括MVVM模式、生命周期、组件通信及Vuex状态管理等，助您快速掌握Vue开发技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue问题合集

Vue.js是什么？

是一个轻巧、高性能、可组件化的 MVVM 库，同时拥有非常容易上手的 API；
是一个构建数据驱动的 Web 界面的库。
是一个构建用户界面（UI）的“渐进式”JavaScript框架

Vue和JQuery的区别？

Vue是一个渐进式的JavaScript框架，MVVM库，主要关注于数据（双向绑定），重点操作里面的数据
JQuery是一个类库，就叫JQuery；里面有许多方法（eg静态方法，视图方法）可以简便开发，关注元素，比如找ID什么的

使用 Vue 的好处

vue 两大特点：响应式编程（仅仅针对PC端）、组件化
vue 的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟 DOM、运行速度快

Vue干嘛用的？

用数据绑定的思想，Vue可以简单写个单个页面，也可以写一个大的前端系统，也可以做手机APP的界面

对于MVVM的理解？

一种比较好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步
M：model（数据模型） V:view(视图) VM：ViewModel（视图模型）
Model：(后台传递的数据) 定义数据修改和操作中的业务逻辑
View：（HTML元素）数据绑定的声明、指令的声明、事件绑定的声明
ViewModel:（数据交互）连接Model和View

Vue 的生命周期

beforeCreate（创建前）	在数据观测和初始化事件还未开始
created（创建后）	完成数据观测，属性和方法的运算，初始化事件，$ el 属性还没有显示出来 `（到Java的后台进行加载数据）`
beforeMount（载入前）	在挂载开始之前被调用，相关的 render 函数首次被调用。实例已完成以下的配置：编译模板，把 data 里面的数据和模板生成 html。注意此时还没有挂载 html 到页面上。
mounted（载入后）	在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的 html内容替换 el 属性指向的 DOM 对象。完成模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互
beforeUpdate（更新前）	在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后）	在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前）	在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后）	在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

个人总结：
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
阶段：
总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
第一次页面加载会触发哪几个钩子？
会触发面这几个beforeCreate, created, beforeMount, mounted

Vue 的响应式原理（实现数据双向绑定的原理）

当一个 Vue 实例创建时，vue 会遍历 data 选项的属性，用 Object.defineProperty 将它们转为 getter/setter 并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
Eg:js实现简单的双向绑定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p></div>
</body>
<script type="text/javascript">
	  var obj = {}
	   Object.defineProperty(obj, 'txt', {
	       get: function () {
	           return obj
	       },
	       set: function (newValue) {
	           document.getElementById('txt').value = newValue
	           document.getElementById('show').innerHTML = newValue
	       }
	   })
	   document.addEventListener('keyup', function (e) {
	       obj.txt = e.target.value
	   })
</script>

Vue组件是干嘛用的？

一个组件就是一个单独的Vue实例

vue 组件通信

（1）.父组件与子组件传值
Props属性:是父组件用来传递数据的一个自定义属性
V-model事件:直接绑定父组件变量，将数据从子组件传回父组件
（2）.非父子组件间的数据传递，兄弟组件传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。也可使用 vuex

Vue组件的开发步骤？

1.主要用到的东西：
目标框架：vue
打包工具：webpack
发布源：npm
代码托管：github
2.开发步骤：
(1).创建一个项目
(2).调整项目结构(就是在项目的根目录（src：源码目录）里的components可能创建一个文件夹存放组件，一个页面是一个组件，一个页面里面还会包着很多组件)
(3).编写组件
(4).使用Vue-cli-service库模式打包编译
(5).发布到npm

怎么自定义一个组件？

单个组件：
(1).在src文件夹中的components新建一个Vue组件，然后在里面写自己的代码
(2).然后在默认的HelloWorld.vue里注册这个组件，先引用Vue这个组件，然后在export default里注册
(3)然后执行npm run dev命令，看能在浏览器运行不
一般项目中就是：
在src文件夹中新建一个文件夹，然后这个文件夹里面就创建很多组件，然后主要是利用了路由来跳组件

vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to，from，next：
to：route即将进入的目标路由对象，
from：route当前导航正要离开的路由
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

vuex是什么？怎么使用？哪种功能场景使用它？

（1）是什么

状态管理器，用来管理Vue的所有组件状态，可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作；
Vuex分成五个部分：
1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步操作
5.Module：将vuex进行分模块

（2）怎么使用

只用来读取的状态集中放在store中；
改变状态的方式是提交mutations，这是个同步的事物；
异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，…… export 。

（3）应用场景

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
以下为详细介绍VueX的5种状态：
在这里插入图片描述

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

const store = new Vuex.Store({ //store实例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules
项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

const moduleA = {  state: { ... },  mutations: { ... },  actions: { ... },  getters: {...}

const moduleB = {  state: { ... },  mutations: { ... },  actions: { ...  }

const store = new Vuex.Store({  modules: {    a: moduleA,    b: moduleB})

vue-cli如何新增自定义指令？

1.创建局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

vue如何自定义一个过滤器？

html代码：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>
js代码：
var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数

对keep-alive 的了解？

keep-alive是== Vue 内置的一个组件==，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。
使用方法:

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

参数解释:
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。
使用示例

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
 <keep-alive include="a,b">
  <component></component>
 </keep-alive>
 
<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
 </keep-alive>
 
<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
 <keep-alive :include="['a', 'b']">
   <component></component>
 </keep-alive>

以下为简单一句话问答：
css只在当前组件起作用
在style标签中写入scoped即可例如：

v-if 和 v-show 区别

v-if按照条件是否渲染，v-show是display的block或none；

$ route 和 $ router 的区别

$ route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
而$router 是“路由实例” 对象包括了路由的跳转方法，钩子函数等

vue.js的两个核心是什么？

数据驱动、组件系统

vue几种常用的指令

v-model:数据双向绑定，表单元素绑定什么的
v-on:单向数据绑定，绑定事件什么的
v-bind：绑定属性值
v-for:类似js的遍历
V-if:根据boolean值进行判断是否渲染该元素
V-show:与v-if类似

vue常用的修饰符？

.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用

v-on 可以绑定多个方法吗？

可以

vue中 key 值的作用？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

什么是vue的计算属性？

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。
好处：
①使得数据处理结构清晰；
②依赖于数据，数据更新，处理结果自动更新；
③计算属性内部this指向vm实例；
④在template调用时，直接写计算属性名即可；
⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；
⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。
computed和watcher 的区别：
computed是计算属性；computed在data中无定义，是通过计算其他属性来得到对应的值
watcher 是监听属性；在每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。