Vue 面试题汇总(持续更新中...)

41,128 阅读4分钟

1. vue中的MVVM模式

即Model-View-ViewModel。

Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。

ViewModel是Vue的核心,它是Vue的一个实例。Vue实例时作用域某个HTML元素上的,这个HTML元素可以是body,也可以是某个id所指代的元素。

DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化,当发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。

2. v-show指令,v-if的区别

条件渲染指令,与v-if不同的是,无论v-show的值为true或false,元素都会存在于HTML代码中;而只有当v-if的值为true,元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值

3. 如何让css只在当前组件中起作用

在每一个vue组件中都可以定义各自的css,js,如果希望组件内写的css只对当前组件起作用,只需要在style中写入scoped,即:

<style scoped></style>

4. 指令keep-alive

在vue-router写着keep-alive,keep-alive的含义:

如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令

<component :is='curremtView' keep-alive></component>

5. Vuejs组件

vuejs构建组件使用

Vue.component('componentName',{
    /*component*/ 
});   
// 这里注意一点,组件要先注册再使用
Vue.component('mine',{           
    template:'#mineTpl',          
    props:['name','title','city','content']        
}); 
var v=new Vue({      
    el:'#vueInstance',      
    data:{          
        name:'zhang',          
        title:'this is title',         
        city:'Beijing',         
        content:'these are some desc about Blog'     
    }
});

6. 路由嵌套

路由嵌套会将其他组件渲染到该组件内,而不是进行整个页面跳转router-view本身就是将组件渲染到该位置,想要进行页面跳转,就要将页面渲染到根组件,在起始配置路由时候写到:

var App = Vue.extend({ root });
router.start(App,'#app');

这里首先将根组件注册进来,用于将路由中配置好的各个页面渲染出来,然后将根组件挂载到与#app匹配的元素上。

7. 指令v-el的使用

有时候我们想就像使用jquery那样去访问一个元素,此时就可以使用v-el指令,去给这个元素注册一个索引,方便通过所属实例的$el访问这个元素。

注意

HTML不区分大小写,所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl。

示例

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>

8. vue.js中使用事件名

在vuejs中,我们经常要绑定一些事件,有时候给DOM元素绑定,有时候给组件绑定。绑定事件在HTML中用v-on:click-"event",这时evet的名字不要出现大写,因为在1.x中不区分大小写,所以如果我们在HTML写v-on:click="myEvent"而在js中写myEvent就出错误,所以在vuejs的1.x绑定事件时候,要尽量避免使用大写字母。在2.0中没有该限制!

9. Vue.js是什么

