用vue框架的基本原理，简单实现一个todo-list

前言

最近在学习vue框架的基本原理，看了一些技术博客以及一些对vue源码的简单实现，对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。因而乎，尝试着去实践本身学到的知识，用vue的一些基本原理实现一个简单的todo-list，完成对深度复杂对象的双向绑定以及对数组的监听，加深了对vue基本原理的印象。

• github地址：todo-list

• 在线预览： https://fatdong1.github.io/to...

学习连接

前排感谢如下文章，对我理解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不熟悉的小伙伴能够在MDN的文档(连接)学习一下

双向绑定

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

• 视图更新(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，以便添加其余订阅者。实例代码以下：

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

3. 模板解析

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

假如说有下面这一段代码，咱们怎么把它解析成对应的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，从而通知全部的订阅者。

监听数组变化

没法监控每一个数组元素

若是让咱们本身实现监听数组的变化，咱们可能会想到用object.defineProperty去遍历数组每一个元素并设置setter，可是vue源码里面却不是这样写的，由于对每个数组元素defineProperty带来代码自己的复杂度增长和代码执行效率的下降。

感谢Ma63d这篇文章下面的的评论，对此解释得很详细，这里也就再也不赘述。

变异数组方法

既然没法经过defineProperty监控数组的每一个元素，咱们能够重写数组的方法(push, pop, shift, unshift, splice, sort, reverse)来改变数组。

vue文档中是这样写的：

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

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

下面是 vue早期源码学习系列之二：如何监听一个数组的变化 中的实例代码

const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
const arrayAugmentations = [];

aryMethods.forEach((method)=> {

    // 这里是原生Array的原型方法
    let original = Array.prototype[method];

   // 将push, pop等封装好的方法定义在对象arrayAugmentations的属性上
   // 注意：是属性而非原型属性
    arrayAugmentations[method] = function () {
        console.log('我被改变啦!');

        // 调用对应的原生方法并返回结果
        return original.apply(this, arguments);
    };

});

let list = ['a', 'b', 'c'];
// 将咱们要监听的数组的原型指针指向上面定义的空数组对象
// 别忘了这个空数组的属性上定义了咱们封装好的push等方法
list.__proto__ = arrayAugmentations;
list.push('d');  // 我被改变啦！ 4

// 这里的list2没有被从新定义原型指针，因此就正常输出
let list2 = ['a', 'b', 'c'];
list2.push('d');  // 4

对__proto__不熟悉的小伙伴能够去看一下王福明的博客，写的很好。

变异数组方法的缺陷

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

因为 JavaScript 的限制， Vue 不能检测如下变更的数组：

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

2. 当你修改数组的长度时，例如： vm.items.length = newLength

同时文档中也介绍了如何解决上面这两个问题。

最后

以上是本身对vue一些基本原理的理解，固然还有不少不足的地方，欢迎指正。原本本身也是为了应付面试才去学习vue框架的基本原理，可是简单学习了这些vue基本的原理后，让我明白经过深刻学习框架原理，能够有效避开一些本身之后会遇到的坑，因此，有时间的话本身之后仍是会去看看框架的基本原理。