vue——常见面试问题总结

原创 minsong 随笔 Vue 2411阅读 2018-05-24 20:10:11 举报

1.比较理论性的问题

1.什么是MVVM,它与MVC的区别

MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到View 。

2.请谈谈Vue框架和Angular.js和React的不同,vue的优点有哪些

Vue对比其他框架

1.低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

2.可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。

3.独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。

4.可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

3.详细说一下对于生命周期的理解

vue——生命周期钩子

4.说一下组件之间的传值交互

vue——组件间的通信

5.说一下数据双向绑定的原理(常见提问

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
1.需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
2.compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
3.Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
3.1 在自身实例化时往属性订阅器(dep)里面添加自己
3.2 自身必须有一个update()方法
3.3 待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
4.MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

6.说一下对于vue-router的理解

vue——vue-router的理解

7.vuex是什么?原理?怎么使用?哪种功能场景使用它?

vue——vuex的简单理解

8.axios的了解

vue——axios用法简单介绍

9.vue有哪些可以优化的

vue——项目优化,缩短首屏加载时间

10.你觉得哪些项目适合vue框架?

1.数据信息量比较多的,反之类似企业网站就无需此框架了。
2.手机web和app应用多端共用一套界面的项目,因为使用vue.cli+webpack后的前端目录,非常有利于项目的跨平台部署。

2.常见的知识点问题

1.v-show和v-if指令的区别

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

2.<keep-alive></keep-alive>的作用是什么
<keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染

3.如何让CSS只在当前组件中起作用?
将当前组件的<style>修改为<style scoped>
4.vue-router有哪几种导航钩子?

1.全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
2.组件内的钩子;
3.单独路由独享组件

5.自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?

全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。
组件内定义指令:directives
钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:el、binding

6.computed,watch,methods之间的区别以及各自的使用场景

vue——computed,watch,methods之间的区别以及各自的使用场景

7.vue如何实现按需加载配合webpack设置?

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入,改为const定义的方式进行引入。
1.不进行页面按需加载引入方式:import home from '../../common/home.vue'
2.进行页面按需加载的引入方式:const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

8.vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?

1.在components目录新建你的组件文件(smithButton.vue),script一定要export default {
2.在需要用的页面(组件)中导入:import smithButton from ‘../components/smithButton.vue’
3.注入到vue的子组件的components属性上面,components:{smithButton}
4.在template视图view中使用,<smith-button> </smith-button>
问题有:smithButton命名,使用的时候则smith-button。

9.vue-loader是什么?使用它的用途有哪些?

解析.vue文件的一个加载器,跟template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等

10.在Vue中使用插件的步骤

1.采用ES6的import ... from ...语法或CommonJSd的require()方法引入插件
2.使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

评论 ( 1 )
最新评论