Vue面试题
一、Vue框架相关知识
1.Vue的双向数据绑定原理是什么?(了解会叙述)
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
2.什么是 MVVM?(了解会叙述)
MVVM 是Model-View-ModelView的缩写,是一种脱胎于 MVC 模式的设计模式。
Model 代表数据层,负责存放业务相关的数据;
View 代表视图层,负责在页面上展示数据;
ViewModel 是的作用是同步 View 和 Model 之间的关联,其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化,并会选择性的传给 Model;
Data Bindings 工具用于监听 Model 数据变化,并将其更新给 View。
3.mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?(了解会叙述)
mvc和mvvm都是一种设计思想。
主要就是mvc中Controller演变成mvvm中的viewModel。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
区别:vue数据驱动,通过数据来显示视图层而不是像Jquery等的节点操作。
场景:数据操作比较多的场景,更加便捷
4.在Vue中使用插件的步骤(了解会叙述)
采用ES6的import … from …语法或CommonJS的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })
5. vue-loader是什么?使用它的用途有哪些?(了解会叙述)
答:解析.vue文件的一个加载器,跟template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等
6.说说你对 SPA 单页面的理解,它的优缺点分别是什么?(了解会叙述)
SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。
优点:
l 用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;
l 基于上面一点,SPA 相对对服务器压力小;
l 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理;
缺点:
l 初次加载耗时多:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载;
l 前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理;
l SEO (搜索引擎优化)难度较大:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。
二、Vue基础
1.请问v-if和v-show有什么区别(理解会用)
相同点:两者都是在判断DOM节点是否要显示。
不同点:
v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
v-if有更高的切换消耗,不适合做频繁的切换;
v-show有更高的初始渲染消耗,适合做频繁的切换
2. vue中 key 值的作用(理解会用)
使用key来给每个节点做一个唯一标识 key的作用主要是为了高效的更新虚拟DOM。
另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。
3.为什么避免 v-if 和 v-for 用在一起(理解)
当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,通过v-if 移动到容器元素,不会再重复遍历列表中的每个值。
取而代之的是,我们只检查它一次,且不会在 v-if 为否的时候运算 v-for。
4. Vue 中 computed 和 watch 有什么区别?(理解会用)
计算属性 computed:
支持缓存,只有依赖数据发生变化时,才会重新进行计算函数;
计算属性内不支持异步操作;
计算属性的函数中都有一个 get(默认具有,获取计算属性)和 set(手动添加,设置计算属性)方法;
计算属性是自动监听依赖值的变化,从而动态返回内容。
侦听属性 watch:
不支持缓存,只要数据发生变化,就会执行侦听函数;
侦听属性内支持异步操作;
侦听属性的值可以是一个对象,接收 handler 回调,deep,immediate 三个属性;
监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些其他事情。
5. 怎么解决vue的闪动问题(理解会用)
在使用vue的插值表达式时,由于代码需要经过vue解析展现到界面,当网络有延迟时,页面会显示源代码。
解决方式:
在 css 代码中添加 v-cloak 规则,同时在待编译的标签上添加 v-cloak 属性。
[v-cloak] { display: none; }
{{ message }}
6. v-model如何实现双向绑定(理解)
v-model双向绑原理是利用v-bind来绑定value的值,用v-on去绑定input标准事件监听输入域的内容,当内容变化时,通过$event这个事件对象获取到最新的输入域的值,然后把最新的值赋值给旧的值,从而进行数据的更新。
7.vue组件style中的scoped属性的作用(理解会用)
功能作用:
实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。
实现原理:
vue在DOM结构以及css样式上加上唯一的标记,保证唯一性来达到样式私有化,来保证不会被污染全局的作用
8. Vue中过滤器是什么?怎么自定义全局过滤器?(理解会用)
过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。
Vue有很多很便利的过滤器,过滤器通常会使用管道标志 “ | ”。
定义一个全局的自定义过滤器,需要使用Vue.filter()构造器。
例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-enrZUKft-1622020926095)(file:///D:/Temp/msohtmlclip1/01/clip_image001.png)]
9. 在什么阶段才能访问操作DOM?(理解)
在钩子函数 mounted 被调用前,Vue 已经将编译好的模板挂载到页面上,所以在 mounted 中可以访问操作 DOM。
10. 常用的事件修饰符有哪些?(理解会用)
.stop:阻止冒泡;
.prevent:阻止默认行为;
.self:仅绑定元素自身可触发;
.once:只触发一次…
11.vue-router中怎么实现懒加载?(理解会用)
例:component: () => import(’@/page/Vuex/index’)
12. vue如何监听键盘事件中的按键?(理解会用)
<input@keyup.enter=“function”>
13. vue如何自定义指令?(理解会用)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KcQx46wX-1622020926098)(file:///D:/Temp/msohtmlclip1/01/clip_image003.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PVhOEY4K-1622020926102)(file:///D:/Temp/msohtmlclip1/01/clip_image005.jpg)]
三、component组件
1. 组件之间的传值?(理解会用)
①父组件与子组件传值
父组件通过标签上面v-bind:定义传值
子组件通过props方法接受数据
②子组件向父组件传递数据 子组件通过$emit方法发送事件并传递参数
父组件在标签上v-on:监听子组件在$emit中定义的事件
③兄弟组件之间传值
(1)通过VueX共享数据实现兄弟组件之间传值
(2)创建一个空的vue实例作为事件中心,然后挂载到当前的vue实例的原型上,然后另一个组件进行emit 传递事件以及需要传递的数据 。
2.在Vue 组件中 data 为什么必须是函数? (理解)
在 new Vue() 中, data 是可以作为一个对象进行操作的,然而在 component 中, data 只能以函数的形式存在,不能直接将对象赋值给它。
四、Vue-router路由
1. 路由之间跳转的方式有哪些?分别是什么?(理解会用)
①声明式导航:通过点击链接实现导航的方式,叫做声明式导航
例如:普通网页中的 链接 或 vue 中的
②编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航
例如:普通网页中的 location.href
2.Vue-router 路由有哪些模式?有什么区别?(理解)
一般有两种模式:
hash 模式:后面的 hash 值的变化,浏览器既不会向服务器发出请求,浏览器也不会刷新,每次 hash 值的变化会触发 hashchange 事件。
history模式:利用HTML5中新增的pushState() 和 replaceState() 方法。
这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
3.vue-router传递参数的几种方式有哪些?如何使用?(理解会用)
①使用声明式导航router-link中的to来传递
参数绑定:
<router-link v-bind:to=” {name:‘xxx’,params:{key:value}}”>
在hellovue.vue中接收参数:
传递的名字是:{{$route.params.username}}
②采用url传参
在路由文件里采用冒号的形式传参,这就是对参数的绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AkgomU4c-1622020926130)(file:///D:/Temp/msohtmlclip1/01/clip_image007.jpg)]
接收参数:
直接通过this.$route.params.xx接收参数,或者在router中设置props: true,在当前页面通过props接收参数。
5. vue-router如何定义嵌套路由?(理解会用)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yg6V0qmb-1622020926642)(file:///D:/Temp/msohtmlclip1/01/clip_image009.jpg)] |
五、VueX状态管理模式
1.什么是vuex?(理解会叙述)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,用来集中管理数据。
2.vuex有哪几种属性?(理解会用)
有五种,分别是 State、 Getter、Mutation 、Action、 Module。
modulestate => 基本数据(data)
getters => 从基本数据派生的数据 ,和组件中的computed很相似
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex
3. vuex 的 store 特性是什么?(理解会叙述)
①vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data
②state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新
③它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
4.vuex 的 getter 特性是什么?(理解会叙述)
①getter 可以对 state 进行计算操作,它就是 store 的计算属性
②虽然在组件内也可以做计算属性,但是 getters 可以在多组件之间复用
③如果一个状态只在一个组件内使用,是可以不用 getters
5. vuex 的 mutation 特性是什么?(理解会叙述)
action 类似于 muation, 不同在于:
①action 提交的是 mutation,而不是直接变更状态
②action 可以包含任意异步操作
6. vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中?(理解会叙述)
①如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里;
②如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回。
7. 不用 vuex 会带来什么问题?(理解会叙述)
可维护性会下降,想修改数据要维护三个地方;
可读性会下降,因为一个组件里的数据,根本就看不出来是从哪来的;
增加耦合,大量的上传派发,会让耦合性大大增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。
六、Vue生命周期
1.什么是vue生命周期?(了解会叙述)
Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
2. vue生命周期的作用是什么?(了解会叙述)
它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3.生命周期钩子函数有哪些?(理解会用)
①生命周期是VUE实例化或者组件创建到消亡的过程。
②beforeCreate 创建前的状态,初始化事件和生命周期。
③create创建完毕状态Init (初始化) injections (依赖注入) & reactivity (开始响应)。
④beforeMount 挂载前状态,是否有元素el,是否有模板,是否渲染到了函数内,是否作为模板进行了outerHTML渲染到了页面,向虚拟DOM上挂载的过程,并且还是把我们的‘#app’生成虚拟DOM,生成完毕后并渲染到view层。
⑤mounted 挂载结束状态,渲染到真正的DOM。
⑥beforeUpdate可以拿到Vue实例化改变前的状态。
⑦Updated拿到变动完成的状态。
⑧beforeDestroy消亡前的状态。
⑨destroyed实例化或组件被摧毁消亡
4. 第一次页面加载会触发哪几个钩子?(理解)
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子。
七、vue-cli工程化
1.构建的 vue-cli 工程都到了哪些技术,它们的作用分别是什么?(理解会叙述)
(1) vue.js:vue-cli工程的核心,主要特点是双向数据绑定和组件系统。
(2) vue-router:vue官方推荐使用的路由框架。
(3) vuex:专为 Vue.js 应用项目开发的状态管理器,主要用于维护vue组件间共用的一些变量和方法。
(4) axios(或者 fetch 、ajax ):用于发起 GET 、或 POST 等 http请求,基于 Promise 设计。
(5) vant等:一个专为vue设计的移动端常用UI组件库。
(6) 创建一个emit.js文件,用于vue事件机制的管理。
(7) webpack:模块加载和vue-cli工程打包器。
2. vue-cli 工程常用的 npm 命令有哪些?(理解会用)
下载 node_modules 资源包的命令:npm install XX
启动 vue-cli 开发环境的 npm命令:npm run serve
vue-cli 生成生产环境部署资源的 npm命令:npm run build
用于查看 vue-cli 生产环境部署资源文件大小的 npm命令:npm run build --report
3. 请说出vue-cli工程中每个文件夹和文件的用处(了解会叙述)
vue-cli目录解析:
(1) build 文件夹:用于存放 webpack 相关配置和脚本。开发中仅偶尔使用到此文件夹下webpack.base.conf.js 用于配置 less、sass等css预编译库,或者配置一下 UI 库。
(2) config 文件夹:主要存放配置文件,用于区分开发环境、线上环境的不同。常用到此文件夹下config.js 配置开发环境的端口号、是否开启热加载或者设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
(3) dist 文件夹:默认 npm run build 命令打包生成的静态资源文件,用于生产部署。
(4) node_modules:存放npm命令下载的开发环境和生产环境的依赖包。
(5) src: 存放项目源码及需要引用的资源文件。(
- src下assets:存放项目中需要用到的资源文件,css、js、images等。
(7) src下componets:存放vue开发中一些公共组件:header.vue、footer.vue等。
(8) src下emit:自己配置的vue集中式事件管理机制。
(9) src下router:vue-router vue路由的配置文件。
(10) src下service:自己配置的vue请求后台接口方法。
(11) src下page:存放vue页面组件的文件夹。
(12) src下util:存放vue开发过程中一些公共的.js方法。
(13) src下vuex:存放 vuex 为vue专门开发的状态管理器。
(14) src下app.vue:使用标签渲染整个工程的.vue组件。
(15) src下main.js:vue-cli工程的入口文件。
(16) index.html:设置项目的一些meta头信息和提供
用于挂载 vue 节点。(17) package.json:用于 node_modules资源部和启动、打包项目的 npm 命令管理。
4.请你详细介绍一些 package.json 里面的配置? (理解会叙述)
(1) scripts:npm run xxx 命令调用node执行的 .js 文件
(2) dependencies:生产环境依赖包的名称和版本号,即这些依赖包都会打包进生产环境的JS文件里面
的配置文件。
(10) src下service:自己配置的vue请求后台接口方法。
(11) src下page:存放vue页面组件的文件夹。
(12) src下util:存放vue开发过程中一些公共的.js方法。
(13) src下vuex:存放 vuex 为vue专门开发的状态管理器。
(14) src下app.vue:使用标签渲染整个工程的.vue组件。
(15) src下main.js:vue-cli工程的入口文件。
(16) index.html:设置项目的一些meta头信息和提供
用于挂载 vue 节点。(17) package.json:用于 node_modules资源部和启动、打包项目的 npm 命令管理。
4.请你详细介绍一些 package.json 里面的配置? (理解会叙述)
(1) scripts:npm run xxx 命令调用node执行的 .js 文件
(2) dependencies:生产环境依赖包的名称和版本号,即这些依赖包都会打包进生产环境的JS文件里面
(3) devDependencies:开发环境依赖包的名称和版本号,即这些依赖包只用于代码开发的时候,不会打包进生产环境js文件里面。