一、简答题

1.Vue全家桶有哪些？

Vue-CLI(脚手架)

Vue-Router

Vuex

axios

搭配UI框架，如elementUI等

2.描述下你对Vue生命周期的理解。

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。

3.Vue组件之间的通信方式有哪些？

父组件→子组件：利用props属性
子组件→父组件：利用自定义事件，使用$emit()发送事件和要传递的数据
父组件访问子组件：利用 $children或者$refs属性进行访问，注意$refs默认是一个空对象，需要在子组件上绑定res属性，来告诉父组件要访问的是哪个子组件
子组件访问父组件：利用$parent，也可以使用$root直接访问根组件

4.描述下你对SPA和MPA的理解。他们的优缺点是什么？

SPA（SinglePage Application）单页面应用，顾名思义，就是只有一个主页面，一开始只需要加载一次js，css等资源，对各个功能模块进行组件化，所以单页面应用的跳转，就是切换组件，只局部刷新，适合移动应用开发；仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载
MPA（MutiPage Application）多页面应用，是有多个独立页面的应用。每个页面必须重复加载相关资源，跳转页面会整体刷新。
SPA优点：页面切换快
缺点：首屏时间稍慢，SEO差
MPA优点：首屏时间快，SEO效果好
缺点：页面切换慢

5.描述下你对webpack的理解？解决了什么问题？

webpack是一种模块化打包工具，可以使用WebPack管理模块，并分析模块间的依赖关系，最终编绎输出模块为HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效
主要解决的问题就是：
模块成员之间命名冲突，污染全局作用域，无私有空间，维护困难，没有依赖关系

6.描述下Vue的响应式原理。

当把一个普通的JavaScript对象传入Vue实例作为data选项，Vue会遍历此对象所有的property，并使用Object.defineProperty把这些property转为setter/getter，这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。

其次，每个Vue实例都对应着一个watcher实例，他会在组件渲染的时候把接触过的数据property记录为依赖。之后如果依赖项的setter触发，会通知watcher重新渲染响应的组件：

在这里插入图片描述

7.简述下深拷贝和浅拷贝的区别。如何实现深拷贝？

假如B复制了A，如何区分深拷贝和浅拷贝，最简单的方法就是，当修改B的时候，A是否跟着变化，如果A也发生了变化，那就是浅拷贝，如果A没有发生变化，那就属于深拷贝了。

具体的分析一下：
首先JS中，分为基本数据类型和引用数据类型:

a.基本数据类型：变量名，和值都保存在栈中
首先我们 let a= 1;
当b复制a的时候，栈会新开辟一个内存空间

此时，修改b的值并不会引起a的变化，因为两者使用的各自的内存空间

b.引用数据类型：变量的值保存在堆中，变量名和指向堆内存中存值的地址保存在栈中

所以当，b复制a的时候，复制的是a的引用地址，这时两者就指向堆内存中同一块内存空间

此时修改b的值也会影响a的值，因为两者实际上指向同一块内存空间

实现深拷贝的三种方式：

递归：（效率很低）

    function deepClone(obj){
    
    
//      定义一个变量 并判断是数组还是对象
        var objClone = Array.isArray(obj) ? [] : {
    
    };
        if(obj && typeof obj === "object" && obj != null){
    
     
 // 判断obj存在并且是对象类型的时候 因为null也是object类型，所以要单独做判断
            for(var key in obj){
    
      // 循环对象类型的obj
                if(obj.hasOwnProperty(key)){
    
      // 判断obj中是否存在key属性
                    if(obj[key] && typeof obj[key] === "object"){
    
      //  判断如果obj[key]存在并且obj[key]是对象类型的时候应该深拷贝，即在堆内存中开辟新的内存
                        objClone[key] = deepClone(obj[key]);
                    }else{
    
      //  否则就是浅复制
                        objClone[key] = obj[key];
                    }
                }
            }
        }
        return objClone;
    }
    var a = {
    
    
        name:"key1",
        eat:["苹果","香蕉"]
    }
    b = deepClone(a);
//    console.log(b);
    a.eat = ["苹果","香蕉","橙子"];
    console.log(a);  //  {name:"key1",eat:["苹果","香蕉","橙子"]}
    console.log(b)   //  {name:"key1",eat:["苹果","香蕉"]}

2.JSON的parse和stringify方法：

function deepClone(obj){
    
    
//        console.log(obj);
//        console.log(typeof obj);
        var _obj = JSON.stringify(obj);  //  对象转成字符串
//        console.log(_obj);
//        console.log(typeof _obj);
        var objClone = JSON.parse(_obj); //  字符串转成对象
//        console.log(objClone);
//        console.log(typeof objClone);
        return objClone;
    }
    var a = [0,1,[2,3],4];
    b = deepClone(a)
    a[0] = 6;
    a[2][0] = 7;
    console.log(a);   //  [6,1,[7,3],4]
    console.log(b);   //  [0,1,[2,3],4]

Jquery的$.extend：

var a = [0,1,[2,3],4];
    b = $.extend(true,[],a);
    a[0] = 1;
    a[2][0] = 7;
    console.log(a);   //  [1,1,[7,3],4];
    console.log(b);   //  [0,1,[2,3],4];

//$.extend参数：
//第一个参数是布尔值，是否深复制
//第二个参数是目标对象，其他对象的成员属性将被附加到该对象上
//第三个及以后的参数是被合并的对象

8.请写出你了解的Array方法（至少六个）。

push(),pop(),shift(),unshift(),concat(),splice(),toString()…

9.Vue组件内的data是什么类型？为什么会是这种类型？

函数类型
因为Vue组件要实现重复利用，需要保证数据相互独立，函数类型每次都返回一个新的对象，可以防止各个组件之间的数据污染

10.请列出Vue组件中常用的三个生命周期钩子函数并简述。

详情见生命周期一章

11.Vue-loader是什么？使用他的用途有哪些？

详情见Vue-loader一章

二、代码题

12.用css写一个三角形。

.box{
    
    
	width:0;
	hieght:0;
	border:100px solid transparent;
	border-top:100px solid skyblue;
}

13.用js写下列算法：给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次，找出那个只出现一次元素。

利用异或运算，循环，或者set类，详情见算法.

总结：感觉这次考试考得很不好，自身在学习过程中还有很多不足，希望自己戒骄戒躁，也不要气馁，解决问题的同时也要明白今后学习的重点。ヾ(◍°∇°◍)ﾉﾞ

2021-09-03 前端小组考核试题