前端面试基础面试题——4

 1.谈谈你对 ES6 的理解

 2.说说你对 promise 的了解

3.解构赋值及其原理

4.Vue常用的修饰符及使用的场景

5.vue 中 key 值的作用 

6.什么是 vue 的计算属性？ 

7.watch的作用是什么 

8.计算属性的缓存和方法调用的区别

9.响应式系统的基本原理

10.vue-loader 是什么？使用它的用途有哪些？ 

---

1.谈谈你对 ES6 的理解 

es6 是一个新的标准，它包含了许多新的语言特性和库，是 JS 最实质性的一次升级。 比如'箭头函数'、'字符串模板'、'generators(生成器)'、'async/await'、'解构赋值'、'class'等等，还有就是引入 module 模块的概念。

箭头函数可以让 this 指向固定化，这种特性很有利于封装回调函数

• （1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

• （2）不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。

• （3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 Rest 参数代替。

• （4）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

• async/await 是写异步代码的新方式，以前的方法有回调函数和 Promise。

• async/await 是基于 Promise 实现的，它不能用于普通的回调函数。async/await 与 Promise 一样，是非阻塞的。

• async/await 使得异步代码看起来像同步代码，这正是它的魔力所在。

2.说说你对 promise 的了解

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件监听——更合理和更强大。

所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise 对象有以下两个特点:

1. 对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

 3.解构赋值及其原理

解构赋值：其实就是分解出一个对象的解构，分成两个步骤：

1. 变量的声明
2. 变量的赋值

原理：ES6 变量的解构赋值本质上是“模式匹配”, 只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，如果匹配不成功变量的值就等于 undefined

4.Vue常用的修饰符及使用的场景

vue中修饰符分为：表单修饰符、事件修饰符、鼠标按键修饰符、键值修饰符、v-bind修饰符

1. 表单修饰符包括：lazy trim number
2. 事件修饰符包括：stop prevent self once capture passive native
3. 鼠标按钮修饰符包括：left right middl

5.vue 中 key 值的作用 

需要使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点，找到正确的位置区插入新的节点 所以一句话，key 的作用主要是为了高效的更新虚拟 DOM

6.什么是 vue 的计算属性？ 

先来看一下计算属性的定义： 当其依赖的属性的值发生变化的时，计算属性会重新计算。反之则使用缓存中的属性值。 计算属性和vue中的其它数据一样，都是响应式的，只不过它必须依赖某一个数据实现，并且只有它依赖的数据的值改变了，它才会更新

7.watch的作用是什么 

watch 主要作用是监听某个数据值的变化。和计算属性相比除了没有缓存，作用是一样的。

借助 watch 还可以做一些特别的事情，例如监听页面路由，当页面跳转时，我们可以做相应的权限控制，拒绝没有权限的用户访问页面。

8.计算属性的缓存和方法调用的区别

计算属性是基于数据的依赖缓存，数据发生变化，缓存才会发生变化，如果数据没有发生变化，调用计算属性直接调用的是存储的缓存值；

而方法每次调用都会重新计算；所以可以根据实际需要选择使用，如果需要计算大量数据，性能开销比较大，可以选用计算属性，如果不能使用缓存可以使用方法；

其实这两个区别还应加一个watch，watch是用来监测数据的变化，和计算属性相比，是watch没有缓存，但是一般想要在数据变化时响应时，或者执行异步操作时，可以选择watch

9.响应式系统的基本原理

vue响应式的原理，首先对象传入vue实例作为data对象时，首先被vue遍历所有属性，调用Object.defineProperty设置为getter和setter，每个组件都有一个watcher对象，在组件渲染的过程中，把相关的数据都注册成依赖，当数据发生setter变化时，会通知watcehr，从而更新相关联的组件

10.vue-loader 是什么？使用它的用途有哪些？ 

vue-loader 是解析 .vue 文件的一个加载器，将 template/js/style 转换成 js 模块。

用途：js 可以写 es6、style 样式可以 scss 或 less；template 可以加 jade 等。