Vue框架简单的实现原理以及简介

1. 前端框架发展历史

静态页面 （写好后固定，不能进行其他改变或渲染）==> ajax（异步请求） ==> mvc(model负责获取数据，controller处理成view层需要的数据，view显示数据) ==> mvvm(model与view双向绑定，不需要手动处理) ==> single page application 【spa】阶段（Vue、Angular、React等等，都属于Spa开发框架，不再通过页面之间相互跳转，以组件形式进行跳转功能的实现）

2. MV*模式（MVC/MVP/MVVM）

MVC的全称为Model-View-Controller,即模型-视图-控制器。

• Model：处理数据和业务逻辑等
• View：显示界面，展示结果等
• Controller：控制流程，处理交互等
  MVC各个模块通信方式如下：

可以看到是一个循环的流程，但是方向不可以改变。

MVP的全称为Model-View-Presenter，即模型-视图-协调器（主持者）

• Model：处理数据和业务逻辑等
• View：显示界面，展示结果等
• Presenter：协调Model和View模块工作，处理交互
  
  协调器（Presenter）起到了协调作用，mv的任何操作都要经过协调器统一调配。

MVVM:双向数据绑定、View的变动、映射在ViewModel、反之一样
- Model：处理数据和业务逻辑等
- View：显示界面，展示结果等
- ViewModel：数据一旦变化，对应的视图自动更新
显然实现了mv直接的联系，没有第三方制约，但是并不是简单的直接去掉第三方，该理念的实现，后面开始讲解。

Vue实现数据绑定的原理

1）数据通过Object.defineProperty进行get、set拦截
2）通过watcher(观察者模式、订阅发布模式)触发组件重新渲染，创建新的虚拟dom（js对象模拟dom)对比旧的虚拟dom,通过diff算法，找到不同的地方，以最小的代价更新节点

用到的ES5语法（ECMAScript5，通俗来讲就是javascript）
1）Object.defineProperty定义对象属性的方法
2）对象函数简写

Object.defineProperty(obj, "name", {
            //正常函数属性书写
            // get:function(){

            // },
            //对象函数简写
            get() {

            },
            // set:function(){

            // },
            set() {

            }
        })

在设置和获取属性值是会触发set/get方法，在方法里绑定元素即可实现对元素的重新渲染。