vuejs的双向绑定实现原理
2024-10-19 11:45:39
Vue在初始化的时候,会有两个大步骤:
1、Compile
从root的节点开始编译,根据正则表达式,把特殊的v-*类的标签,全部转换成对应的内存中的object
2、Observe
全部的data,observer所有的属性。 针对每个属性,做一个pub/sub结构,这样每次属性变化,可以通知到他们。
比如 <input type="text" v-model="xxx" />
它的双向绑定有2个过程:
1、text内容变化, 通知data变更
这个比较简单理解,在compile的过程中,针对text增加addeventlistener,有变化事件,更新data值
2、data属性值变化, 通知text更新内容
Observer阶段,针对每个data的属性,都闭包一个 Sub对象;
Compile阶段,把textnode和data,通过Watcher联系起来。 Watcher内部,一方面触发data,把自己放入sub中;另一方面,约定好update接口。
参考:http://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension
最新文章
- Spark笔记:复杂RDD的API的理解(下)
- JavaScript单元测试框架JsUnit基本介绍和使用
- UVA 11992 Fast Matrix Operations (二维线段树)
- eWebeditor编辑器上传图片路径错误解决方法[疑难杂症]【转,作者:unvs】
- 如何用Apache TCPMon来截获SOAP消息
- boot/head.S
- Almeza MultiSet Pro(批量安装程序) V8.7.6中文特别版
- Android ListView(Selector 背景图片)
- IIS7 性能(内存、CPU、当前请求耗时)监测
- axis2 webservices 411错误解决办法
- Vue.js动画在项目使用的两个示例
- BZOJ_4002_[JLOI2015]有意义的字符串_矩阵乘法
- python continue的应用
- 搭建windows测试环境的步骤
- P1705 爱与愁过火(背包)
- sql语句中start with用法,用于表达一个复杂的目录树存储在一张表中
- golang结构体、接口、反射
- jupyter notebook中使用mpld3进行交互
- [转帖]台积电近10万片晶圆报废,但7nm工艺将成2019营收主力
- 增加显示记录数的label及隐藏refresh按钮