一.什么是vue框架

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（vue官方描述）
(1)下面来解释下，何为渐进式框架，
　　如果只使用Vue最基础的声明式渲染的功能，则完全可以把Vue当做一个模板引擎来使用
　　如果想以组件化开发方式进行开发，则可以进一步使用Vue里面的组件系统
　　如果要制作SPA(单页应用)，则使用Vue里面的客户端路由功能
　　如果组件越来越多，需要共享一些数据，则可以使用Vue里的状态管理
　　如果想在团队里执行统一的开发流程或规范，则使用构建工具
　　所以，可以根据项目的复杂度来自主选择使用Vue里面的功能

(2)Vue是一个基于MVVM模式数据驱动页面的框架，它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点：
1） 简洁 2） 轻量 3）快速 4） 数据驱动 5） 模块友好 6） 组件化

vue靠数据驱动双向绑定使我们开发页面更简单，开发者不需要手动的去修改dom。Vue通过数据双向绑定是一切变得更简单。它的数据驱动双向绑定，底层是通过Object.defineProperty() 定义的数据 set、get 函数原理实现。

(3)、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高。

(4)、单页应用的体验，局部组件更新界面，让用户体验更快速省时。

单页应用也称为SPA是将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。加载完成，页面不在重新加载或跳转，仅仅是里面的组件或模块通过hash,或者history api来进行交互和跳转，并通过ajax拉取数据来实现响应功能，整个应用就一个html，所以叫单页面！

(5)、js的代码无形的规范，团队合作开发代码可阅读性更高

二.vue框架实现原理

对数据代理、数据劫持、模板解析、变异数组方法、双向绑定

1).数据代理

简单介绍数据代理
正常情况下，我们都会把数据写在data里面

var vm = new Vue({
 el:'#app',
 data:{
    title: 'hello world'    
  }
methods:{
 changeTitle:function(){          
    this.title ='hello vue'        
  }  
}
})
console.log(vm.title)

如果没有 数据代理，而我们又要修改data里面的title的话，methods里面的changeTitle只能这样修改成 this.data.title='hello vue', 下面的console也只能改成 console.log(vm.data.title)，数据代理就是这样的功能。

2). 实现原理

通过遍历data里面的属性，将每个属性通过object.defineProperty()设置getter和setter，将data里面的每个属性都复制到与data同级的对象里。
触发的getter将会触发data里面对应属性的getter，触发这里的setter将会触发data里面对应属性的setter，从而实现代理。实现代码如下：

var self = this;
 // this为vue实例， 即vm

Object.keys(this.data).forEach(function(key){ 
Object.defineProperty(this,key,{
    // this.title, 即vm.title
  enumerable:false,
  configurable:true,        
  get: function getter (){            
    return self.data[key];
  //触发对应data[key]的getter
  },      
  set:function setter (newVal){
     self.data[key]=newVal;
  //触发对应data[key]的setter     
  } 
});
}

3).双向绑定

数据变动 ---> 视图更新

视图更新(input、textarea) --> 数据变动

视图更新-->数据变动这个方向的绑定比较简单，主要通过事件监听来改变数据，比如input可以监听input事件，一旦触发input事件就改变data。下面主要来理解一下 数据变动--->视图更新这个方向的绑定。

4). 数据劫持

不妨让我们自己思考一下，如何实现数据变动，对应绑定数据的视图就更新呢？

答案还是object.defineProperty，通过object.defineProperty遍历设置this.data里面所有属性，在每个属性的setter里面去通知对应的回调函数，这里的回调函数包括dom视图重新渲染的函数、使用$watch添加的回调函数等，这样我们就通过object.defineProperty劫持了数据，当我们对数据重新赋值时，如 this.title='hello vue',就会触发setter函数，从而触发dom视图重新渲染的函数，实现数据变动，对应视图更新。

5). 发布-订阅模式

那么问题来了，我们如何在setter里面触发所有绑定该数据的回调函数呢？

既然绑定该数据的回调函数不止一个，我们就把所有的回调函数放在一个数组里面，一旦触发该数据的setter，就遍历数组触发里面所有的回调函数，我们把这些回调函数称为 订阅者。数组最好就定义在setter函数的最近的上级作用域中，如下面实例代码所示。

