0
点赞
收藏
分享

微信扫一扫

vue双向绑定原理文字说明

犹大之窗 2022-04-24 阅读 43
vue.jsvue

观察者 Obeserver

把配置对象中的data的每个属性通过defineProperty数据拦截设置访问器方法,并将其放在vm函数实例上即this._data。当数据发生改变时,调用set的setter函数通知订阅器。

订阅器 subscribe

dep = {

​ subscribe: [subscriber,subscriber],

​ subscribe: […],

​ …

}

一个对象,每个vm上的_data数据对应一个属性,每个属性都对应着多个订阅者组成的数组。

订阅者 subscriber

订阅者就是一个对象。它需要一个能创建能订阅,能更新内容的构造函数。

解析器 compile

如果想要达到订阅的目的。

​ 我们得知道是那个元素订阅了vm上的_data的那个数据变量。解析器就能帮助我们解析模板元素,及其应用的数据变量。假如订阅者的元素为input 就可以传(订阅元素,this(vm),订阅的数据变量,‘value’(改变视图的元素具有的属性))从而创建观察者实例,之后将它放在订阅池中。如果变量变化,通过通过 node.value = vm. _data[数据变量]更新视图。

收获
defineProperty中的 setter 和 getter是闭包
掌握了一种双向绑定的模式
更深入了解面向对象思想

如果未来理解的更通透,会更新。

举报

相关推荐

0 条评论