高级前端工程师

偏前端工程师的驿站

从部署到实践，即刻拥有你的专属龙虾助手

OpenClaw开发者专区🦞🦞🦞

自行/邀约他人一键搬运博客，享价值百万资源包

腾讯云自媒体同步曝光计划

往期视频·干货材料·成员作品 最新动态

腾讯技术创作特训营知识专栏

新邀入驻腾讯云开发者社区，福利多多！

echarts-for-react在对echarts进行轻量级封装的基础上，额外提供图表尺寸自适应容器尺寸的这小而实用的功能，而这功能的背后就是本文想介绍的size-sensor了。

React魔法堂：size-sensor源码略读

在当前工业4.0和智能制造的产业升级浪潮当中，智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢？对于React应用而言，直接使用ECharts并不是最高效且优雅的方式，而echarts-for-react则是针对React应用对ECharts进行轻量封装和增强的工具库。

React魔法堂：echarts-for-react源码略读

在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式，而且能够读取当前作用域上的属性。而evaluate的实现如下：

petite-vue源码剖析-沙箱模型

当我们通过effect将副函数向响应上下文注册后，副作用函数内访问响应式对象时即会自动收集依赖，并在相应的响应式属性发生变化后，自动触发副作用函数的执行。

petite-vue源码剖析-逐行解读@vue-reactivity之effect

本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。

petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive

在petite-vue中我们通过reactive构建上下文对象，并将根据状态渲染UI的逻辑作为入参传递给effect，然后神奇的事情发生了，当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢？
 @vue/reactivity功能十分丰富，而petite-vue仅使用到reactive和effect两个最基本的API，作为入门本文将仅仅对这两个API进行源码解读。

petite-vue源码剖析-逐行解读@vue/reactivity之reactive

<template>是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为

petite-vue源码剖析-优化手段template详解

ref内部的工作原理十分简单，其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的refs对象中，那么我们就可以通过this.refs获取对应的元素实例。但由于作用域继承上有点小窍门，所以我们能从this.

petite-vue源码剖析-ref的工作原理

双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on，而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。

前言

在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件，而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。而事件绑定在petite-vue中就是一个指令(directive)，和其他指令类似。

petite-vue源码剖析-事件绑定`v-on`的工作原理

在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理，而这里我们将深入了解在更新渲染时v-for是如何运作的。

petite-vue-源码剖析-v-for重新渲染工作原理

属性绑定、事件绑定和v-modal底层都是通过指令(directive)实现的，那么什么是指令呢？我们一起看看Directive的定义吧。

petite-vue源码剖析-属性绑定`v-bind`的工作原理

我们看到在v-if和v-for的解析过程中都会生成块对象，而且是v-if的每个分支都对应一个块对象，而v-for则是每个子元素都对应一个块对象。其实块对象不单单是管控DOM操作的单元，而且它是用于表示树结构不稳定的部分。如节点的增加和删除，将导致树结构的不稳定，把这些不稳定的部分打包成独立的块对象，并封装各自构建和删除时执行资源回收等操作，这样不仅提高代码的可读性也提高程序的运行效率。

petite-vue源码剖析-v-if和v-for的工作原理

静态视图是指首次渲染后，不会因UI状态变化引发重新渲染。其中视图不包含任何UI状态，和根据UI状态首次渲染后状态不再更新两种情况，本篇将针对前者进行讲解。

petite-vue源码剖析-从静态视图开始

根据官方解释，petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是，面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。

petite-vue源码剖析-为什么要读源码？

Cookies are strings of data that are stored directly in the browser. They are a part of HTTP protocol, defined by RFC 6265 specification.

Another Intro for Cookies

There is no other great moment to head into the world of TypeScript instead of right now. Angular is in TypeScript, React is in TypeScript, and even Vue3 is in TypeScript. That means it's a skill we must equip with rather than wait and see.

TypeScript Crash Course: Property Access Modifiers

First of all, symbol is a built-in primitive type. And it's guaranteed to be unique. Symbols are often used to add unique property keys to an object won't collide with keys that any other code might add to the object. And the properties under the Symbol key are hidden from any mechanisms other code will typically use to access the object(like for...in, for...of, Object.keys, Object.getOwnPropertyNames and JSON.stringify etc.), but can be accessed by Object.getOwnPropertySymbols and Reflect.ownKeys (which will return both string and symbol keys).

Yet Another Intro for Symbol

Hey, guys! The next generation of Vue has released already. There are not only the brand new composition API, much more powerful and flexible reactivity system, first-class render function, but also the natural performance with building off the modern browsers.

Source Code Reading for Vue 3: How does `hasChanged` work?

As we tell, there're tons of posts talking about event loop, the basic of the basic knowledge of JavaScript running mechanism.

Yet Another Intro to Event Loop

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

腾讯云开发者社区推出了偏前端工程师的驿站专栏，为你提供了偏前端工程师的驿站的相关文章，致力于帮助开发者快速成长与发展。

偏前端工程师的驿站

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