前端面试系列（三）

vue核心知识点

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

答：（1）数据驱动，也叫双向数据绑定。

Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。

（2）组件系统，vue组件的核心选项:

a.模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
b.初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，通常是私有状态。
c.接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。
d.方法（methods）：对数据的改动操作一般都在组件的方法内进行。
e.生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。
f.私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

2、对于Vue是一套渐进式框架的理解

答：渐进式代表的含义是：没有多做职责之外的事。

vue.js只提供了 vue-cli 生态中最核心的 组件系统和双向数据绑定。像vuex、vue-router都属于围绕 vue.js开发的库。

比如说，你要使用Angular，必须接受以下东西：a.使用它的模块机制；b.使用它的依赖注入c.使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）,所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。比如说，你要使用React，你必须理解：a.函数式编程的理念；b.需要知道副作用，纯函数，如何隔离副作用，它的侵入性看似没有Angular那么强，主要是因为软性侵入。Vue与React、Angular的不同的是它是渐进的：你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了最核心的东西。

3、请问 v-if 和 v-show 有什么区别

答：共同点：v-if 和 v-show 都是动态显示DOM元素。

区别：

a、编译过程： v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。

b、编译条件： v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

c、性能消耗： v-if有更高的切换消耗。v-show有更高的初始渲染消耗。

d、应用场景： v-if适合运行时条件很少改变时使用。v-show适合频繁切换。

4、vue常用的修饰符

答：v-on 指令常用修饰符：

.stop - 调用 event.stopPropagation()，禁止事件冒泡。

.prevent - 调用 event.preventDefault()，阻止事件默认行为。

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

.left - (2.2.0) 只当点击鼠标左键时触发。

.right - (2.2.0) 只当点击鼠标右键时触发。

.middle - (2.2.0) 只当点击鼠标中键时触发。

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

v-bind 指令常用修饰符：

.prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)

.camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)

.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

v-model 指令常用修饰符：

.lazy - 取代 input 监听 change 事件

.number - 输入字符串转为数字

.trim - 输入首尾空格过滤

5、v-on可以监听多个方法吗？

答：v-on可以监听多个方法，但是同一种事件类型的方法，vue-cli工程会报错

6、vue-cli工程升级vue版本

答：升级插件：npm-check-updates

首先安装插件，建议用 npm 源安装，

测试时用 cnpm 安装未下载成功：npm install npm-check-updates -g；

然后在待升级工程的目录结构下，命令行输入：ncu；

然后升级所有版本，命令行输入：ncu -a；

再输入：npm install

7、vue事件中如何使用event对象？

答：注意在事件中要使用 $ 符号

    //html部分
     <a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a>
    //js部分
     showEvent(event){
        //获取自定义data-id
        console.log(event.target.dataset.id)
        //阻止事件冒泡
        event.stopPropagation();
        //阻止默认
        event.preventDefault()
    }

8、$nextTick的使用

答：因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的。

9、Vue 组件中 data 为什么必须是函数

答：Vue组件是通过new Vue实例化的，引用同一个地址，如果data是对象，一个组件中变化，其他组件定义相同名称的也会变化，为函数则不会变化，这就是深拷贝、浅拷贝问题。

10、深拷贝、浅拷贝

基本数据类型不影响：放在栈中，按值访问，复制时会提供新值，互补影响。

引用数据类型放在堆内存中，按引用访问，栈中保存地址，指向堆内存，复制时时复制了栈中的引用地址，地址一样，指向的值也一样。

所以引用数据类型复制时，需要使用深拷贝，一层一层重新赋值。

11、vue中 keep-alive 组件的作用

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

1、属性：include:字符串或正则表达式。只有匹配的组件会被缓存；exclude：字符串或正则表达式。任何匹配的组件都不会被缓存。

2、用法：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在<keep-alive> 内被切换，在 2.2.0 及其更高版本中，activated 和 deactivated生命周期 将会在 树内的所有嵌套组件中触发。

3、include 和 exclude 属性的使用：2.1.0 新增include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

12、vue中如何编写可复用的组件？

答：在编写组件的时候，时刻考虑组件是否可复用是有好处的。一次性组件跟其他组件紧密耦合没关系，但是可复用组件一定要定义一个清晰的公开接口。

Vue.js组件 API 来自 三部分：prop、事件、slot

Prop：允许外部环境传递数据给组件，在vue-cli工程中也可以使用vuex等传递数据。

事件：允许组件触发外部环境的 action

Slot：允许外部环境将内容插入到组件的视图结构内。

13、vue如何监听键盘事件中的按键？

答：按键修饰符，在监听键盘事件时，我们经常需要检查常见的键值。Vue允许为 v-on在监听键盘事件时添加按键修饰符：@keyup，v-on:keyup

全部的按键别名：.enter、.tab、.delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、.right