Vue-js设计与实现-渲染器的设计
渲染器是 Vue.js 中非常重要的一部分，很多功能依赖渲染器来实现。渲染器也是框架性能的核心，其实现直接影响框的性能。
本章我们使用 @vue/reactivity 包提供的响应式 API VueReactivity进行讲解，以下是一个基本的代码：
12345678910111213141516171819 <script src="https://unpkg.com/@vue/reactivity@3.0.5/dist/reactivity.global .js"></script><body> <div id="app"></div> <script> const { ref, effect } = VueReactivity; function render(domString,container){ container.innerHTML = domString; ...
Vue-js设计与实现-原始值的响应式方案-ref
原始值指的是 Boolean、Number、 String、Symbol、undefined 和 null 等类型的值。Proxy无法直接对原始值进行代理，因此想要将原始值变成响应式数据，就必须对其做一层包裹，也就是使用ref。
ref的引入由于Proxy 的代理目标必须是非原始值，所以我们没有任何手段拦截对原始值的操作：
12let a = 'hello'a = 'react' // 无法拦截此修改
为了解决此问题，我们的唯一办法是，采用一个非原始值去包裹这个原始值，就比如使用一个对象包裹此原始值后传给reactive。但直接这样做既不方便（需要手动包裹对象），也不规范（对应原始值的属性可以随意命名）。
为了规范这类原始值的使用，我们手动封装一个叫做ref的函数，实现以上功能：
123456789101112function ref(value){ const wrapper = { value } return reactive(wrapper)}const refva ...
Vue-js设计与实现-非原始值的响应式方案-reactive
Object代理本节着手实现响应式数据。前面我们使用get去拦截对属性的读取操作。但在响应系统中，读取是一个很宽泛的概念，有很多操作都涉及到读取这一行为。下面列出了对一个普通 对象的所有可能的读取操作:
访问属性：obj.foo。
判断对象或原型上是否存在给定的 key：key in obj。
使用 for...in 循环遍历对象：for (const key in obj) {}。
对于属性读取(obj.foo)，我们知道这可以通过get实现，而对于in和for in应该如何拦截呢？
这是我们在上一节里完成的部分基本代码，在此基础上实现后续功能：
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071const bucket = new WeakMap();let activeEffect = null;const effectStack = [] ...
Vue.js设计与实现--响应式设计
本博客为Vue.js设计与实现中第四章的学习笔记。详情请查阅原书。
响应式数据基本结构响应式数据Proxyvue3采用proxy代理进行数据的双向绑定，这是一个最基础的proxy：
12345678910const data = { name: 'John Doe', age: 25 };const a = new Proxy(data, { // get 拦截器：当访问属性时触发 // 参数1：原始对象，2：属性，3：代理对象 get(target, key, receiver) { /* ... */ }, // set 拦截器：当设置属性时触发 // 参数1：原始对象，2：属性，3：新值，4：代理对象 set(target, key, newVal, receiver) { /* ... */ },});
proxy对data进行代理，在访问属性时触发getter方法，设置属性时触发setter方法。
1234567891011// 一个最基础的proxy例子cons ...
JS笔记-fn.apply、this、防抖函数
JS笔记-fn.apply、this、防抖函数
到底为什么写func.apply(this, arguments)掘金
防抖函数是指，在一定时间间隔内，如果没有重复触发函数，才会执行函数体的代码（防止在很短的时间里多次触发的函数），例如网络请求，input输入，浏览器resize监听等。
以下是防抖函数的一个基本实现，通过闭包将主函数体放在timer计时器里，如果二次调用了func，就会通过clearTimeout取消计时器的后续操作，达到防止函数重复触发的效果。
123456789function debounce(func, delay) { let timer = null; return function () { if (timer) clearTimeout(timer); timer = setTimeout(() => { func.apply(this, arguments); }, delay); };}
其中这个fu ...
前端项目-组件库
vite+typescript实现vue3组件库
本文主要参考：Vite+TS带你搭建一个属于自己的Vue3组件库 - 公众号-web前端进阶 - 博客园
环境配置一文吃透 pnpm 如何使用 workspace 构建 monorepo，与 npm、yarn 的用法对比（pnpm 9.x 内部安装依赖问题 link-workspace-packages） | kshao-blog - 前端知识记录
monorepo & workspace**monorepo: **利用单一仓库来管理多个 packages 的一种策略，很多项目如Vue3，ElementUI都采用了此模式。可以使用pnpm、yarn、lerna等工具打造menorepo，作为组件库的环境。
**workspace: **由上述单仓多包催生的管理方式，workspace 是 npm、yarn、pnpm 等包管理工具提供的一种特性，用于管理多个包的依赖关系。合理配置 workspace 后，包之间的依赖将在 install 时中直接处理。
这里使用pnpm进行搭建。
pnpm安装:npm install pnpm - ...
websocket实现简单聊天室
WebSocket搭建服务器WebSocket建立在TCP协议上，可以实现浏览器与服务器全双工通信。服务器可以主动发消息给客户端，实现实时推送。与http不同，websocket是一种持久协议。
WebSocket 教程 - 阮一峰的网络日志 (ruanyifeng.com)
nodejs使用websocket可以实现基本服务器搭建：
12345678910111213141516171819202122232425262728293031323334const ws = require('nodejs-websocket')const PORT = 3000// 1.用户连接服务器自动调用函数，每连接一个用户会创建connect对象const server = ws.createServer(connect=>{ console.log("用户已连接") broadcast("用户进入聊天") // 2.服务器接收浏览器用户数据 connect.on('text',dat ...
基于YOLOv2的目标跟踪云台(K210+STM32)
嵌入式EdgeAI招新项目–目标跟踪云台一个基于yolov2的利⽤PID算法控制舵机移动摄像头实现实时跟踪特定物体的云台。
github:arigreat/edgeAI_Target-tracking-gimbal: 嵌入式EdgeAI招新项目–目标跟踪云台 (github.com)
七月总结
bec7de52725d515b319c097af8427aed400f008a622f7ebe57682396434ea6525f01c7683e2717b3f9528175e0d5fc0565652c3ae6185418c8470f6df32108955b47c6fdea3b1b9a555ba79f8ea7105675ab2ef0a3e483704cb9f277d584b8fba386759c28fc3b4a9513378c73fe405c93d06005a23a68980612a528e609118515d09cacaaec4b2a60a3212c132cc057c856cec6dff2b29962da9f30eae720a35252a6479c33e0d52c200f841a9ca9bed10fb0117e46da4a52582a017412b0ba33e36bc305bd3a94faa5073e4218b31d0b0f0e933b554f97709b8e9d8ccd1897090fa27a7968ee087e248c874cb6ff22b7fb01f0ae52fb471 ...
git操作
Learn Git Branching
https://www.bilibili.com/video/BV1HM411377j
初始化配置用户名:git config --global user.name "用户名"配置邮箱:git config --global user.email "用户邮箱"存储配置:git config --global credential.helper store查看配置:git config --global --list
参数设置：
仓库创建仓库本地创建:git init "仓库名",省略仓库名会直接在当前地址创建。
远程克隆：git clone <url>
四个区域和文件状态
文件操作文件状态
git status,可查看仓库内的状态
查看仓库文件
git ls-files
将文件添加到暂存区
git add <file>
文件提交
git commit，将暂存区的文件提交，不会提交工作区的文件。
git commit -m用于提交暂存区的文件
git commi ...