vue数据监听与依赖收集

更新日期: 2020-04-17阅读: 2.2k标签: 数据

文章围绕下面demo进行分析

<div id="app">
    <span>{{a.b}} {{c}} {{d}}</span>
</div>

<script>
    var app = new vue({
        el: "#app",
        data: function(){
            return {
                a: {
                    b: 1
                },
                c: 1
            }
        },
        watch:{
          'a.b': function(){
            console.log(22)
          }
        },
        computed:{
          d: function (){
            return this.c
          }
        }
    });
</script>


数据监听:从initData开始

vue监听data数据的步骤可以概括为下面几步:

1、使用initData初始化data数据

2、将data挂载到vm._data中(后面会将_data赋值给$data,这里的data如果是函数,就是返回的数据)

3、通过observe监听数据

4、如果数据是一个非object类型的数据(typeof == object,且不为null),终止程序

5、observe中使用new Observer生成ob

6、Observer中使用`this.dep = new Dep()`挂载dep

7、Observer中将__ob__指向this,所以可以使用`__ob__.dep`找到dep

8、遍历属性,使用definereactive监听属性

9、defineReactive中生成`var dep = new Dep();`,这个dep是一个闭包

10、defineReactive中使用observe监听属性所代表的值,也就是步骤3,至此循环递归


依赖收集

三种watcher

1、normal-watcher(watch中的数据,通过initWatch生成) 记录在_watchers中(所有的watch都会存放在这里)

2、computed-watcher(computed) 记录在_computedWatchers中

3、render-watcher 就是vm._watcher


normal-watcher:运行initWatch

我们在组件钩子函数watch 中定义的,都属于这种类型,即只要监听的属性改变了,都会触发定义好的回调函数,这类watch的expression是计算属性中的属性名。

在初始化watch的时候(initWatch),会调用vm.watch函数会直接使用Watcher构建观察者对象。watch中属性的值作为watcher.cb存在,在观察者update的时候,在watcher.run函数中执行。watch中属性的key会进行parsePath处理,并用parsePath返回的函数,获取watch的初始值value。

比如把a.b解析为监听a中的b属性,这样会先寻找a,也就是触发a的get。

1、赋值cb为a.b的值,赋值expression为a.b

2、使用parsePath解析expOrFn,即a.b,并将返回的函数赋值给该watcher实例的getter即this.getter

3、运行this.get获取a.b的值,进行依赖收集,this指向a.b的 watcher实例

4、运行pushTarget将Dep.target指向该watcher实例

5、运行this.getter,会先获取a,运行defineReactive中的get

6、运行dep.depend(此时的dep指的是data.a的dep,在闭包中),进而运行Dep.target.addDep,将data.a的dep追加进该watcher实例中,并将该watcher实例追加进data.a的dep.subs中,因为a具有__ob__,所以会运行a.__ob__.dep.depend,将a的dep追加进该watcher实例中,并将该watcher实例追加进a的dep.subs中

7、利用获取到的a去获取属性b

8、运行dep.depend(此时的dep指的是a.b的dep,在闭包中),进而运行Dep.target.addDep,将a.b的dep追加进该watcher实例中,并将该watcher实例追加进a.b的dep.subs中,因为b不具有__ob__,所以不会继续追加

9、到这里就获取到了a.b的值1,并将这个值赋值给该watcher实例的value


computed-watcher:运行initComputed

我们在组件钩子函数computed中定义的,都属于这种类型,每一个 computed 属性,最后都会生成一个对应的 watcher 对象,但是这类 watcher 有个特点:当计算属性依赖于其他数据时,属性并不会立即重新计算,只有之后其他地方需要读取属性的时候,它才会真正计算,即具备 lazy(懒计算)特性。这类watch的expression是计算属性中的属性名。

在初始化computed的时候(initComputed),会先生成watch实例,然后监测数据是否已经存在data或props上,如果存在则抛出警告,否则调用defineComputed函数,监听数据,为组件中的属性绑定getter及setter。

注意:computed中的属性是直接绑定在vm上的,所以如果写a.d,那就是属性名是a.d,而不是a对象的属性d。

1、执行initComputed,遍历computed生成watch实例,并挂载到vm._computedWatchers上

    (1)赋值cb为空函数,赋值expression为expOrFn(d的值,函数或对象的get)的字符串形式,赋值this.getter为expOrFn

    (2)默认的computed设置lazy为true,不运行this.get获取值,所以到这里watch实例就生成了。

2、执行defineComputed函数,如果d的值是函数,或者d的cache属性不是false,那么会使用createComputedGetter函数生成computedGetter函数,作为d的getter函数,如果cache设置为false,不经过createComputedGetter封装,每次获取都会运行get,而d的setter就是他的set或者空函数(默认)

3、当获取d的值时(比如渲染,此时Dep.target为渲染watcher),会运行computedGetter函数

