vue 是怎么知道两个变量哪个需要更新视图，哪个不需要？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2148 天前的主题，其中的信息可能已经有所发展或是发生改变。

比如有一个模版

<p>{{a}}</p>

vue 的数据：

const vm = new Vue({

	data: () => ({
		a: 'a',
        b: 'abc'
	})

})

当我修改 a 时，视图更新了。

当我尝试修改 b 时，那么 vue 内部有没有进行更新，或者说 vue 如何知道 b 被修改了，却不需要更新视图的？

Vue

更新

视图

修改

5 条回复 • 2019-01-16 10:44:26 +08:00

akatquas

2019-01-09 23:31:19 +08:00 via iPhone

文档文档，
3.0 以前是 defineProperty 里面劫持

3.0 以后我没看到，估计是是 Proxy 触发

╮(￣▽￣"")╭

Biwood

2019-01-09 23:35:01 +08:00

virtual dom diffing algorithm，其实还是借鉴了 react.js 的思路，在使用这类框架的时候建议还是了解一下设计思想以及实现原理

FakeLeung

2019-01-10 00:18:09 +08:00

@akatquas #1
@Biwood #2
是的，我知道是 definePrototype 劫持了，那么，b 更新了，也会触发 setter 中的劫持，但是 vue 内部，到底是用什么办法，不去更新视图？
是因为 Dep 中没有相对应的 target 还是因为 diff 了 vdom 发现无需更新视图？

Lxxyx

2019-01-10 04:33:07 +08:00 via Android

getter 来做依赖收集，也就是说，如果你在模板或者方法里面调用了这个变量，那么框架就知道这个变量是有人使用的，在这个变量变化的时候会通知那些使用它的地方

redbuck

2019-01-16 10:44:26 +08:00

初始化的时候劫持 data 里的所有属性的 set/get 操作(defineProperty),同时解析模板的时候会收集模板里用到的属性(依赖收集),对属性进行 set 操作的时候,会通知所有订阅者更新 dom