vue3源码实战mini-vue

前言 Vue 父子组件间传值，最基础也是最经典的实现就是父到子使用 props 传值，子到父使用 emit 触发，这样数据都是从父组件传输过来的，保证了数据的单一流向。 上篇文章《组件props传值大

前言 修改测试项目 example 中 App.js，将其中一个子节点的渲染方式改成子组件，并传入数据count。 新建 Foo.js 实现的 props 功能需要满足一下 3 点： setup接受p

前言 在前面两篇文章中，我们已经实现了createApp，render函数等，可以将数据渲染到页面上。 推荐阅读： Vue中this是怎么直接拿到数据的？ createApp之后发生了什么？ 在渲染逻

前言 Vue 项目是从挂载app开始。通常main.js文件， 这里是使用了createApp方法接受一个组件App，然后基于这个方法返回的一个方法mount将这个应用挂载到id为app的div上。

前言 官方文档 对computed的定义： 另外，众所周知，计算属性具有缓存功能，因此我们可以将实现computed()方法的需求归纳为： computed接受的一个fn，返回值要用.value来访问

Vue3 中定义的ref类型的变量，在setup中使用这些变量是需要带上.value才可以访问，但是在template中却可以直接使用。 询其原因，可能会说 Vue 自动进行ref解包了，那具体如何实

前言 本文是 Vue3 源码实战专栏的第 8 篇，从 0-1 实现 ref 功能函数。 官方文档 中对ref的定义， 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部

前言 官方文档中对reactive的描述： 官方文档中对readonly的描述: 这意味着嵌套对象内的对象拥有和原对象一样的功能。 简单的来实践测试一下： 页面中显示四个true。 那测试用例可以完善

本文通过实现readonly方法，一步步展示重构的流程。 前言 readonly接受一个对象，返回一个原值的只读代理。 实现 Vue3 中readonly方法，先来看一下它的使用。 readonly是

基于上一篇文章中实现的effect方法，根据 Vue3 源码中单测，完善该方法的三点功能，分别是： runner: effect可以返回自执行的入参runner函数 scheduler: effect

通过上一篇文章已经初始化项目，集成了ts和jest。本篇实现Vue3中响应式模块里的reactive方法。 前置知识要求 如果你熟练掌握Map, Set, Proxy, Reflect，可直接跳过这部

前言 开新坑。 斥巨资购入大崔哥的 mini-vue 课程，为了改变自己东一榔头西一棒槌的学习状态，也是因为深刻思考了自己身无长物浑浑噩噩这么多年只会敲代码，别无出路，也只能提升自己继续走技术这条路，