package.json 封装 vue模块_Vue面试题

题目1：jquery和vue的区别

1-操作角度：通过MVVM思想将逻辑和UI分离，更方便展示数据

2-性能：通过虚拟DOM提升性能

3-模块化：方便开发

4-单页面应用：减轻服务器压力

5-组件复用：减少代码冗余，还可以使用别人的组件

题目2：mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

MVVM是软件开发中的架构思想，在原有的模型、视图中间增加视图数据模型，从而更方便管理数据；vue数据驱动，通过数据来显示视图层而不是节点操作。小项目十几个页面，用JQ方便。项目较大考虑到后期维护、性能等问题选择VUE

题目3：内置指令

{{data中的键}} 显示数据 v-text 显示数据 v-html 显示数据（能解析标签 v-on 或 @ 事件v-bind 或 : 动态属性绑定数据 v-for 循环 v-if 判断（控制DOM v-show 判断（控制CSS v-model=“data中的键” 表单输入绑定（原理Object.defineProperty

题目4：事件相关修饰符

.stop阻止冒泡 .prevent阻止默认动作 .self阻止冒泡（除本身，只触发自身事件） .once 仅触发一次 .capture（打乱冒泡改为由外向内） .passive（优化直接告诉浏览器没有阻止默认动作，不等待onscroll就完成）

题目5：ajax/jq/fetch关系

最初ajax 瑕疵：1-异步回调地狱，2-语法麻烦，3-语法有兼容性问题 后来jq 明确：基于ajax封装 好处：语法更简单、解决兼容性问题 瑕疵：异步回调地狱 官方是如何解决异步回调地狱的：promise

最后：fetch 官方封装的 不需要导入库直接使用（fetch = XMLHttpRequest + promise），方便解决跨域，没有cookie，不监测请求进度

题目6：fetch和axios（面试）

相同点：

1.都是项目用来发送异步请求的

2.都是基于XMLHttpRequest + promise

不同点：

1- axios是第三方封装的，fetch是官方封装的

2- axios更强（并发&拦截器 -> 写项目说）

3- fetch每次都需要 then(res=>res.json()).then(res=>{console.log(res)})

题目7：计算属性和侦听器区别

计算属性：1可以监控多个数据变化，2-计算属性有缓存

侦听器：只能监控模型数据变化，没缓存 常用于搜索

题目8：vue的mixin用过吗 简单说一下

作用：复用组件代码

应用：a组件用了过滤器 自定义指令 普通方法等，其他组件也需要 通过mixin复用导入即可

题目9：vue中非响应式（换句话说，什么时候双向绑定失效/出问题）

1利用索引修改数组（数组长度的改变）

2修改对象（对象属性的添加）

这俩种情况添加的属性都没有getter,setter，数据变，页面不便

可以通过$set（对象，需要的属性，属性值）

题目10：watch和computed的区别，watch可以替代computed吗，深度监听怎么写？

computed：有缓存，可以监控多个数据变化，键随意

watch：只能简单一个数据变化，键必须是模型名

不可以，因为computed有缓存

深度监听：监听数组，数组中的对象属性发送改变监听不到解决如下

题目11：vue的双向数据绑定原理

通过JS Object构造函数的defineProperty()方法实现

ps: Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象，一个叫getter,一个setter，getter在使用数据的时候触发，setter在修改数据的时候触发，修改数据的时候会触发setter，触发底层的watcher监听，通知dom修改刷新

题目12：Vue之间的组件通信，怎么实现的

父子

步骤1：子接受数据 通过props:['变量名1',...,'变量名n']来接受数据

步骤2：父传递数据 必须在父组件调用子组件上通过 v-bind:props中的变量名="父data中的键"

子父

步骤1：子创建自定义事件 this.$emit(自定义事件名称， 数据1,...,数据n)

步骤2：父调用自定义事件 父在调用子组件上通过 @自定义事件名称="函数名" 你在父定义函数接受数据即可

兄弟

步骤1：创建所有组件共享数据中心 const eventBus = new Vue()

步骤2：传递数据 eventBus.$emit(自定义事件名称， 数据1,...,数据n)

步骤3：接受数据 eventBus.$on(自定义事件名称，处理函数)

因为：VUE中MVVM思想、虚拟DOM等机制

所以：需要钩子函数/生命周期，从而方便开发、提升性能等

举例：需要mounted确保数据渲染完毕，才可以去获取DOM

需要destroyed来清除卸载组件的事件等

题目13：生命周期相关

钩子函数：在指定场景下触发的函数，举例（模型修改beforeUpdate和updated等）

生命周期：指代码可用和不可用时间，举例（data模型模型数据 created）