Vue.js(是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

10. VueJS 特性:

I: MVVM模式(数据变量(model)发生改变 视图(view)也改变, 视图(view)改变,数据变量(model)也发生改变)

使用MVVM模式有几大好处:

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

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

  3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

  4. 可测试性。可以针对ViewModel来对界面(View)进行测试

II: 组件化

III 指令系统

IIII: vue2.0开始支持虚拟dom

vue1.0是操作的是真的dom元素而不是虚拟的

虚拟dom:可以提升页面的刷新速度

虚拟DOM有利也有弊。

A:大小 - 其中之一就是更多的功能意味着代码包中更多行的代码。幸运的是,Vue.js 2.0 依旧比 较小(当前版本 21.4kb),并

且也正在删除很多东西。

B: 内存 -同样,虚拟DOM需要将现有的DOM拷贝后保存在内存中,这是一个在DOM更新速度和内存使用中的权衡。

C: 并不适用所有情况 -如果虚拟DOM可以一次性进行批量的修改是非常好的。但是如果是单独的、稀少的更新呢?这样的任何

DOM更新都将会使虚拟DOM带来无意义的预计算

11. Vue.js特点

简洁:页面由HTML模板+Json数据+Vue实例组成

数据驱动:自动计算属性和追踪依赖的模板表达式

组件化:用可复用、解耦的组件来构造页面

轻量:代码量小,不依赖其他库

快速:精确有效批量DOM更新

模板友好:可通过npm,bower等多种方式安装,很容易融入

12. Vue.js 和 AngularJS 之间的区别是什么?

下面是一些选择 Vue 而不是 Angular 的可能原因;

Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织你的应用程序,而不是任何时候都必须遵循 Angular 制定的规则。它仅仅是一个视图层,所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。在结合其他库方面它给了你更大的的空间,但相应,你也需要做更多的架构决策。例如,Vue.js 核心默认不包含路由和 ajax 功能,并且通常假定你在用应用中使用了一个外部的模块构建系统。这可能是最重要的区别

在 API 和内部设计方面,Vue.js 比 Angular 简单得多, 因此你可以快速地掌握它的全部特性并投入开发。

Vue.js 拥有更好的性能,因为它不使用脏检查。当 watcher 越来越多时, Angular 会变得越来越慢,因为作用域内的每一次数据变更,所有的 watcher 都需要被重新求值。Vue 则根本没有这个问题,因为它采用的是基于依赖追踪的观察系统,所以所有的数据变更触发都是独立的,除非它们之间有明确的依赖关系。

Vue.js 中指令和组件的概念区分得更为清晰。指令只负责封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 它拥有自己的视图和数据逻辑。在 Angular 中它们两者间有不少概念上的混淆。

13. Vue.js 和 React.js 有什么区别?

React.js 和 Vue.js 确实有一些相似——它们都提供数据驱动、可组合搭建的视图组件。然而,它们的内部实现是完全不同的。React 是基于 Virtual DOM——一种在内存中描述 DOM 树状态的数据结构。React 中的数据通常被看作是不可变的,而 DOM 操作则是通过 Virtual DOM 的 diff 来计算的。与之相比,Vue.js 中的数据默认是可变的,而数据的变更会直接出发对应的 DOM 更新。相比于 Virtual DOM,Vue.js 使用实际的 DOM 作为模板,并且保持对真实节点的引用来进行数据绑定。

Virtual DOM 提供了一个函数式的描述视图的方法,这很 cool。因为它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图通与数据的同步。它也开辟了 JavaScript 同构应用的可能性。

实话实说,我自己对 React 的设计理念也是十分欣赏的。但 React 有一个问题就是组件的逻辑和视图结合得非常紧密。对于部分开发者来说,他们可能觉得这是个优点,但对那些像我一样兼顾设计和开发的人来说,还是更偏好模板,因为模板能让我们更好地在视觉上思考设计和 CSS。JSX 和 JavaScript 逻辑的混合干扰了我将代码映射到设计的思维过程。相反,Vue.js 通过在模板中加入一个轻量级的 DSL (指令系统),换来一个依旧直观的模板,且能够将逻辑封装进指令和过滤器中。

React 的另一个问题是:由于 DOM 更新完全交由 Virtual DOM 管理,当你真的想要自己控制 DOM 是就有点棘手了(虽然理论上你可以,但这样做时你本质上在对抗 React 的设计思想)。对于需要复杂时间控制的动画来说这就变成了一项很讨人厌的限制。在这方面,Vue.js 允许更多的灵活性,并且有不少用 Vue.js 构建的富交互实例

14. 请详细说下你对 Vue 生命周期的理解?

总共分为 8 个阶段创建前/后,载入前/后,更新前/后,销毁前/后。

创建前/后: 在 beforeCreate 阶段,vue 实例的挂载元素 el 还没有。

载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。

更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。

销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在

15. 组件之间如何传值?

父组件与子组件传值:Props

子组件向父组件传递数据: 子组件通过$emit方法传递参数,触发父组件event

16. vue-router 有哪几种导航钩子?

全局导航钩子

router.beforeEach(to, from, next),

router.beforeResolve(to, from, next),

router.afterEach(to, from ,next)

组件内钩子

beforeRouteEnter,

beforeRouteUpdate,

beforeRouteLeave

单独路由独享组件

beforeEnter

17. vue 的双向绑定的原理是什么

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

18. vuex 的mutation和action的特性是什么?有什么区别?

mutation用于修改state的数据,是同步的。

action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态

action 可以包含任意异步操作

19. 写 React / Vue 项目时为什么要在组件中写 key,其作用是什么?

在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 Diff 算法中 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染。

20. computed 和 watched 的区别:

computed 是计算属性,依赖其他属性计算值,并且 computed 的值有缓存,只有当计算值变化才会返回内容。

watch 监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。

所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed,对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。