[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fxKQaHQImJ0IVhyMda1ZaG5lOOrvWuTQ0IgIynQTEo1g":3},{"meta":4,"toc":21,"html":24,"hasMore":17,"views":9,"prev":25,"next":35,"seriesList":9},{"slug":5,"title":6,"description":7,"date":8,"updated":9,"tags":10,"series":9,"seriesOrder":14,"cover":9,"price":15,"priceUsd":16,"paid":17,"draft":18,"words":19,"minutes":20},"vue-reactivity-deep-dive","Vue 响应式系统源码走读：从 effect 到调度器","逐行拆解 Vue 3 reactivity 的依赖收集与派发更新机制，理解 weakmap 三层结构与异步调度批处理。","2026-08-08",null,[11,12,13],"Vue","源码","JavaScript",0,9.9,1.99,true,false,597,2,[22],{"id":23,"text":23,"depth":20},"先看三层结构","\u003Cp>Vue 3 的响应式系统是 \u003Ccode>@vue\u002Freactivity\u003C\u002Fcode> 这个独立包，不到 3k 行代码却设计精妙。这篇长文带你看懂它的两个核心问题：\u003Cstrong>依赖是怎么收集的，更新是怎么调度的\u003C\u002Fstrong>。\u003C\u002Fp>\n\u003Ch2 id=\"先看三层结构\">\u003Ca href=\"#先看三层结构\">先看三层结构\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>响应式对象的关系藏在一个三层 WeakMap 里：\u003C\u002Fp>\n\u003Cpre class=\"shiki vesper\" style=\"background-color:#101010;color:#FFF\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>targetMap: WeakMap<target, Map<key, Dep>>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>  └── 每个响应式对象 -> 它的每个属性 -> 一个 Set<ReactiveEffect>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"slug":26,"title":27,"description":28,"date":29,"updated":9,"tags":30,"series":9,"seriesOrder":14,"cover":9,"price":14,"priceUsd":9,"paid":18,"draft":18,"words":34,"minutes":20},"nuxt3-paid-blog-architecture","用 Nuxt 3 搭建一个按篇付费的博客","从渲染策略、内容管线到付费墙安全模型，完整拆解本站的架构设计思路。","2026-08-02",[31,32,33],"Nuxt","架构","本站故事",577,{"slug":36,"title":37,"description":38,"date":39,"updated":9,"tags":40,"series":44,"seriesOrder":45,"cover":9,"price":46,"priceUsd":47,"paid":17,"draft":18,"words":48,"minutes":20},"postgres-index-internals","Postgres 索引原理：B+树、TOAST 与真实优化案例","从页结构到 B+ 树分裂，再到真实查询优化的完整路径，配合 Supabase 实战。","2026-08-12",[41,42,43],"Postgres","数据库","Supabase","数据库内功",1,19.9,2.99,836]