vue面试题总结

1、vue双向绑定的实现原理
2、js的继承和原型链
3、es6语法箭头函数和普通函数的区别

• 普通函数的this总是指向它的直接调用者。
• 在严格模式下，没找到直接调用者，则函数中的this是undefined。
• 在默认模式下（非严格模式），没找到直接调用者，则函数中的this指向window。

箭头函数中的this始终指向其父级作用域中的this。换句话说，箭头函数会捕获其所在的上下文的this值，作为自己的this值。任何方法都改变不了其指向，如call(), bind(), apply()。在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用，它与调用时的上下文无关。我们用代码来解释一下。

 

4、vue父子兄弟组件之间传递信息的方式，
5、promise的作用

6、不用es6如何实现promise
7、element-ui的slot插槽
8、如何封装vue的插件
9、常用的es6属性

10、ref属性的应用场景

答：应用场景一：获取当前元素；应用场景二：父组件（home.vue）中使用子组件（child.vue）中定义的 export default {.......}中的属性等。

this.$refs.name2是个对象

应用场景二：父路由调用嵌套子路由的方法，在父路由的<router-view ref="childRouter" />   this.$refs.childRouter.getData()

应用场景三：也可以通过此方法获取dom元素进行一些dom操作

11、【ES6】var、let、const三者的区别

块级作用域 {}
ES5 中作用域有：全局作用域、函数作用域。没有块作用域的概念。
ES6 中新增了块级作用域。块作用域由 { } 包括，if语句和 for语句里面的{ }也属于块作用域。

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问，可以变量提升。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

所谓变量提升,指的是变量声明总会被解释器"提升"到函数的顶部.

变量提升就是var在函数内部使用的时候，在var定义变量的语句之前是访问不到变量的！ 所以避免预防的方法就是尽量不使用同名的变量名命名并且在函数头部定义变量并赋值。

12、for循环中的作用域问题，写出以下代码输出值，尝试用es5和es6的方式进行改进输出循环中的i值。

for (var i=1; i<=5; i++) { 
    setTimeout(function timer() { 
       console.log(i); 
    }, i*1000); 

解答：

输出5个6，因为回调函数在for循环之后执行，所有函数共享一个i的引用。

es5:

for (var i=1; i<=5; i++) { 
    (function(j) { 
        setTimeout(function timer() { 
            console.log(j); 
        }, j*1000); 
    })(i); 
}

es6:

for (let i=1; i<=5; i++) { 
    setTimeout(function timer() { 
        console.log(i);
    }, i*1000); 
}

13、Promise中的执行顺序

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});
 
promise.then(function() {
  console.log('resolved.');
});
 
console.log('Hi!');
 
// Promise
// Hi!

上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。

14、JavaScript事件循环机制相关问题

关键字：单线程非阻塞、执行栈、事件队列、宏任务(setTimeout()、setInterval())、微任务(new Promise())

• 宏任务、微任务、同步任务的执行顺序

setTimeout(function () {
    console.log(1);
});
 
new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})
console.log(4);
// 2
// 4
// 3
// 1

先按顺序执行同步任务，Promise新建后立即执行输出2，接着输出4，异步任务等同步任务执行完后执行，且同一次事件循环中，微任务永远在宏任务之前执行。这时候执行栈空了，执行事件队列，先取出微任务，输出3，最后取出一个宏任务，输出1。

15、let跟var的区别

Var只有函数作用域跟全局作用域，let是ES6变量定义有块级作用域，var可以变量提升，let没有变量提升有暂时性死区，var，可以重复声明，let变量不可以重复声明。

16、什么是变量提升

在ES6之前，JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。

17、for跟map的优缺点

map的优点，可以遍历数组且可返回新组成的数组而不改变原数组，是高阶函数，使代码的可维护性更高，，更加精炼易读优雅，缺点就是比较耗性能，数据量非常大的时候，容易影响到性能，低版本浏览器不支持；for循环优点是没有兼容性问题，性能最高适合用于大数据量遍历，缺点就是代码不够优雅，没办法直接返回组成新数组。

18、http请求过程

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

19、Vue组件中的data为什么必须是一个函数

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。