我是靠谱客的博主 震动滑板,这篇文章主要介绍学习MVVM及框架的双向绑定笔记,现在分享给大家,希望可以做个参考。

MVVM由以下三个内容组成

  • View:视图模板
  • Model:数据模型
  • ViewModel:作为桥梁负责沟通ViewModel,自动渲染模板

JQuery时期,如果需要刷新UI时,需要先取到对应的DOM再更新UI,这样数据和业务的逻辑就和页面有强耦合。

MVVM中,UI是挺数据驱动的,数据一旦改变就会刷新相应的UIUI变化也会改变相应的数据。这种方式在开发中只需要关心数据的变化,不用直接去操作DOM。并且可以将一些可复用的逻辑放在一个ViewModel中,多个View复用这个ViewModel

MVVM 中,最核心的也就是数据双向绑定,例如 Angluar 的脏数据检测Vue 的数据劫持React的数据绑定

Angluar 的脏数据检测

当触发了指定事件后进入脏数据检测,这时期会调用$digest循环遍历所有的数据观察者,判断当前值是否和先前的值有区别,如果检测到变化的话,会调用$watch函数,然后再次调用$digest循环直到发现没有变化。所以这个过程可能会循环几次,一直到不再有数据变化发生后,将变更的数据发送到视图,更新页面展现。如果是手动对ViewModel的数据进行变更,为确保变更同步到视图,需要手动触发一次“脏值检测”。

脏数据检测虽然需要每次去循环遍历查看是否有数据变化,存在低效的问题,与Vue的双向绑定原理不同,但是脏数据检测能够同时检测出要更新的值,再去统一更新UI,这样也可以减少操作DOM的次数。

Vue 的数据劫持

Vue2.0版本内部使用了Object.defineProperty()来实现数据与视图的双向绑定,体现在对数据的读写处理过程中。即Object.defineProperty()中定义的数据setget函数。

使用Object.defineProperty()实现Vue2.0双向绑定的小demo

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app"> <input type="text" id="input"> <span id="text"></span> </div> ---------------------------------------------------------------------- var obj = {}; Object.defineProperty(obj, 'prop', { get: function() { return val; }, set: function(newVal) { val = newVal; document.getElementById('input').value = val; document.getElementById('text').innerHTML = val; } }); document.addEventListener('keyup', function(e) { obj.prop = e.target.value; }); 复制代码

如上所述, vue.js通过 Object.defineProperty()来劫持各个属性的 settergetter。再结合发布者-订阅者的方式,发布消息给订阅者,触发相应的监听回调。通过 Directives指令去对 DOM做封装,当数据发生变化,会通知指令去修改对应的 DOM,数据驱动 DOM的变化。 vue.js还会对操作做一些监听 (DOM Listener),当我们修改视图的时候, vue.js监听到这些变化,从而改变数据。这样就形成了数据的双向绑定。

在对数据进行读取时,如果当前有 Watcher(对数据的观察者, watcher会负责将获取的新数据发送给视图),那将该 Watcher绑定到当前的数据上( dep.depend(), dep关联当前数据和所有的 watcher的依赖关系),是一个检查并记录依赖的过程。而在对数据进行赋值时,如果数据发生改变,则通知所有的 watcher(借助 dep.notify())。这样,即便是我们手动改变了数据,框架也能够自动将数据同步到视图。 完整的简易双向绑定代码如下:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var data = { name: 'yck' } observe(data) let name = data.name // -> get value data.name = 'yyy' // -> change value function observe(obj) { // 判断类型 if (!obj || typeof obj !== 'object') { return } Object.keys(obj).forEach(key => { defineReactive(obj, key, obj[key]) }) } function defineReactive(obj, key, val) { // 递归子属性 observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { console.log('get value') return val }, set: function reactiveSetter(newVal) { console.log('change value') val = newVal } }) } 复制代码

以上代码简单的实现了如何监听数据的setget,下面再给属性添加发布订阅

复制代码
1
2
<div>{{name}}</div> 复制代码

在解析模板的时候遇到{{ name }}就给属性name添加发布订阅

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 通过 Dep 解耦 class Dep { constructor() { this.subs = [] } addSub(sub) { // sub 是 Watcher 实例 this.subs.push(sub) } notify() { this.subs.forEach(sub => { sub.update() }) } } // 全局属性,通过该属性配置 Watcher Dep.target = null function update(value) { document.querySelector('div').innerText = value } class Watcher { constructor(obj, key, cb) { // 将 Dep.target 指向自己 // 然后触发属性的 getter 添加监听 // 最后将 Dep.target 置空 Dep.target = this this.cb = cb this.obj = obj this.key = key this.value = obj[key] Dep.target = null } update() { // 获得新值 this.value = this.obj[this.key] // 调用 update 方法更新 Dom this.cb(this.value) } } var data = { name: 'yck' } observe(data) // 模拟解析到 `{{name}}` 触发的操作 new Watcher(data, 'name', update) // update Dom innerText data.name = 'yyy' 复制代码

下面对defineReactive函数进行改造:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function defineReactive(obj, key, val) { // 递归子属性 observe(val) let dp = new Dep() Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { console.log('get value') // 将 Watcher 添加到订阅 if (Dep.target) { dp.addSub(Dep.target) } return val }, set: function reactiveSetter(newVal) { console.log('change value') val = newVal // 执行 watcher 的 update 方法 dp.notify() } }) } 复制代码

核心思路就是手动触发一次属性的getter 来实现发布订阅的添加。

Vue3.0将用proxy代替Object.defineProperty()

Object.defineProperty()的缺陷:

1.只能对属性进行数据劫持,所以需要深度遍历整个对象

2.对于数组不能监听到数据的变化

虽然Vue 2.0中能检测到数组数据的变化,但是其实是使用了hack的办法,并且也是有缺陷的

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto) // hack 以下几个函数 const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ] methodsToPatch.forEach(function(method) { // 获得原生函数 const original = arrayProto[method] def(arrayMethods, method, function mutator(...args) { // 调用原生函数 const result = original.apply(this, args) const ob = this.__ob__ let inserted switch (method) { case 'push': case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break } if (inserted) ob.observeArray(inserted) // 触发更新 ob.dep.notify() return result }) }) 复制代码

Proxy原生支持监听数组变化,并且可以直接对整个对象进行拦截,所以Vue3.0使用Proxy替换 Object.defineProperty

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let onWatch = (obj, setBind, getLogger) => { let handler = { get(target, property, receiver) { getLogger(target, property) return Reflect.get(target, property, receiver) }, set(target, property, value, receiver) { setBind(value) return Reflect.set(target, property, value) } } return new Proxy(obj, handler) } let obj = { a: 1 } let value let p = onWatch( obj, v => { value = v }, (target, property) => { console.log(`Get '${property}' = ${target[property]}`) } ) p.a = 2 // bind `value` to `2` p.a // -> Get 'a' = 2 复制代码

React的数据绑定

React的数据绑定是虚拟DOM树的更新相关: 属性更新,组件自己处理

结构更新,重新“渲染”子树(虚拟DOM),找出最小改动步骤,打包DOM操作,给真实DOM树打补丁

单纯从数据绑定来看,React虚拟DOM没有数据绑定,因为setState()不维护上一个状态(状态丢弃)

从数据更新机制来看,React类似于提供数据模型的方式(必须通过state更新)

最后

以上就是震动滑板最近收集整理的关于学习MVVM及框架的双向绑定笔记的全部内容,更多相关学习MVVM及框架内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(87)

评论列表共有 0 条评论

立即
投稿
返回
顶部