顾名思义，Mini Vue是Vue的乞eg版。本文将按照Vue原理写一些核心API想法，就像伪代码一样。在这里，您只需写下核心想法而不处理任何边缘情况。
在实施之前，让我们谈谈VUE的原则。
实际上，Vue包含三个核心：
编译系统将将模板编译为函数（或H函数，类似于）。渲染系统执行这些功能。目前，可以生成虚拟节点。dom，Vue在创建或更新组件时使用此功能，并且在创建时在null上传递旧节点，并在下面提到特定逻辑。这次，您可以显示该功能浏览器。
扩展一点，虚拟DOM有什么好处？有两个点：
响应系统将监视一些数据，通过VUE2并传递VUE3。如果值更改，将通知渲染系统，并且渲染系统将基于算法调用该函数，以更新DOM。
两个扩展：
DIFF算法DIFF算法将根据DOM是否具有密钥来调用不同的补丁功能。没有密钥通话，就有一个电话。
上述差异中提到的API可以看到VUE3源代码，此链接将导航到vue-next/poffage/runtime core/src/renderer.js ring 1621.renderr.ts-vuejs/vue-next-github1s
为什么VUE3选择代理？
分为三个模块：渲染模块，响应模块和应用入口模块。
该模块实现3个API：
在这里，模仿Vue的手表和反应性。
收集依赖是响应系统的核心思想。收集依赖项可以确保不会收集重复依赖性。这是一个简化的版本。当实际收集依赖性时，数据（或属性）需要一个DEP实例来收集和使用其依赖性。这可以意识到，只有在使用其依赖性时，才能重新估算数据更改。
当调用dep.edepplip（）和dep.notify（）时，简化了当前的问题。
响应vue2意识到上述问题，什么时候调用dep.ect.ipend（）和dep.notify（）？
答案：数据的使用是awad.depplipt（）集合的依赖项，当更改数据时，请致电dep.notify（）通知渲染系统数据更改。
vue2使用object.defined property来劫持对象和设置器，这分别是依赖和通知。
在此处使用并保存DEP实例，例如反应性（{name：'hxy'，高度：186}），并以反应性对象为键创建一个弱图实例，然后在此对象中的每个属性都会创建一个with with with they as密钥的地图实例，这也是收集VUE3的数据结构。
讨论一个问题：为什么要使用弱图？
该对象是一组键/值对，其中键是弱的。键必须是一个对象，并且值可以任意。
以上是MDN对弱图的定义。这就是原因。当响应数据未用作null时，垃圾回收将有效释放对象的堆空间。在此时间不可用，因为弱图密钥是弱参考，并且其键不存在，并且DEP实例自然会被回收。
响应VUE3和上述实现之间的差异在于代理在反应函数中的使用
仅实现安装vnode的功能
测试Mini Vue目前已经实现了，您可以使用以下代码测试
显示结果
原始：https：//juejin.cn/post/7097112943287861261