Vue2 Object变化侦测:从getter/setter到Dep/Watcher/Observer

Vue2 Object变化侦测:从getter/setter到Dep/Watcher/Observer

2026-07-09

Vue2通过Object defineProperty拦截属性读写,结合Observer、Dep和Watcher实现响应式:读取时收集依赖,修改时触发通知。Observer递归转换对象属性,defineReactive设置getter setter,Dep管理订阅列表,Watcher执行更新。该机制精准追踪数据变化并通知组件,再经虚拟DOMdiff完成视图更

watch

Vue2通过Object defineProperty拦截属性读写,结合Observer、Dep和Watcher实现响应式:读取时收集依赖,修改时触发通知。Observer递归转换对象属性,defineReactive设置getter setter,Dep管理订阅列表,Watcher执行更新。该机制精准追踪数据变化并通知组件,再经虚拟DOMdiff完成视图更

AI重塑应用开发:Vue与Vite给出新答案

AI重塑应用开发:Vue与Vite给出新答案

2026-07-09

AI正重写应用开发规则,Vue与Vite给出新答案,重塑从开发到部署的完整路径。Vue&ViteConf2026将于7月18日在上海举办,EvanYou主题演讲,探讨AI时代框架与工具链的演进,涵盖核心生态、AIAgent、全栈部署及Vue走向Native等议题。

ai

AI正重写应用开发规则,Vue与Vite给出新答案,重塑从开发到部署的完整路径。Vue&ViteConf2026将于7月18日在上海举办,EvanYou主题演讲,探讨AI时代框架与工具链的演进,涵盖核心生态、AIAgent、全栈部署及Vue走向Native等议题。

TinyVue文本超长自动提示指令优雅方案

TinyVue文本超长自动提示指令优雅方案

2026-07-09

TinyVue的v-auto-tip指令自动探测文本是否超长,鼠标移入弹出tooltip显示完整内容。支持always强制显示、自定义content(含JSX VNode)、动态开关,将文本溢出提示简化为一行指令,无需手动判断。

其他

TinyVue的v-auto-tip指令自动探测文本是否超长,鼠标移入弹出tooltip显示完整内容。支持always强制显示、自定义content(含JSX VNode)、动态开关,将文本溢出提示简化为一行指令,无需手动判断。

从零实现懂分寸的文本省略组件

从零实现懂分寸的文本省略组件

2026-07-09

通过比较scrollWidth与clientWidth动态判断文本溢出,结合ResizeObserver监听容器尺寸变化,将溢出状态映射至tooltip的disabled属性,实现未溢出时彻底不渲染tooltip。组件覆盖内容、行数、尺寸等场景,尊重用户注意力,优化性能。

项目管理

通过比较scrollWidth与clientWidth动态判断文本溢出,结合ResizeObserver监听容器尺寸变化,将溢出状态映射至tooltip的disabled属性,实现未溢出时彻底不渲染tooltip。组件覆盖内容、行数、尺寸等场景,尊重用户注意力,优化性能。

Cesium黄昏效果:一键开关与滑块调节浓烈度

Cesium黄昏效果:一键开关与滑块调节浓烈度

2026-07-09

基于Cesium后处理着色器实现黄昏效果,支持一键开启关闭和滑块实时调节浓烈度。采用屏幕竖向分层渲染,天空远景暖色雾浓,近景地形建筑保留自然细节,通过统一强度参数控制压暗、暖色调与雾浓度。

其他

基于Cesium后处理着色器实现黄昏效果,支持一键开启关闭和滑块实时调节浓烈度。采用屏幕竖向分层渲染,天空远景暖色雾浓,近景地形建筑保留自然细节,通过统一强度参数控制压暗、暖色调与雾浓度。

Vite生产环境禁用CSS代码分割解决样式加载顺序混乱

Vite生产环境禁用CSS代码分割解决样式加载顺序混乱

2026-07-09

Vite默认启用CSS代码分割,将异步组件样式提取为独立文件动态加载,导致生产环境样式加载顺序不可控,自定义样式被覆盖。通过设置build cssCodeSplit:false禁用分割,将所有CSS合并到单个文件,可彻底解决样式顺序混乱问题。

其他

Vite默认启用CSS代码分割,将异步组件样式提取为独立文件动态加载,导致生产环境样式加载顺序不可控,自定义样式被覆盖。通过设置build cssCodeSplit:false禁用分割,将所有CSS合并到单个文件,可彻底解决样式顺序混乱问题。

Vue2中非父子组件通信与动态组件的实现方法

Vue2中非父子组件通信与动态组件的实现方法

2026-07-09

Vue2中非父子通信可通过状态提升、EventBus、全局事件总线实现。状态提升将共享数据移至公共祖先,适合浅层树;EventBus利用独立Vue实例发布订阅,解耦任意组件;全局事件总线挂载于Vue prototype。此外,动态组件根据变量名切换渲染,全局组件无需重复注册。

其他

Vue2中非父子通信可通过状态提升、EventBus、全局事件总线实现。状态提升将共享数据移至公共祖先,适合浅层树;EventBus利用独立Vue实例发布订阅,解耦任意组件;全局事件总线挂载于Vue prototype。此外,动态组件根据变量名切换渲染,全局组件无需重复注册。

TinyVue时间线组件全方位实战指南:业务演进脉络清晰

TinyVue时间线组件全方位实战指南:业务演进脉络清晰

2026-07-09

面向企业级业务系统,时间线组件支持横向与竖向两种展示方式,具备数据逆序、字段自定义映射及插槽深度定制能力,通过时间节点项实现节点差异化控制,可轻松构建清晰优雅的业务流程演进时间线。

其他

面向企业级业务系统,时间线组件支持横向与竖向两种展示方式,具备数据逆序、字段自定义映射及插槽深度定制能力,通过时间节点项实现节点差异化控制,可轻松构建清晰优雅的业务流程演进时间线。