Object.keys(this.data).forEach(function(key){
  var subs = []; // 在这里放置添加所有订阅者的数组 
  Object.defineProperty(this.data, key,{ // this.data.title
     enumerable:false,
     configurable:true,
     get:function getter (){
         console.log('访问数据啦啦啦')          
        return this.data[key]; //返回对应数据的值        
      },
    set:function setter (newVal){
      if(newVal === this.data[key]){
            return;  // 如果数据没有变动，函数结束，不执行下面的代码
      }
      this.data[key]=newVal; //数据重新赋值
      subs.forEach(function(){
       // 通知subs里面的所有的订阅者       
      })       
    }   
 });
}

那么问题又来了，怎么把绑定数据的所有回调函数放到一个数组里面呢？

我们可以在getter里面做做手脚，我们知道只要访问数据就会触发对应数据的getter，那我们可以先设置一个全局变量target，如果我们要在data里面title属性添加一个订阅者(changeTitle函数)，我们可以先设置target = changeTitle，把changeTitle函数缓存在target中，然后访问this.title去触发title的getter，在getter里面把target这个全局变量的值添加到subs数组里面，添加完成后再把全局变量target设置为null，以便添加其他订阅者。实例代码如下：

Object.keys(this.data).forEach(function(key){
  var subs = []; // 在这里放置添加所有订阅者的数组 
  Object.defineProperty(this.data, key,{ // this.data.title
     enumerable:false,
     configurable:true,
     get:function getter (){
         console.log('访问数据啦啦啦') 
         if (target) {
           subs.push(target);            
         }         
        return this.data[key]; //返回对应数据的值        
      },
    set:function setter (newVal){
      if(newVal === this.data[key]){
            return;  // 如果数据没有变动，函数结束，不执行下面的代码
      }
      this.data[key]=newVal; //数据重新赋值
      subs.forEach(function(){
       // 通知subs里面的所有的订阅者       
      })       
    }   
 });
}

上面的代码为了方便理解都是通过简化的，实际上我们把订阅者写成一个构造函数watcher，在实例化订阅者的时候去访问对应的数据，触发相应的getter，详细的代码可以阅读DMQ的自己动手实现MVVM

6). 模板解析

通过上面的两个步骤我们已经实现一旦数据变动，就会通知对应绑定数据的订阅者，接下来我们来简单介绍一个特殊的订阅者，也就是视图更新函数，几乎每个数据都会添加对应的视图更新函数，所以我们就来简单了解一下视图更新函数。

假如说有下面这一段代码，我们怎么把它解析成对应的html呢？

<input v-model="title">
<h1>{{title}}</h1>
<button v-on:click="changeTitle">change title<button>

先简单介绍视图更新函数的用途，
比如解析指令 v-model="title", v-on:click="changeTitle",还有把{{title}}替换为对应的数据等。

回到上面那个问题，如何解析模板？我们只要去遍历所有dom节点包括其子节点，

如果节点属性含有 v-model，视图更新函数就为把input的value设置为title的值

如果节点为文本节点，视图更新函数就为先用正则表达式取出大括号里面的值'title'，再设置文本节点的值为data['title']

如果节点属性含有 v-on:xxxx，视图更新函数就为先用正则获取事件类型为click，然后获取该属性的值为changeTitle，则事件的回调函数为this.methods['changeTitle']，接着用addEventListener监听节点click事件。

我们要知道视图更新函数也是data对应属性的订阅者，如果不知道如何触发视图更新函数，可以把上面的发布-订阅模式再看一遍。

可能有的小伙伴可能还有个疑问，如何实现input节点的值变化后，下面的h1节点的title值也发生变化？在遍历所有节点后，如果节点含有属性 v-model，就用addEventListener监听input事件，一旦触发input事件，改变data['title']的值，就会触发title的setter，从而通知所有的订阅者。

7). 监听数组变化

无法监控每个数组元素
如果让我们自己实现监听数组的变化，我们可能会想到用object.defineProperty去遍历数组每个元素并设置setter，但是vue源码里面却不是这样写的，因为对每一个数组元素defineProperty带来代码本身的复杂度增加和代码执行效率的降低。

8). 变异数组方法

既然无法通过defineProperty监控数组的每个元素，我们可以重写数组的方法(push, pop, shift, unshift, splice, sort, reverse)来改变数组。

vue文档中是这样写的：

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

变异数组方法的缺陷

vue文档中变异数组方法的缺陷

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如： vm.items.length = newLength 同时文档中也介绍了如何解决上面这两个问题。

最后

以上是自己对vue一些基本原理的理解。
你无法猜测将要面临什么样的问题，那只好记录更多的答案