入门歌曲(在弹词中(弹词)和一些地方戏曲)

最近在研究Vue的源代码，在网上看了一些大神博客。看来我还是觉得挺辛苦的。记录下自己对学习的理解，希望达到不看源代码简单易懂的效果

Object.defineProperty

相信很多同学或多或少都知道，Vue的响应原理是通过Object.defineProperty实现的，被Object.defineProperty绑定的对象会变得“有响应”。也就是说，当这个对象改变时，get和set事件将被触发。从而触发一些视图更新。给我一个栗子

函数定义反应式(对象、键、值){对象。定义属性(obj，key，{可枚举： true，可配置： true，get: ()={console.log('我已经被读取，我应该做点什么吗？');返回值；}，set : NewVal={ if(VaL===NewVal){ return；} val=newVal数据已被更改，我想在页面中呈现新的值);} })}让数据={ text: 'hello world '，}；//绑定数据上的text属性来定义reactive (data，‘text’，data . text)；console . log(data . text)；//我已经从控制台输出中读取。要我做点什么吗？data.text=' hello Vue//从控制台输出的hello Vue数据已更改。我想在页面中呈现新的值！观察者“有反应”

在Vue中，Observer类用于管理上述响应Object.defineProperty的过程，我们可以用下面的代码来描述，并绑定这个. data，也就是Vue代码中定义的所有数据属性，以一种“响应”的方式。

Class Observer {constructor() {//通过方法observe(this.data)响应性地绑定数据；} }导出函数observe(数据){ const keys=Object.keys(数据)；for(设I=0；长度；I) {//响应性地绑定我们在数据中定义的每个属性(obj，key[I])；}}Dep“依赖关系管理”

什么是依赖？

相信没有看过源代码或者刚接触Dep这个词的同学都会比较困惑。那么Dep到底是用来做什么的呢？在我们通过defineReactive方法响应数据中的数据之后，虽然我们可以监控数据的变化，但是我们如何处理通知视图并更新它呢？

Dep是帮助我们收集[通知哪里]。例如，在下面的代码案例中，我们发现虽然数据中有文本和消息属性，但页面上只呈现了消息，无论文本如何变化，都不会影响视图的显示，所以只能收集消息，这样可以避免一些无用的工作。

此时，消息Dep已经收集了一个依赖项，用于管理消息在数据中的变化。

div p { { message } }/p/div data : { text : ' hello world '，message:' hello vue '，}使用watch属性时，即开发人员监视某个数据中属性的变化。比如监控消息的变化，当消息发生变化时，我们应该通知watch的钩子，让它执行回调函数。

此时，消息的Dep收集两个依赖项，第二个依赖项用于管理watch中消息的变化。

watch : { message : function(val，oldval) {console.log ('new3360% s，old:% s '，val，oldval)}，}当开发人员自定义computed的计算属性时，以下消息属性取决于消息的变化。因此，当消息发生变化时，我们还应该通知computed执行回调函数。此时，消息Dep已经收集了三个依赖项，用于管理计算中消息的变化。

computed : { messageT(){ return this . message '！'；}}关系图如下：一个属性可能有多个依赖项，每个响应数据都有一个Dep来管理其依赖项。

如何收集依赖关系

我们如何知道数据中的一个属性已经被使用的答案是Object.defineProperty，因为读取一个属性将触发get方法。代码可以修改如下：

函数defineReactive (obj，key，val){ let Dep；//依赖于object.defineproperty (obj，key，{enumerable:true，configuration ble 3360 true，get: ()={console.log('我已经被读取，我应该做点什么吗？');//已被读取，此依赖项被收集dep . depend()；//这次添加返回值；}，set : NewVal={ if(VaL===NewVal){ return；} val=newVal//已被更改，通知依赖项更新Dep . notify()；//这次添加console.log('数据已更改，我想将新值呈现到页面上！');}})}什么是依赖

所谓的依赖是什么？答案已经在上图中暴露了，那就是Watcher。

观察者“中介”

观察者是一个类似中介的角色。例如，message有三个中介。当消息发生变化时，这三个中介将得到通知，它们将实现它们需要进行的更改。

观察者可以控制他属于哪一个，是数据中的属性，还是观察或计算。Watcher有统一的更新入口，只要你通知它，它就会执行相应的更新方法。

因此，我们可以推断出Watcher必须具备的两种方法。一是通知变更，二是在Dep领取。

类观察器{addDep() {//我的观察器将被填充到Dep ~~ }，update() {//Dep通知我更新~~ }，}摘要

回头看，Vue反应原理的核心是观察者、Dep和观察者。

响应绑定在Observer中执行，当读取数据时，触发get方法，执行Dep收集依赖项，即收集Watcher。

当数据发生变化时，触发set方法，并通过所有对应的Watcher执行更新。例如，watch和computed执行开发人员定义的回调方法。

本文是一篇初学者的文章，可以简单了解观察者、副观察者和观察者之间的角色和关系。以后，我们会逐步了解和深入学习，循序渐进。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。