最近在学习vue框架的基本原理，看了一些技术博客以及一些对vue源码的简单实现，对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎，尝试着去实践自己学到的知识，用vue的一些基本原理实现一个简单的todo-list，完成对深度复杂对象的双向绑定以及对数组的监听，加深了对vue基本原理的印象。
github地址：todo-list
学习链接
前排感谢以下文章，对我理解vue的基本原理有很大的帮助！
剖析vue实现原理，自己动手实现mvvm by DMQ
对vue早期源码的理解 by 梁少峰
实现效果
数据代理
1.简单介绍数据代理
正常情况下，我们都会把数据写在data里面，如下面所示
var vm = new Vue({ el: '#app', data: { title: 'hello world' } methods: { changeTitle: function () { this.title = 'hello vue' } } }) console.log(vm.title) // 'hello world' or 'hello vue'
如果没有数据代理，而我们又要修改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 } }); }
对object.defineProperty不熟悉的小伙伴可以在学习一下
双向绑定
数据变动 ---> 视图更新
视图更新(input、textarea) --> 数据变动
视图更新 --> 数据变动这个方向的绑定比较简单，主要通过事件监听来改变数据，比如input可以监听input事件，一旦触发input事件就改变data。下面主要来理解一下数据变动--->视图更新这个方向的绑定。
1. 数据劫持
不妨让我们自己思考一下，如何实现数据变动，对应绑定数据的视图就更新呢？
答案还是object.defineProperty，通过object.defineProperty遍历设置this.data里面所有属性，在每个属性的setter里面去通知对应的回调函数，这里的回调函数包括dom视图重新渲染的函数、使用$watch添加的回调函数等，这样我们就通过object.defineProperty劫持了数据，当我们对数据重新赋值时，如this.title = 'hello vue',就会触发setter函数，从而触发dom视图重新渲染的函数，实现数据变动，对应视图更新。
2. 发布-订阅模式
那么问题来了，我们如何在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，以便添加其他订阅者。实例代码如下：