用vue的双向绑定简单实现一个todo-list的示例代码
前言最近在学习vue框架的基本原理,看了一些技术博客以及一些对vue源码的简单实现,对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎,尝试着去实践自己学到的知识,用vue的一些基本原理实现一个简单的todo-list,完成对深度复杂对象的双向绑定以及对数组的监听,加深了对vue基本原理的印象。 github地址:todo-list 学习链接前排感谢以下文章,对我理解vue的基本原理有很大的帮助! 剖析vue实现原理,自己动手实现mvvm by DMQ 对vue早期源码的理解 by 梁少峰 实现效果数据代理1.简单介绍数据代理 正常情况下,我们都会把数据写在data里面,如下面所示 如果没有数据代理,而我们又要修改data里面的title的话,methods里面的changeTitle只能这样修改成 2. 实现原理通过遍历data里面的属性,将每个属性通过object.defineProperty()设置getter和setter,将data里面的每个属性都复制到与data同级的对象里。 (对应上面的示例代码) 触发这里的getter将会触发data里面对应属性的getter,触发这里的setter将会触发data里面对应属性的setter,从而实现代理。实现代码如下: 对object.defineProperty不熟悉的小伙伴可以在MDN的文档(链接)学习一下 双向绑定
1. 数据劫持不妨让我们自己思考一下,如何实现数据变动,对应绑定数据的视图就更新呢? 答案还是object.defineProperty,通过object.defineProperty遍历设置this.data里面所有属性,在每个属性的setter里面去通知对应的回调函数,这里的回调函数包括dom视图重新渲染的函数、使用$watch添加的回调函数等,这样我们就通过object.defineProperty劫持了数据,当我们对数据重新赋值时,如 2. 发布-订阅模式那么问题来了,我们如何在setter里面触发所有绑定该数据的回调函数呢? 既然绑定该数据的回调函数不止一个,我们就把所有的回调函数放在一个数组里面,一旦触发该数据的setter,就遍历数组触发里面所有的回调函数,我们把这些回调函数称为订阅者。数组最好就定义在setter函数的最近的上级作用域中,如下面实例代码所示。 subs.forEach(function () {
// 通知subs里面的所有的订阅者
})
}
}); 那么问题又来了,怎么把绑定数据的所有回调函数放到一个数组里面呢? 我们可以在getter里面做做手脚,我们知道只要访问数据就会触发对应数据的getter,那我们可以先设置一个全局变量target,如果我们要在data里面title属性添加一个订阅者(changeTitle函数),我们可以先设置target = changeTitle,把changeTitle函数缓存在target中,然后访问this.title去触发title的getter,在getter里面把target这个全局变量的值添加到subs数组里面,添加完成后再把全局变量target设置为null,以便添加其他订阅者。实例代码如下: subs.forEach(function () {
// 通知subs里面的所有的订阅者
})
}
}); 上面的代码为了方便理解都是通过简化的,实际上我们把订阅者写成一个构造函数watcher,在实例化订阅者的时候去访问对应的数据,触发相应的getter,详细的代码可以阅读DMQ的自己动手实现MVVM 3. 模板解析通过上面的两个步骤我们已经实现一旦数据变动,就会通知对应绑定数据的订阅者,接下来我们来简单介绍一个特殊的订阅者,也就是视图更新函数,几乎每个数据都会添加对应的视图更新函数,所以我们就来简单了解一下视图更新函数。 假如说有下面这一段代码,我们怎么把它解析成对应的html呢? {{title}}
先简单介绍视图更新函数的用途, 比如解析指令 回到上面那个问题,如何解析模板?我们只要去遍历所有dom节点包括其子节点,
我们要知道视图更新函数也是data对应属性的订阅者,如果不知道如何触发视图更新函数,可以把上面的发布-订阅模式再看一遍。 可能有的小伙伴可能还有个疑问,如何实现input节点的值变化后,下面的h1节点的title值也发生变化?在遍历所有节点后,如果节点含有属性v-model,就用addEventListener监听input事件,一旦触发input事件,改变data['title']的值,就会触发title的setter,从而通知所有的订阅者。 监听数组变化无法监控每个数组元素 如果让我们自己实现监听数组的变化,我们可能会想到用object.defineProperty去遍历数组每个元素并设置setter,但是vue源码里面却不是这样写的,因为对每一个数组元素defineProperty带来代码本身的复杂度增加和代码执行效率的降低。 变异数组方法既然无法通过defineProperty监控数组的每个元素,我们可以重写数组的方法(push,pop,shift,unshift,splice,sort,reverse)来改变数组。 vue文档中是这样写的: Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
下面是vue早期源码学习系列之二:如何监听一个数组的变化 中的实例代码 aryMethods.forEach((method)=> {
// 这里是原生Array的原型方法 // 将push,pop等封装好的方法定义在对象arrayAugmentations的属性上
}; }); let list = ['a','b','c']; // 这里的list2没有被重新定义原型指针,所以就正常输出 变异数组方法的缺陷vue文档中变异数组方法的缺陷 由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
同时文档中也介绍了如何解决上面这两个问题。 最后以上是自己对vue一些基本原理的理解,当然还有很多不足的地方,欢迎指正。本来自己也是为了应付面试才去学习vue框架的基本原理,但是简单学习了这些vue基本的原理后,让我明白通过深入学习框架原理,可以有效避开一些自己以后会遇到的坑,所以,有时间的话自己以后还是会去看看框架的基本原理。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |