不知不觉接触前端的时间已经过去半年了，越来越发觉对知识的学习不应该只停留在会用的层面，这在我学jQuery的一段时间后便有这样的体会。
虽然jQuery只是一个JS的代码库，只要会一些JS的基本操作学习一两天就能很快掌握jQuery的基本语法并熟练使用，但是如果不了解jQUery库背后的实现原理，相信只要你一段时间不再使用jQuery的话就会把jQuery忘得一干二净，这也许就是知其然不知其所以然的后果。
最近在学vue的时候又再一次经历了这样的困惑，虽然能够比较熟练的掌握vue的基本使用，也能够对MV*模式、数据劫持、双向数据绑定、数据代理侃上两句。但是要是稍微深入一点就有点吃力了。所以这几天痛下决心研究大量技术文章（起初尝试看早期源码，无奈vue与jQuery不是一个层级的，相比于jQuery，vue是真正意义上的前端框架。只能无奈弃坑转而看技术博客），对vue也算有了一个管中窥豹的认识。最后尝试实践一下自己学到的知识，基于数据代理、数据劫持、模板解析、双向绑定实现了一个小型的vue框架。
温馨提示：文章是按照每个模块的实现依赖关系来进行分析的，但是在阅读的时候可以按照vue的执行顺序来分析，这样对初学者更加的友好。推荐的阅读顺序为：实现VMVM、数据代理、实现Observe、实现Complie、实现Watcher。
源码：https://github.com/yuliangbin/MVVM
功能演示如下所示：
数据代理
以下面这个模板为例，要替换的根元素“#mvvm-app”内只有一个文本节点#text，#text的内容为{{name}}。我们就以下面这个模板详细了解一下VUE框架的大体实现流程。
<body>
<div id="mvvm-app">
{{name}}
</div>
<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
let vm = new MVVM({
el: "#mvvm-app",
data: {
name: "hello world"
},
})
</script>
</body>
数据代理
1、什么是数据代理
在vue里面，我们将数据写在data对象中。但是我们在访问data里的数据时，既可以通过vm.data.name访问，也可以通过vm.name访问。这就是数据代理：在一个对象中，可以动态的访问和设置另一个对象的属性。
2、实现原理
我们知道静态绑定（如vm.name = vm.data.name）可以一次性的将结果赋给变量，而使用Object.defineProperty()方法来绑定则可以通过set和get函数实现赋值的中间过程，从而实现数据的动态绑定。具体实现如下：