vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
第一步:需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的 update() 方法,并触发Compile中绑定的回调,则功成身退。
第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
复制代码
vue 的双向绑定的原理是什么
程序员文章站
2022-04-19 16:04:45
...
上一篇: Android-WebView还会存在内存泄漏吗?
下一篇: java的内存泄露
推荐阅读
-
vue-vmodel数据的双向绑定
-
vue中的事件,表单输入绑定,计算属性computed及监听属性watch
-
vue的v-model绑定对象属性时,更新不及时
-
vue + elementUI 表单重置方法 (针对未绑定prop无法使用resetFields的情况)
-
Vue双向绑定实现原理与方法详解
-
Vue条件循环判断+计算属性+绑定样式v-bind的实例
-
Vue.mixin Vue.extend(Vue.component)的原理与区别
-
简简单单的Vue1(MVVM与Vue的双向绑定原理)
-
CGI和servlet运行方式本质的区别是什么?PHP和Java在Web开发的原理有哪些本质不同?
-
vue 属性拦截实现双向绑定的实例代码