前端培训VUE数据绑定

1数据绑定
一旦更新了 data 中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会 更新
2数据劫持
1) 数据劫持是 vue 中用来实现数据绑定的一种技术 2) 基本思想: 通过 defineProperty()来监视 data 中所有属性(任意层次)数据的变化, 一旦变
化就去更新界面
3四个重要对象
1) Observer a. 用来对 data 所有属性数据进行劫持的构造函数 b. 给 data 中所有属性重新定义属性描述(get/set) c. 为 data 中的每个属性创建对应的 dep 对象

2) Dep(Depend) a. data 中的每个属性(所有层次)都对应一个 dep 对象 b. 创建的时机: * 在初始化 definedata 中各个属性时创建对应的 dep 对象 * 在 data 中的某个属性值被设置为新的对象时 c. 对象的结构 { id,// 每个 dep 都有一个唯一的 id subs//包含 n 个对应 watcher 的数组(subscribes 的简写) } d. subs 属性说明 * 当 watcher 被创建时, 内部将当前 watcher对象添加到对应的 dep对象的 subs中 * 当此 data 属性的值发生改变时,subs 中所有的 watcher 都会收到更新的通知,从而最终更新对应的界面

3) Compiler a. 用来解析模板页面的对象的构造函数(一个实例) b. 利用 compile 对象解析模板页面 c. 每解析一个表达式(非事件指令)都会创建一个对应的watcher对象, 并建立watcher 与 dep 的关系 d. complie 与 watcher 关系: 一对多的关系

4) Watcher a. 模板中每个非事件指令或表达式都对应一个 watcher 对象 b. 监视当前表达式数据的变化 c. 创建的时机: 在初始化编译模板时 d. 对象的组成 { vm, //vm 对象 exp,//对应指令的表达式 cb,//当表达式所对应的数据发生改变的回调函数 value,//表达式当前的值 depIds//表达式中各级属性所对应的 dep 对象的集合对象 //属性名为 dep 的 id, 属性值为 dep }
5) 总结:dep 与 watcher 的关系: 多对多 a. data 中的一个属性对应一个 dep, 一个 dep 中可能包含多个 watcher(模板中有几个 表达式使用到了同一个属性) b. 模板中一个非事件表达式对应一个 watcher, 一个 watcher 中可能包含多个 dep(表 达式是多层:a.b) c. 数据绑定使用到 2 个核心技术 *defineProperty() * 消息订阅与发布


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)