vue默认官方生命周期图8个，创建、过载、更新、卸载各两个，我以前在xxxx项目常用的有：created和mounted

题目14：created 和 mounted 有什么区别

相同点：模型都已经初始化

不同点：mounted中配合nextTick可以确保页面已经渲染完毕 可以继续获取DOM

题目15：nextTIck的作用

确保每次页面挂载渲染完毕，才可以使用dom操作，减少dom提升性能

题目16：vue脚手架

vue-cli2.x创建项目

npm install vue-cli -g

vue init webpack 项目名

vue-cli3.x创建项目

npm i @vue/cli@3.12.1

vue create 项目名

题目17：vue中如何检测数组变化

核心点：1.更改了数组的原型；2对数组里的每一项进行监控

在将数组处理成响应式数据后，如果使用数组原始方法改变数组时，数组值会发生变化，

但是并不会触发数组的setter来通知所有依赖该数组的地方进行更新，

为此，vue通过重写数组的某些方法来监听数组变化，重写后的方法中会手动触发通知该数组的所有依赖进行更新。

题目18：为何vue采用异步渲染

最终一次性更新DOM，避免重复操作DOM，耗费性能。

题目19：路由实现原理是什么

a.控制地址栏改变；b.根据地址栏的改变来控制组件的切换

hash通过window.onhashchange监听地址栏的改变；

history通过window.onpopState监听地址栏的改变

题目20：vue中v-if和v-show区别，如何选择？

v-if 控制DOM v-show 控制样式

默认开大代码量大：v-if

切换少：v-if

题目21：单页面应用的好处

优点

1.提高用户体验度、快、切换内容不需要重新加载整个页面，减轻服务器压力

2.前后端分离便于后期扩展

3.转场动画，也就是一个页面切换另一个页面 transition

缺点

1. 不利于seo优化【搜索引擎】

2. 初次加载耗时（注：这时候可能问vue首屏加载慢如何解决 见优化部分答案）

概念：只有一个html页面，所以跳转的方式是组件之间的切换

优点：跳转流畅；组件化开发；组件可复用；开发便捷

缺点：首屏加载过慢；seo优化不好

题目22：多页面的好处

概念：有多个页面，跳转方式是页面之间的跳转

优点：首屏加载快；seo优化好

缺点：跳转较慢；相对复杂，没有实现前后端分离

题目23：简述你对SSR或BSR的理解

SSR服务器渲染：有利于SEO优化

BSR客户端渲染：不利于SEO优化

题目24：咱们前端如何实现多页面应用（Nuxt.js）

###Nuxt.js原理

1、用户打开浏览器，输入网址请求到Node.js

2、部署在Node.js的应用Nuxt.js接收浏览器请求，并请求服务端获取数据

3、Nuxt.js获取到数据后进行服务端渲染

4、Nuxt.js将html网页响应给浏览器

###Nuxt.js使用了哪些技术？

Nuxt.js使用Vue.js+webpack+Babel三大技术框架/组件

Babel 是一个js的转码器，负责将ES6的代码转成浏览器识别的ES5代码。

###Nuxt.js的特性有哪些？基于 Vue.js 自动代码分层 服务端渲染 强大的路由功能，支持异步数据 静态文件服务 ES6/ES7 语法支持 打包和压缩 JS 和 CSS HTML头部标签管理 本地开发支持热加载 集成ESLint 支持各种样式预处理器： SASS、LESS、 Stylus等等

题目25：vue你之前做过spa类型的项目吗，怎么实现的？

在xxxx后台项目使用等

然后单页面应用原理就是利用BOM API就行。

题目26：hash、history 模式区别，原理

区别：地址栏多个#号

其次：history需要配置服务器才能正常访问

#hash路由

通过location.hash切换，通过window.onhashchange 监听切换

#history路由

通过history.pushState 切换,window.onpopstate 监听路径的切换

题目27：vue的css写在哪里？还有方式吗？

.vue组件中，

在assets目录下创建，然后导入

在JS中导入 import '@/assets/css/index.css'

在CSS中导入 @import "../static/css/user.css";

题目28：Vue按需加载里的 Import是命令还是方法？怎么理解

是方法，

ES6模块导入的语法其中一种。

component: () => import()

#语法1：导入整个模块的内容

import * as 变量名Obj from '路径及文件名.js';

#语法2：导入单个模块

import {变量名} from '路径及文件名.js';

#语法3：导入模块别名

import {变量名 as 别名} from '路径及文件名.js';

#语法4：仅仅导入（应用导入样式）

import '路径及文件名.js';

#语法5：导入模块（通过export default导出）

import 变量名 rom '路径及文件名.js';

#语法6：动态import

import( '路径及文件名.js');