1

什么是VUE？

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex)

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
库（插件）：提供某一个小功能，对项目入侵性比较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。

MVC和MVVM的区别和理解

MVC

是后端的分层开发概念
M层（Model.js——数据操作模块）：只负责操作数据
C层（router.js——路由模块，controller.js——业务逻辑模块）：
路由模块：为了保证职能单一，路由模块只负责分发路由，不负责处理，需要调用controller.js中的方法来处理具体业务。
业务逻辑模块：只负责处理业务逻辑，不负责数据的操作。
V层（View视图层）：前端的页面又被MVVM思想分成了三部分。

MVVM

是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model，View，ViewModel
M：页面中要渲染的数据。
VM：VM是调度者，它分割了M和V，当M中的数据变化，会被VM自动渲染到页面上，当页面上的数据被修改，也会自动同步到M上。
V：页面中用来展示的DOM元素。

MVVM相比MVC来说，提供了数据的双向绑定机制

2

VUE的响应式数据原理

1.核心点：object.defineProperty
2.默认 vue在初始化数据时，会给data中的属性使用object.defineProperty重新定义所有属性，当页面取到对应属性时，会进行依赖收集（收集当前组件的watcher）如果属性发生变化会通知相关依赖进行更新操作。

响应式数据原理.png

3

vue中是如何检测数组变化

使用函数劫持的方法，重写了数组的方法
vue将data的数组，进行了原型链方法的重写，指向了自己定义的数组原型方法，这样当调用数组api时，可以通知依赖更新。如果数组中包含引用类型，会对数组的引用类型再次进行监控。

检测数组变化.png

回顾数组：
数组
数组方法

4

Vue组件使用

props和$emit

props：父组件通过一个属性传递个子组件数据

props的俩种写法：
export default{
  props:['属性名'];   //方法1 直接获取值
  props:{
    //prop 类型和默认值
    属性名: {
        type:'类型',
        default(){
          return []   //默认值
        }
      }
  }
}

$emit：子组件向父组件通信使用$emit触发一个事件，把从子组件带来的数据进行操作
注意：子组件标签中的时间也不区分大小写要用“-”隔开
子组件

父组件

组件间的通信——自定义事件

不管俩个组件隔多远，是否为父子组件、兄弟组件等等都可以使用自定义事件去通信
在一个组件中使用event.$on绑定一个事件，在另外一个组件中使用event.$emit触发一个事件

子组件（发送方使用 $emit 自定义事件把数据带过去）

子组件（而接收方通过 $on监听自定义事件的callback接收数据）

父组件

组件生命周期(单个组件)

挂载阶段
更新阶段
销毁阶段

5

JavaScript中的this指向

this是在运行时期绑定的而不是在编译时期绑定的，只有js中的方法运行中才会绑定一个this，它的上下文取决与运行时的各种条件，this的绑定和函数声明的位置没有任何关系，之取决与函数的调用方式。
this的四种绑定方法：

默认绑定：函数被调用的时候默认绑定全局window对象。

默认绑定
隐式绑定：每当我们调用一个对象的方法时，就会出现隐式绑定。

隐式绑定
硬绑定：使用call、apply改变this的指向

硬绑定Call.png

硬绑定Apply.png
构造函数绑定：创造一个构造函数，然后使用变量给实例化

构造函数绑定.png

this绑定练习

this绑定练习.png

6

细谈 axios和ajax区别

区别

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
axios是ajax ajax不止axios。
列出代码对比：

axios
axios({
            url: '/getUsers',
            method: 'get',
            responseType: 'json', // 默认的
            data: {
                //'a': 1,
                //'b': 2,
            }
        }).then(function (response) {
            console.log(response);
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
            }）

$.ajax({
            url: '/getUsers',
            type: 'get',
            dataType: 'json',
            data: {
                //'a': 1,
                //'b': 2,
            },
            success: function (response) {
                console.log(response)；
            }
        })

优缺点

ajax：
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务
axios：
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）

前端面试必背（实习）

1