- 综合排序
- 最热优先
- 最新优先
- 来自专栏偏前端工程师的驿站
petite-vue源码剖析-沙箱模型
在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式，而且能够读取当前作用域上的属性。而evaluate的实现如下：
61420编辑于 2022-05-09 - 来自专栏偏前端工程师的驿站
petite-vue源码剖析-从静态视图开始
示例：
<script type="module"> import { createApp } from 'https://unpkg.com/petite-vue */ bindContextMethods(ctx.scope) /* 根块对象集合 * petite-vue支持多个根块对象，但这里我们可以简化为仅支持一个根块对象。 另外，petite-vue中的作用域并不是一个普通的JavaScript对象，而是一个经过@vue/reactivity处理的响应式对象，目的是一旦作用域成员被修改，则触发相关副作用函数执行，从而重新渲染界面 待续 通过简单的例子我们对petite-vue的解析、调度和渲染过程有了一定程度的了解，下一篇我们将再次通过静态视图看看v-if和v-for是如何根据状态改变DOM树结构的。66130编辑于 2022-05-09 - 来自专栏偏前端工程师的驿站
petite-vue源码剖析-ref的工作原理
$refs.container.style.display = 'none' } } } }).mount('[v-scope]') 总结 下一篇《petite-vue源码剖析- 优化手段template详解》我们将着手解决petite-vue在线模板和在线渲染造成用户体验待优化的问题，敬请期待。
53730编辑于 2022-05-09 - 来自专栏偏前端工程师的驿站
petite-vue源码剖析-优化手段template详解
template>
<script type="module"> import { createApp } from 'https://unpkg.com/petite-vue <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue 后面我们将探索@vue/reactivity在petite-vue的使用，敬请期待。44510编辑于 2022-05-09 - 来自专栏偏前端工程师的驿站
petite-vue源码剖析-为什么要读源码？
什么是petite-vue？ 根据官方解释，petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是，面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。 style>
<script type="module"> import { createApp } from 'https://unpkg.com/petite-vue ，但离实际能与LayUI、MiniUI等DOM操作框架协作还有一段距离，这就需要我们熟悉petite-vue的内部机制从而结合项目现有技术栈； petite-vue源码确实很少，结合@vue/reactivity 待续 后续我们会以应用示例为入口，逐行阅读理解petite-vue和@vue/reactivity，并实现自己的petite-vue和响应式系统，敬请期待:) 尊重原创，转载请注明来自：https:/63510编辑于 2022-05-09 - 来自专栏code秘密花园
5kb 的 Vue：尤雨溪发布新作 petite-vue
与标准 Vue 相比，petite-vue 具备相同的模板语法和响应式心理模型，而二者的差别在于 petite-vue 专门针对在服务器框架渲染的一个现有 HTML 页面上 “sprinkle” 少量交互进行了优化 尤雨溪透露 petite-vue 与 Vue 1 的工作原理类似，但实现细节更优：petite-vue 遍历实际 DOM，并利用 @vue/reactivity 连接 (attach) 细粒度 reactive 项目地址： https://github.com/vuejs/petite-vue 接下来我们来看 petite-vue 的更多细节。 petite-vue 可以不经过 build 步骤直接使用，只需从 CDN 处加载即可： <script src="https://unpkg.com/<em>petite-vue</em>" defer init></ init 属性使 petite-vue 自动 query 并初始化页面上被 v-scope 标记的所有元素。
49530发布于 2021-07-16 - 来自专栏偏前端工程师的驿站
petite-vue源码剖析-逐行解读@vuereactivity之reactive
在petite-vue中我们通过reactive构建上下文对象，并将根据状态渲染UI的逻辑作为入参传递给effect，然后神奇的事情发生了，当状态发生变化时将自动触发UI重新渲染。 @vue/reactivity功能十分丰富，而petite-vue仅使用到reactive和effect两个最基本的API，作为入门本文将仅仅对这两个API进行源码解读。 问题3的解析 另外，在开篇《petite-vue源码剖析-从静态视图开始》中创建作用域链createScopedContext如下代码 receiver === reactiveProxy && !
98030编辑于 2022-05-09 - 来自专栏前端宇宙
5kb 的 Vue：尤雨溪发布新作 petite-vue
与标准 Vue 相比，petite-vue 具备相同的模板语法和响应式心理模型，而二者的差别在于 petite-vue 专门针对在服务器框架渲染的一个现有 HTML 页面上 “sprinkle” 少量交互进行了优化 尤雨溪透露 petite-vue 与 Vue 1 的工作原理类似，但实现细节更优：petite-vue 遍历实际 DOM，并利用 @vue/reactivity 连接 (attach) 细粒度 reactive 项目地址： https://github.com/vuejs/petite-vue 接下来我们来看 petite-vue 的更多细节。 petite-vue 可以不经过 build 步骤直接使用，只需从 CDN 处加载即可： <script src="https://unpkg.com/<em>petite-vue</em>" defer init></ init 属性使 petite-vue 自动 query 并初始化页面上被 v-scope 标记的所有元素。
80930发布于 2021-07-16 - 来自专栏漫画前端
尤雨溪新作品功能尝鲜，据说仅5.8kb？
image.png 打开尤大大的GitHub，发现多了个叫 petite-vue 的东西，好家伙，Vue3 和 Vite 还没学完呢，又开始整新东西了？ image.png 从名字来看可以知道 petite-vue 是一个 mini 版的vue，大小只有5.8kb，可以说是非常小了。 据尤大大介绍，petite-vue 是 Vue 的可替代发行版，针对渐进式增强进行了优化。 它提供了与标准 Vue 相同的模板语法和响应式模型： 大小只有5.8kb Vue 兼容模版语法 基于DOM，就地转换 响应式驱动 上活 下面对 petite-vue 的使用做一些介绍。 <body> <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?
67130发布于 2021-07-29 - 来自专栏thinkphp+vue
petite-vue源码剖析-双向绑定`v-model`的工作原理
双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on，而且还能利用通过petite-vue input -> compositionupdate(data="日") -> input -> compositionend(data="日") 由于在输入法编辑器上输入字符时会触发input事件，所以petite-vue boolean ) 复制代码 添加监听和发布事件 element.addEventListener(type: string) element.dispatchEvent(e: Event) 复制代码 针对petite-vue
1.1K30编辑于 2022-03-15 - 来自专栏魔术师卡颂
如何在不看源码情况下学petite-vue源码
最终选择了最近发布的petite-vue，原因如下： 代码量少（只有5.8kb），且源码模块化程度高（相比于React），易读 基于Vite构建，执行yarn dev就能开始调试源码 没有虚拟DOM、编译时方案 接下来，我就以petite-vue为例为大家示范学源码的正确姿势。 怎么快怎么来 可以将petite-vue理解为：用真实DOM取代Vue模版的简易Vue。 接着执行如下代码，完成petite-vue初始化： createApp({count: 0}).mount() 此时页面： ? 读框架源码切忌一上手就从入口函数一路调试，很容易就懵逼了。 add 1</button> walk "add 1" walk
0
walk "0" 从打印结果看，这是个「深度优先遍历」（如果有子节点就遍历子节点，没有子节点就遍历兄弟节点） 显然，petite-vue 所以，petite-vue的工作原理，主要包括两点： mount时深度优先遍历DOM，对有状态的DOM（比如{{count}}
）建立状态与更新DOM的方法之间一一对应的关系 update时找到该状态对应的更新61330发布于 2021-07-30 - 来自专栏偏前端工程师的驿站
petite-vue源码剖析-v-if和v-for的工作原理
的工作原理
<script type="module"> import { createApp } from 'https://unpkg.com/petite-vue 的工作原理 <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue81321编辑于 2022-05-09 - 来自专栏跨平台全栈俱乐部
尤雨溪的5KB petite-vue源码解析
写在开头 近期尤雨溪发布了5kb的petite-vue,好奇的我,clone了他的源码，给大家解析一波。 最近由于工作事情多，所以放缓了原创的脚步！ 大家谅解 想看我往期手写源码+各种源码解析的可以关注我公众号看我的GitHub,基本上前端的框架源码都有解析过 正式开始 petite-vue是只有5kb的vue,我们先找到仓库，克隆下来 克隆下来后发现 ，用的是vite + petite-vue + 多页面形式启动的 启动命令： 然后打开即可看到页面: 保姆式教学 项目已经启动了，接下来我们先解析下项目入口,由于使用的构建工具是vite,从根目录下的
35110编辑于 2022-03-22 - 来自专栏偏前端工程师的驿站
petite-vue源码剖析-逐行解读@vue-reactivity之effect
我们回顾以下petite-vue中提供的调度器吧! 还记得petite-vue中的context吗？ = scope || activeEffectScope if (scope && scope.active) { scope.effects.push(effect) } } 总结 petite-vue
89330编辑于 2022-05-09 - 来自专栏偏前端工程师的驿站
petite-vue源码剖析-事件绑定`v-on`的工作原理
在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件，而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。 而事件绑定在petite-vue中就是一个指令(directive)，和其他指令类似。
63320编辑于 2022-05-09 - 来自专栏偏前端工程师的驿站
petite-vue源码剖析-属性绑定`v-bind`的工作原理
属性绑定、事件绑定和v-modal底层都是通过指令(directive)实现的，那么什么是指令呢？我们一起看看Directive的定义吧。
77721编辑于 2022-05-09 - 经过petite-vue 总结 今天我们学习了一个框架petite-vue，他的底层实现由多段混乱的男女关系组成，上层是一个个直接操作DOM的方法。 不知道看完后你有没有兴趣深入了解下这种关系呢？来自专栏魔术师卡颂
全自动jQuery与渣男的故事
有的，这就是最近出的petite-vue。 阅读完本文，你会从原理层面了解该框架，如果你还有精力，可以在此基础上深入框架源码。 click="num++">add 1</button>
51320发布于 2021-07-30
petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive
本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。
Going Bundleless: ES Modules
It's really a long period I have been out of touch to front-end trending, until I try to add petite-vue During exploring the petite-vue codebase, I discovered the brand new build tooling Vite, which is a leaner
前言
双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on，而且还能利用通过petite-vue input -> compositionupdate(data="日") -> input -> compositionend(data="日") 由于在输入法编辑器上输入字符时会触发input事件，所以petite-vue cancelable: boolean ) 添加监听和发布事件 element.addEventListener(type: string) element.dispatchEvent(e: Event) 针对petite-vue $ref获取元素实例，下一篇《petite-vue源码剖析-ref的工作原理》我们一起来探索吧！
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号