此外我们这里学习 SolidJS，并不会像学习 Vue 或者 React 那样全面而深入地学习每一个 API 的实现原理，我们学习的目的是 是理解 SolidJS 的数据响应式原理，然后则是它是怎么不通过虚拟DOM实现geng新的，为我们后续 Vue Vapor 的全面学习打下基础。

再者绝大部分框架的实现也遵循八二原理，即核心实现只有 % 的代码，其余 % 的代码dou是在处理各种性Neng问题和边界问题。所以我们只要学习了 SolidJS 的数据响应式原理和怎么不通过虚拟DOM实现geng新这两块知识就基本理解了 SolidJS 的实现原理了。

说实话，咱就是说学习一个新的框架，Ru果不去深入了解其实现原理，总是会觉得心里没底，你懂的。

本文将深入讲解 SolidJS 中实现响应式系统的方式,带大家探索 SolidJS 的响应式系统实现。.作为现代前端框架中的一员,SolidJS 为开发者提供了极细粒度的响应式系统.

在这里我们就Ke以出几点， 是所谓数据响应式并不一定需要像 Vue 那样通过 Object.defineProperty 或者 Proxy 来实现，然后 Vue、Mobx、Solid 的数据响应式的实现dou应用了发布订阅模式，使用发布订阅模式是为了实现依赖追踪，这就又佐证了我们前面所说的，依赖追踪的基础是发布订阅模式。

const = createSignalconst el = document.createElement+ el.addEventListener => {+ setCount+ el.textContent = count+ })el.textContent = countconst root = document.getElementByIdroot.appendChild

我们Ke以kan到我们通过手动操作 DOM 的方式实现点击按钮后修改按钮元素中的数字。我们知道操作 DOM 这些底层操作应该交给框架自动帮我们干，而不应该我们自己家手动操作，所以我们希望点击按钮的时候，我们只需要执行 setCount 即可，设置之后应该自动执行 el.textContent = count，那么这个就是数据响应式框架需要Zuo的事情。

八二原理的实践印证 我们仅用数十行代码就实现了 createSignalcreateEffect 和基本的 DOM 插入geng新，证明了框架核心逻辑并不复杂。真正的工程复杂度体现在边缘情况和跨平台适配。学框架时先抓住这 % 的核心，就Neng快速理解其余 % 的设计意图。

const root = document.getElementByIdrender, root)

此外组件 App 中通过 createEffect 实现geng新，目前还是跟 App 组件中的功Neng强关联的，我们也需要把它进行封装变成一个弱关联，我们把这一动作行为命名 insert，所以我们就封装一个 insert 函数。

const = createSignalconst el = document.createElementel.addEventListener => { setCount- el.textContent = count})- el.textContent = count+ createEffect => {+ el.textContent = count+ })const root = document.getElementByIdroot.appendChild

对比学习，融会贯通

为什么百度不收录我的网站呢？

可Neng是因为你的网站内容不够丰富，或者是你的网站结构不够清晰，或者是你没有提交你的网站到百度搜索引擎，亦或者是你的网站存在一些问题，例如死链、关键词堆积等，这些dou是可Neng导致百度不收录你的网站的原因。

其实我们在上一篇文章中Yi经基本实现了 createSignal 的原理，但为了geng接近 SolidJS 源码结构，我们这里按源码结构重新实现一遍，代码如下：

// 我们Ke以根据场景，通过解构随意命名通过 createSignal 创建返回的两个数组元素，这里我们把 getter 命名为 count，setter 命名为 setCountconst  = createSignalcreateEffect => {  console.log)})setCount

无虚拟 DOM 不等于放弃性Neng SolidJS 通过 createEffect 将geng新粒度精确到具体的 DOM 节点。状态变化时只有直接依赖该状态的副作用函数会重新运行，从而直接修改对应 DOM。这绕过了虚拟 DOM 的 diff 开销，尤其适合高频geng新或大型列表的场景。Vue 的 Vapor 模式也正在探索类似思路，理解 SolidJS 是为后续学习 Vue Vapor 打下坚实基础。

Zui后,希望大家Neng够掌握手写一个迷你版solidjs的核心技术. 我是一个程序员Cobyte,现在Yi转向研究 AI Agent，欢迎添加 v: icobyte，学习交流 AI Agent 应用开发。