vue源码剖析
petite-vue源码剖析-沙箱模型
在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式，而且能够读取当前作用域上的属性。而evaluate的实现如下： const evalCache: Record<string, Function> = Object.create(null) export const evaluate = (scope: any, exp: s
日期 2023-06-12 10:48:40
petite-vue源码剖析-逐行解读@vue-reactivity之effect
当我们通过effect将副函数向响应上下文注册后，副作用函数内访问响应式对象时即会自动收集依赖，并在相应的响应式属性发生变化后，自动触发副作用函数的执行。 // ./effect.ts export funciton effect<T = any>( fn: () => T, options?: ReactiveEffectOptions ): ReactiveEff
日期 2023-06-12 10:48:40petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive
本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。 Map/WeakMap/Set/WeakSet的操作 由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本，这里我们只研究Map和Set即可。 Set的属性和方法 size: number 为访问器属性(accessor property)，返回Set对象中
日期 2023-06-12 10:48:40
petite-vue源码剖析-逐行解读@vue/reactivity之reactive
在petite-vue中我们通过reactive构建上下文对象，并将根据状态渲染UI的逻辑作为入参传递给effect，然后神奇的事情发生了，当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢？ @vue/reactivity功能十分丰富，而petite-vue仅使用到reactive和effect两个最基本的API，作为入门本文将仅仅对这两个API进行源码解读。 一切源于Proxy
日期 2023-06-12 10:48:40petite-vue源码剖析-优化手段template详解
什么是<template>元素？ <template>是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为 通过<template>元素属性content获取已实例化的HTML元素(不是字符串而已) <template id="tpl"> <div>a</div> <div>b&
日期 2023-06-12 10:48:40petite-vue源码剖析-ref的工作原理
ref内部的工作原理十分简单，其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的$refs对象中，那么我们就可以通过this.$refs获取对应的元素实例。但由于作用域继承上有点小窍门，所以我们能从this.$refs获取的元素实例还是需要注意一下。下面让我为你一一道来吧！ 深入ref工作原理 //文件 ./src/directives/ref.ts expo
日期 2023-06-12 10:48:40petite-vue源码剖析-双向绑定`v-model`的工作原理
前言 双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on，而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。 深入v-model工作原理 export const model: Di
日期 2023-06-12 10:48:40petite-vue源码剖析-事件绑定`v-on`的工作原理
在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件，而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。而事件绑定在petite-vue中就是一个指令(directive)，和其他指令类似。 深入v-on的工作原理 walk方法在解析模板时会遍历元素的特性集合el.attributes，当属性名称name匹配v-on或@时，则将属性名称和属性值压入d
日期 2023-06-12 10:48:40
petite-vue-源码剖析-v-for重新渲染工作原理
在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理，而这里我们将深入了解在更新渲染时v-for是如何运作的。 逐行解析 // 文件 ./src/directives/for.ts /* [\s\S]*表示识别空格字符和非空格字符若干个，默认为贪婪模式，即 `(item, index) in value` 就会匹配整个字符串。 * 修改
日期 2023-06-12 10:48:40
petite-vue源码剖析-属性绑定`v-bind`的工作原理
关于指令(directive) 属性绑定、事件绑定和v-modal底层都是通过指令(directive)实现的，那么什么是指令呢？我们一起看看Directive的定义吧。 //文件 ./src/directives/index.ts export interface Directive<T = Element> { (ctx: DirectiveContext<T>
日期 2023-06-12 10:48:40petite-vue源码剖析-v-if和v-for的工作原理
深入v-if的工作原理 <div v-scope="App"></div> <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' createApp({ App: { $template: ` &l
日期 2023-06-12 10:48:40petite-vue源码剖析-从静态视图开始
代码库结构介绍 examples 各种使用示例 scripts 打包发布脚本 tests 测试用例 src directives v-if等内置指令的实现 app.ts createApp函数 block.ts 块对象 context.ts 上下文对象 eval.ts 提供v-if="count === 1"等表达式运算功能 scheduler.ts 调度器 utils.ts 工具函数 wa
日期 2023-06-12 10:48:40petite-vue源码剖析-为什么要读源码？
什么是petite-vue？ 根据官方解释，petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是，面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。 具体的使用方式请参考GitHub，在这里我想展示两个示例: 示例1 - 在线渲染 <style> [v-cloak] { display: n
日期 2023-06-12 10:48:40