一文带你了解vue2之响应式原理

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在面试的过程中也会问到：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"请阐述vue2的响应式原理？","attrs":{}}],"attrs":{}},{"type":"text","text":"，凡是出现阐述或者理解，一般都是知无不言言无不尽，知道多少说多少。接下来，我来谈谈自己的理解，切记不要去背，一定要理解之后，用自己的语言来描述出来。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那什么是响应式呢？响应式就是当对象本身（对象的增删值）或者对象属性（重新赋值）发生变化时，将会运行一些函数，最常见的就是render函数。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在具体实现上，vue用到了几个核心部件，每一个部件都解决一个问题：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"Observer","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"Dep","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"Watcher","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"Scheduler","attrs":{}}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"🌟 Observer","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Observer","attrs":{}}],"attrs":{}},{"type":"text","text":"要实现的目标非常简单，就是把一个普通的对象转换为响应式的对象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"为了实现这一点，Observer把对象的每个属性通过","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Object.defineProperty","attrs":{}}],"attrs":{}},{"type":"text","text":"转换为带有","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"getter","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"setter","attrs":{}}],"attrs":{}},{"type":"text","text":"的属性，这样一来，我们访问或设置属性时，会分别调用getter和setter方法，vue就有机会做一些别的事情。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/34/340a80b4cc15f090b25b495a31e1c3c9.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Observer是vue内部的构造器，我们可以通过Vue提供的静态方法","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Vue.observable(object)","attrs":{}}],"attrs":{}},{"type":"text","text":"间接的使用该功能。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"示例","attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"\n \n \n \n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"运行结果","attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"输出结果中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"...","attrs":{}}],"attrs":{}},{"type":"text","text":"代表数据是响应式的，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Invoke property getter","attrs":{}}],"attrs":{}},{"type":"text","text":"表示调用了属性的getter方法。如果对象中还存在对象，那么它会深度递归遍历，让所有的数据都是响应式的数据。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/50/502e60dba473b9ad716d5949a06ccb24.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果说在组件当中，配置中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"data","attrs":{}}],"attrs":{}},{"type":"text","text":"也会返回一个响应式数据，这一过程在组件生命周期中发生在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"beforeCreate","attrs":{}}],"attrs":{}},{"type":"text","text":"之后，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"created","attrs":{}}],"attrs":{}},{"type":"text","text":"之后","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Observer在具体实现上，它会递归遍历对象的所有属性，以完成数据响应式的转换。如果说一个属性一开始并不存在于对象中，是后面添加上的，那么这种属性是检测不到的，所以像之前使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"obj.e = 3","attrs":{}}],"attrs":{}},{"type":"text","text":"新增一个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"e:3","attrs":{}}],"attrs":{}},{"type":"text","text":"也是检测不到的，因为之前对象中没有。但是到了vue3，使用了proxy，那就可以检测到了。因此在vue2中提供了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"$set","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"$delete","attrs":{}}],"attrs":{}},{"type":"text","text":"两个实例方法，我们可以通过这两个实例方法对已有响应式对象添加或删除属性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"示例","attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过对暱称的删除和年龄的添加，对比","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"$set","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"$delete","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"delete","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"set","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"\n\n

\n

暱称：{{obj.name}}

\n

年龄：{{obj.age}}

\n \n \n \n

\n\n \n \n \n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"运行结果","attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2a/2a66165217bca9663456a70970fedcfd.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"从运行结果来看，在没有点击","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"删除暱称","attrs":{}}],"attrs":{}},{"type":"text","text":"按钮之前","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vm.obj","attrs":{}}],"attrs":{}},{"type":"text","text":"输出的name是响应式数据，点击删除暱称按钮之后再次打印vm.obj此时数据已经被删除，但是页面上暱称法医并未删除，vue收不到属性被删除的通知，因为","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"delete obj.name","attrs":{}}],"attrs":{}},{"type":"text","text":"是不会被检测到的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"$delete","attrs":{}}],"attrs":{}},{"type":"text","text":"进行暱称的删除操作：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"\n

\n

暱称：{{obj.name}}

\n

年龄：{{obj.age}}

\n \n \n \n

\n\n \n \n \n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"运行结果","attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d6/d6072d0e9afdf8391ff729ba907502dd.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"$delete","attrs":{}}],"attrs":{}},{"type":"text","text":"的时候vue就会收到通知了，进行暱称删除操作，页面也会及时响应。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同理，我们来看看","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"$set","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"set","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":" \n

\n

暱称：{{obj.name}}

\n

年龄：{{obj.age}}

\n \n \n \n \n

\n\n \n \n \n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"运行结果","attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ac/ac6721bca7ea2a02fdf8005c2bb7534b.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当使用传统方式","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"obj.age=100","attrs":{}}],"attrs":{}},{"type":"text","text":"向对象添加属性的时候，其实可以添加成功的，只是数据并不是响应式的，页面上没有显示年龄。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来就使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"$set","attrs":{}}],"attrs":{}},{"type":"text","text":"添加属性：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"\n

\n

暱称：{{obj.name}}

\n

年龄：{{obj.age}}

\n \n \n \n

\n\n \n \n \n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"运行结果","attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0d/0db3c2ceaf5575ae0297cac93618c00e.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一目了然，使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"$set","attrs":{}}],"attrs":{}},{"type":"text","text":"添加的属性是响应式的，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"age:(...)","attrs":{}}],"attrs":{}},{"type":"text","text":"三个点很明显。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上就是针对对象的检测，那么数组呢？数组又是怎样检测的呢？Object和Array的变化检测处理方式是不同的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对于数组,vue会更改它的隐式原型，之所以这样做，是因为vue需要监听那些可能改变数组内容的 方法。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d3/d307575b9b095236da04d93fb1e4a88d.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"总之，Observer的目标，就是要让一个对象，它的属性的读取、赋值，内部数组的变化都要能够被vue检测到，这样才能让数据转换为响应式数据。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"🌼 Dep","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"现在有两个问题没有解决，就是读取属性时要做什么事情？属性变化时要做什么事情？这个问题就需要","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Dep","attrs":{}}],"attrs":{}},{"type":"text","text":"来解决。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Dep的全称是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Dependency","attrs":{}}],"attrs":{}},{"type":"text","text":"，表示","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"依赖","attrs":{}}],"attrs":{}},{"type":"text","text":"的意思，","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Vue会为响应式对象中的每个属性、对象本身、数组本身创建一个Dep实例，每个Dep实例都有能力做以下两件事：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"记录依赖：是谁在用我","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"派发更新：我变了，我要通知那些用到我的人","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当读取响应式对象的某个属性时，它会进行依赖收集：有人用到了我","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当改变某个属性时，它会派发更新：那些用我的人听好了，我变了","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/94/943dba61f97d2ecf720015a3f0739526.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"🔥 Watcher","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"现在又有一个问题，就是Dep如何知道是谁在用我？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要解决这个问题，需要依靠另一个东西，就是Watcher","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当某个函数执行的过程中，用到了响应式数据，响应式数据是无法知道是哪个函数在用自己，因此，vue通过一种巧妙的办法来解决这个问题：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们不要直接执行函数，而是把函数交给一个叫做watcher的东西去执行，watcher是一个对象，每个这样的函数执行时都应该创建一个watcher，通过watcher去执行。watcher会创建一个全局变量，让全局变量记录当前负责执行的watcher等于自己，然后再去执行函数，在函数执行的过程中，如果发生了依赖记录","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"dep.depend()","attrs":{}}],"attrs":{}},{"type":"text","text":"，那么Dep就会把这个全局变量记录下来，表示：有一个watcher用到了我这个属性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当Dep进行派发更新时，它会通知之前记录的所有watcher：我变了","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fc/fc0942400a1e033a21d71dac1dd1a9e8.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"每一个vue组件实例，都至少对应一个watcher，该watcher中记录了该组件的render函数。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"watcher首先会把render函数运行一次以收集依赖，于是那些在render中用到的响应式数据就会记录这个watcher。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当数据变化时，dep就会通知该watcher，而watcher将重新运行render函数，从而让界面重新渲染，同时重新记录当前的依赖。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"🌴 Scheduler","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"现在还剩最后一个问题，就是Dep通知watcher之后，响应数据又多次改变，造成watcher执行重复运行对应函数，就有可能导致函数频繁运行，从而导致效率低下","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"试想，如果一个交给watcher的函数，它里面用到了属性a、b、c、d，那么a、b、c、d属性都会记录依赖，于是下面的代码将会触发4次更新：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"state.a = \"new data\";\nstate.b = \"new data\";\nstate.c = \"new data\";\nstate.d = \"new data\";\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这样肯定是不行的，因此，watcher收到派发更新的通知后，它不会立即执行对应render函数，当然不仅仅是render函数，还有可能是其它的函数，而是把自己交给一个叫","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"调度器","attrs":{}}],"attrs":{}},{"type":"text","text":"的东西，在调度器里面有个队列，可以认为是一个数组，这个队列数组中记录了当前要运行哪些watcher，调度器维护一个执行队列，在队列中同一个watcher只会存在一次，队列中的watcher不是立即执行，它会通过一个叫做","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"nextTick","attrs":{}}],"attrs":{}},{"type":"text","text":"的工具方法，把这些需要执行的watcher放入到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"事件循环的微队列","attrs":{}}],"attrs":{}},{"type":"text","text":"中，nextTick的具体做法是通过","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Promise","attrs":{}}],"attrs":{}},{"type":"text","text":"完成的，nextTick其实就是一个函数","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"nextTick((fn)=>{\n Promise.resolve().then(fn);//通过这种方式就跑到微队列中去了\n})\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"也就是说，当响应式数据变化时，render函数的执行是异步的，并且在微队列中","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"👋 总体流程图","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/99/99875ac809b316acfb9381bf71591748.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们简单过一遍这个流程图：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"原始对象通过","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Observer","attrs":{}}],"attrs":{}},{"type":"text","text":"将转换成一个响应式的对象，具有","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"getter","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"setter","attrs":{}}],"attrs":{}},{"type":"text","text":"方法，然后就静静等待着。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"突然有一天，雷雨交加，有一个render函数要执行，但不是直接就执行了，而是交给watcher来执行，watcher通过设置全局变量的方式读取数据，因为读取了数据，所以会触发响应式对象的getter，随后getter会从全局变量的位置读取到当前正在读取的watcher并把watcher收集到Dep中。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"通过以上步骤页面就会被渲染出来了。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"又是突然的一天哈，风和日丽，我触发了一个按钮或者事件，不管干了什么，反正是数据改变了，进行新的步骤——","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"派发更新","attrs":{}}],"attrs":{}},{"type":"text","text":"，随后通知watcher，我变了哦，你给我马上搞定这件事情，但是watcher并不是立即就执行的，因为数据变动有时候不是一个，而是很多，立即执行的话会重复执行很多render函数或者其它数据变动的函数，执行效率会变低。然而watcher把自己交给调度器","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Scheduler","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null},"content":[{"type":"text","text":"调度器会把watcher添加到队列中，当然在队列中也不会执行的，而是将队列交给","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"nextTick","attrs":{}}],"attrs":{}},{"type":"text","text":"队列，nextTick里面的函数全是在微队列的，等同步代码执行完成后，会异步地执行函数fn1、fn2、watcher等等，这一步相当于重新执行了watcher，然后又重新执行了render函数，就这样地循环往复。","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"😛 好了， 以上就是我今天的分享，大家对于vue2响应式原理还有什么问题可以在评论区讨论鸭～","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"记得点赞 👍 支持一下哦～ 😘","attrs":{}}]}]}