Vue.js 设计与实现

在上一节中，我们了解了如何实现响应式数据。但其实在这个过 程中我们已经实现了一个微型响应系统，之所以说“微型”，是因为它 还不完善，本节我们将尝试构造一个更加完善的响应系统。 从上一节的例子中不难看出

如前文所说，实现一个完善的响应系统要考虑诸多细节。而本节 要介绍的无限递归循环就是其中之一，还是举个例子： 可以看到，在 effect 注册的副作用函数内有一个自增操作 obj.foo++ ，该操作会

接着上文思考，如何才能让 obj 变成响应式数据呢？通过观察我 们能发现两点线索： 当副作用函数 effect 执行时，会触发字段 obj.text 的读取操 作； 当修改 obj.text 的值时，

副作用函数指的是会产生副作用的函数，如下面的代码所示： 当 effect 函数执行时，它会设置 body 的文本内容，但除了 effect 函数之外的任何函数都可以读取或设置 body 的文本内容。也

emit 用来发射组件的自定义事件，如下面的代码所示： 当使用该组件时，我们可以监听由 emit 函数发射的自定义事 件： 上面这段模板对应的虚拟 DOM 为： 可以看到，自定义事件 change 被

顾名思义，组件的插槽指组件会预留一个槽位，该槽位具体要渲 染的内容由用户插入，如下面给出的 MyComponent 组件的模板所 示： 当在父组件中使用 组件时，可以根据插槽的名 字来插入自定义的内容