13518219792
小编给大家分享一下Vue响应式原理Observer、Dep、Watcher的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联是一家专注于网站设计制作、做网站与策划设计,秦州网站建设哪家好?成都创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:秦州等地区。秦州做网站价格咨询:18980820575
Object.defineProperty
相信很多同学或多或少都了解Vue的响应式原理是通过Object.defineProperty实现的。被Object.defineProperty绑定过的对象，会变成「响应式」化。也就是改变这个对象的时候会触发get和set事件。进而触发一些视图更新。举个栗子?
function defineReactive (obj, key, val) {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: () => {
console.log('我被读了，我要不要做点什么好?');
return val;
},
set: newVal => {
if (val === newVal) {
return;
}
val = newVal;
console.log("数据被改变了，我要把新的值渲染到页面上去!");
}
})
}
let data = {
text: 'hello world',
};
// 对data上的text属性进行绑定
defineReactive(data, 'text', data.text);
console.log(data.text); // 控制台输出 <我被读了，我要不要做点什么好?>
data.text = 'hello Vue'; // 控制台输出 Observer 「响应式」
Vue中用Observer类来管理上述响应式化Object.defineProperty的过程。我们可以用如下代码来描述，将this.data也就是我们在Vue代码中定义的data属性全部进行「响应式」绑定。
class Observer {
constructor() {
// 响应式绑定数据通过方法
observe(this.data);
}
}
export function observe (data) {
const keys = Object.keys(data);
for (let i = 0; i < keys.length; i++) {
// 将data中我们定义的每个属性进行响应式绑定
defineReactive(obj, keys[i]);
}
}Dep 「依赖管理」
什么是依赖？
相信没有看过源码或者刚接触Dep这个词的同学都会比较懵。那Dep究竟是用来做什么的呢？ 我们通过defineReactive方法将data中的数据进行响应式后，虽然可以监听到数据的变化了，那我们怎么处理通知视图就更新呢？
Dep就是帮我们收集【究竟要通知到哪里的】。比如下面的代码案例，我们发现，虽然data中有text和message属性，但是只有message被渲染到页面上，至于text无论怎么变化都影响不到视图的展示，因此我们仅仅对message进行收集即可，可以避免一些无用的工作。
那这个时候message的Dep就收集到了一个依赖，这个依赖就是用来管理data中message变化的。
{{message}}
data: {
text: 'hello world',
message: 'hello vue',
}当使用watch属性时，也就是开发者自定义的监听某个data中属性的变化。比如监听message的变化，message变化时我们就要通知到watch这个钩子，让它去执行回调函数。
这个时候message的Dep就收集到了两个依赖，第二个依赖就是用来管理watch中message变化的。
watch: {
message: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
}当开发者自定义computed计算属性时，如下messageT属性，是依赖message的变化的。因此message变化时我们也要通知到computed，让它去执行回调函数。 这个时候message的Dep就收集到了三个依赖，这个依赖就是用来管理computed中message变化的。
computed: {
messageT() {
return this.message + '!';
}
}图示如下：一个属性可能有多个依赖，每个响应式数据都有一个Dep来管理它的依赖。
如何收集依赖
我们如何知道data中的某个属性被使用了，答案就是Object.defineProperty，因为读取某个属性就会触发get方法。可以将代码进行如下改造：
function defineReactive (obj, key, val) {
let Dep; // 依赖
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: () => {
console.log('我被读了，我要不要做点什么好?');
// 被读取了，将这个依赖收集起来
Dep.depend(); // 本次新增
return val;
},
set: newVal => {
if (val === newVal) {
return;
}
val = newVal;
// 被改变了，通知依赖去更新
Dep.notify(); // 本次新增
console.log("数据被改变了，我要把新的值渲染到页面上去!");
}
})
}什么是依赖
那所谓的依赖究竟是什么呢？上面的图中已经暴露了答案，就是Watcher。
Watcher 「中介」
Watcher就是类似中介的角色，比如message就有三个中介，当message变化，就通知这三个中介，他们就去执行各自需要做的变化。
Watcher能够控制自己属于哪个，是data中的属性的还是watch，或者是computed，Watcher自己有统一的更新入口，只要你通知它，就会执行对应的更新方法。
因此我们可以推测出，Watcher必须要有的2个方法。一个就是通知变化，另一个就是被收集起来到Dep中去。
class Watcher {
addDep() {
// 我这个Watcher要被塞到Dep里去了~~
},
update() {
// Dep通知我更新呢~~
},
}以上是“Vue响应式原理Observer、Dep、Watcher的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