4、根据watcher.dirty的值决定是否运行watcher.evaluate重新获取属性值,这是懒计算的关键。dirty的值默认为true,在依赖改变时或update时变为true,在evaluate后变为false

    (1)watcher.evaluate中运行this.get获取d的值,进行依赖收集,this指向d的 watcher实例

    (2)运行pushTarget将Dep.target指向d的watcher实例

    (3)运行this.getter,会先获取this.c的值,运行defineReactive中的get

    (4)运行dep.depend(此时的dep指的是data.c的dep,在闭包中),进而运行Dep.target.addDep,将data.c的dep追加进d的watcher实例中,并将d的watcher实例追加进data.c的dep.subs中

    (5)d的watcher出栈,将Dep.target重新设置为渲染watcher

5、运行watcher.depend,遍历watcher.deps(这里主要是data.c的dep),将他们与渲染watcher互相关联

注意:computed中的数据不经过Observer监听,所以不存在dep


render-watcher:运行mountComponent挂载组件

每一个组件都会有一个 render-watcher, 当 data/computed 中的属性改变的时候,会调用该 render-watcher 来更新组件的视图。这类watch的expression是 function () {vm._update(vm._render(), hydrating);}。

1、生成updateComponent函数,

2、实例化一个渲染watcher,把updateComponent当作expOrFn参数传入

3、赋值cb为空函数,赋值expression为updateComponent的字符串形式,赋值this.getter为expOrFn

4、运行this.get,进行依赖收集

5、运行pushTarget将Dep.target指向该渲染watcher实例

6、运行this.getter,即updateComponent函数

7、用render函数生成vnode,并将其作为第一个参数,传入_update

8、render函数中会对用到的变量进行getter操作,并完成依赖收集

    (1)获取a,将data.a的dep追加进该渲染watcher实例中,并将该渲染watcher实例追加进data.a的dep.subs中

    (2)获取a.b,将a.b的dep追加进该渲染watcher实例中,并将该渲染watcher实例追加进a.b的dep.subs中

    (3)获取c,将data.c的dep追加进该渲染watcher实例中,并将该渲染watcher实例追加进data.c的dep.subs中

    (4)获取d,运行d的getter函数computedGetter(详情看上面computed-watcher中的步骤3-5)

9、完成依赖收集后,变量修改,会触发dep.notify,通知渲染watcher实例的update操作,重新进行渲染

来自:https://segmentfault.com/a/1190000022422120

链接: https://www.fly63.com/article/detial/8751

双向数据绑定与单向数据绑定的各自优势和关系

在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。

原生JS数据绑定的实现

双向数据绑定是非常重要的特性 —— 将JS模型与HTML视图对应,能减少模板编译时间同时提高用户体验。我们将学习在不使用框架的情况下,使用原生JS实现双向绑定 —— 一种为Object.observe

JavaScript判断数据类型的多种方法【 js判断一个变量的类型】

js判断数据类型的多种方法,主要包括:typeof、instanceof、 constructor、 prototype.toString.call()等,下面就逐一介绍它们的异同。

javascript中的typeof返回的数据类型_以及强制/隐式类型转换

由于js为弱类型语言拥有动态类型,这意味着相同的变量可用作不同的类型。 typeof 运算符返回一个用来表示表达式的数据类型的字符串,目前typeof返回的字符串有以下这些: undefined、boolean、string、number、object、function、“symbol

使用typeof obj===‘object’潜在的问题,并不能确定obj是否是一个对象?

在js中我们直接这样写typeof obj===‘object’有什么问题呢?发现Array, Object,null都被认为是一个对象了。如何解决这种情况,能保证判断obj是否为一个对象

js进制数之间以及和字符之间的转换

js要处理十六进制,十进制,字符之间的转换,发现有很多差不多且书写不正确的方法.一个一个实践才真正清楚如何转换,现在来记录一下它们之间转换的方法。

js判断数字是奇数还是偶数的2种方法实现

奇数和偶数的判断是数学运算中经常碰到的问题,这篇文章主要讲解通过JavaScript来实现奇偶数的判断。2种判断方法:求余% 、&1

js算法_判断数字是否为素数/质数

质数又称素数。指在一个大于1的自然数中,除了1和此整数自身外,没法被其他自然数整除的数。比如100以内共25个,js实现代码如下。

Js数据类型转换_JavaScript 那些不经意间发生的数据类型自动转换

JavaScript自动类型转换真的非常常见,常用的一些便捷的转类型的方式,都是依靠自动转换产生的。比如 转数字 : + x 、 x - 0 , 转字符串 : \\\"\\\" + x 等等。现在总算知道为什么可以这样便捷转换。

Js中实现XML和String相互转化

XML是标准通用标记语言 (SGML) 的子集,非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。 这篇文章主要介绍Js中实现XML和String相互转化

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!