【腾讯】面经整理

本篇博客是根据别人的面经整理的答案，差不多都是百度的，自己用来复习。

1. vue的生命周期
2. VueCli代理跨域的本质是什么
3. 项目中遇到跨域问题怎么解决的
4. es6的const和let,const声明引用属性能改吗，为什么
5. Promise是什么？如果我有五个请求，想等他们都请求完毕怎么办
6. loader和plugin的区别，treeshaking是什么
7. vue的数据双向绑定是怎么实现的

★vue的生命周期

vue实例有完整的生命周期，vue实例从创建到销毁的过程就是vue的生命周期。每一个组件或者实例都会经历一个完整的生命周期。总共分为三个阶段：初始化、运行中、销毁

1. 组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作。
2. 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
3. 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
4. 接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情
5. 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
6. 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的dom
7. 当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
8. 组件的数据绑定、监听…去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

★VueCli代理跨域的本质是什么

changeOrigin:true会在本地建立一个虚拟服务器，然后发送请求的数据，并同时接收请求的数据，这样服务器和服务器之间进行数据的交互就不存在跨域问题。
pathWrite:替换target中的请求地址。

注意：这只是开发环境（dev）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题

★项目中遇到跨域问题怎么解决的

在使用vue开发的时候，开始为了解决跨域问题。采用的是CORS（Cross-origin resource sharing）。后台在响应头中添加Access-Control-Allow-Origin。这样就可以跨域调后台接口了。 无意中在网上看到在config的index.js文件中有一个proxyTable属性，通过配置可以解决开发环境的跨域。就试了一下：

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        pathRewrite: {  //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段
          '^/api': ''
        }
      }
    }
  }
}

★es6的const和let,const声明引用属性能改吗，为什么
先总结var和let的区别：

1. es6新增里let命令，可以用来声明变量，它的用法类似于var,但let命令声明的变量只在let命令所在的代码块内有效。

2. var声明的变量有变量提升现象，即变量可以在声明之前使用，值为undefined。let声明的变量无变量提升现象，即变量必须先声明再使用，否则会报错。

3. 只要在块级作用域内存在let声明的变量，这个变量会被绑定在这个作用域，不会受外部影响。
   var tmp=123; if(true){ tmp=456; let tmp; }
   这样写会报错。因为：let声明的tmp变量绑定在了if的代码块内，但是let命令声明的变量只能在变量声明后面使用，所以会报错。
   总之，在代码块内，使用let声明的变量之前，该变量都是不可用的，这在语法上称为“暂时性死区”

4. let不允许在同一代码块内重复声明，会报错。var这样声明则不会报错。

const声明引用属性能改吗，为什么：
const是用来定义常量的，而且定义的时候必须初始化，否则会报错。const定义的基本数据类型的变量值不能修改，但用const定义的引用数据类型的变量是可以修改的。

P对象的name属性确实被修改了，这个现象怎么解释呢？
因为P对象是引用数据类型的，P中保存的仅仅是对象的指针，这就意味着const只保证指针不发生变化就行了，修改对象的属性不会修改指向对象的指针，所以是被允许的。也就是说const定义的引用类型的变量，只要指针不发生变化，其他不论如何改变都是允许的。
如果将上面写成

const P={name:'wws',age:25};
P={name:'jfjc',age:25};

这样就会报错，因为这样修改的是指向对象的指针，会报错。

★Promise是什么？如果我有五个请求，想等他们都请求完毕怎么办
promise是什么：
Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行

    function loadImg(src){
        var promise=new Promise(function(resolve,reject){
            var img=document.createElement("img");
            img.onload=function(){
                resolve();
            };
            img.onerr=function(){
                reject();
            }
            img.src=src;
        });
        return promise
    };
    var src1 = "https://i04picsos.sogoucdn.com/a64beecbeacd7e58";
    result1 = loadImg(src1);
    var src2 = "https://i04picsos.sogoucdn.com/08bace7dedbf47e0";
    result2 = loadImg(src2);
    Promise.all([result1,result2]).then(function(datas){
        //datas是一个数组，依次包含多个promise返回的内容
        console.log(datas[0]);
        console.log(datas[1]);
    });

★loader和plugin的区别，treeshaking是什么

★vue的数据双向绑定是怎么实现的
vue的数据双向绑定是通过数据劫持结合发布者-订阅者模式来实现的。
首先看vue是如何进行数据劫持的：

var vm = new Vue({
    data: {
        obj: {
            a: 1
        }
    },
    created: function () {
        console.log(this.obj);
    }
});

从输出的信息中可以看出：属性a有两个相对应的get方法和set方法，因为vue是通过Obj.defineProperty()方法来实现数据劫持的。
Obj.defineProperty()方法可以控制对象属性的读写权，数据双向绑定就是通过它的属性值get和set实现的。

平时我们也可以使用这个属性来做一些好玩的事。

var Book = {
  name: 'vue权威指南'
};
console.log(Book.name);  // vue权威指南

如果想要在执行console.log(book.name)的同时，直接给书名加个书名号，那要怎么处理呢？或者说要通过什么监听对象 Book 的属性值。这时候Object.defineProperty( )就派上用场了，代码如下：

var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
    set: function (value) {
        name = value;
        console.log('你取了一个书名叫做' + value);
    },
    get: function () {
        return '《' + name + '》'
    }
})
Book.name = 'vue权威指南';  // 你取了一个书名叫做vue权威指南
console.log(Book.name);  // 《vue权威指南》

我们通过Object.defineProperty( )设置了对象Book的name属性，对其get和set进行重写操作，顾名思义，get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数，所以当执行 Book.name = ‘vue权威指南’ 这个语句时，控制台会打印出 “你取了一个书名叫做vue权威指南”，紧接着，当读取这个属性时，就会输出 “《vue权威指南》”，因为我们在get函数里面对该值做了加工了。set同理。
实现MVVM主要实现：数据变化更新视图，视图变化更新数据。