响应式数据根据数据类型【数组和对象】进行不同处理。
对象内部通过defineReactive方法,使用Object.defineProperty()监听数据属性的get进行数据依赖收集,再通过set完成数据更新。
数组则通过重写数组方法实现。扩展7个变更方法(push/pop/shift/unshift/splice/reverse/sort),通过监听这些方法收集依赖和派发更新。
多层对象通过递归实现监听,Vue3使用proxy实现响应式数据。响应式流程:defineReactive定义响应式数据;给属性增加dep收集对应的watcher;等数据变化进行更新。dep.depend——get取值,依赖收集;dep.notify——set设置,通知视图更新。
性能优化点:1. 对象层级过深;2. 不需要响应式数据不放在data;3. Object.freeze可以冻结数据。
Teleport
将组件的渲染内容传送到 DOM 的其他位置,解决布局样式隔离问题。内容渲染在目标 DOM,但逻辑仍属于原组件树(保持响应式、生命周期、事件等)Vue3 中将 Teleport 作为 ...
开发工具准备:
根据个人喜欢选择IDE,我使用的是WebStorm,推荐使用Atom和VSCode;
安装git base和node.js;
安装vue-cli,命令npm i -g @vue/cli;
新建vue-cli项目:
方法一:通过图形界面进行安装vue ui;
方法二:通过命令行安装vue create project-name
运行项目npm run serve,端口8080。
双向绑定 v-model双向绑定大多用于表单事件,通过监听使用者输入的事件来更新内容。
现阶段大部分工作在App.vue上,template与普通写法一致,js写法:
123456789export default { name: 'app', data() { return { title: 'vue.js', myname: '请输入名字', }; },};
去掉空白符.trim直接在v-model后加上.trim即可。
1 ...
Vue和Angular、React.js的相同点和不同点?
与React的相同:
都使用了Virtual DOM
提供了响应式和组件化的视图组件
将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。
与React的区别:
组件的响应式渲染
React的组件的数据状态发生变化时,它会以该组件为根,重新渲染整个组件子树;而Vue不只去渲染需要渲染的组件。
HTML+CSS的编写
React使用的JSX语法,将HTML、CSS和JS混写;而Vue使用的是templates模板方式,完全融合与经典的Web技术。
与Angular的区别:
与Angular 1对比,Vue的性能更加优越,Angular性能会随着watcher的增加而变慢,而且Angular中一些watcher会触发另一个更新,使得“脏检查循环”可能会运行多次。
Angular事实上必须用TypeScript来开发,而且Angular对于TS的支持非常全面,而Vue暂时对于TS的支持还在改进阶段。
Vue的体积更小,一个包含了 vuex + vue-router 的 Vue 项目 (3 ...
骗:骗局的“真理化”与认知觉醒不要总是觉得身边人在骗你,他们没有那么大的本事,也没有那么多的想法。真正骗你的人,你已经帮他们数了很多年的钱了。
骗局的本质是“未被揭露的利益剥夺”,其“顺利运行时被视为真相”的特性,使其成为一种“隐形的真理表现形式”。2026 年,随着信息传播效率的提升,骗局的“伪装性”将更强——无论商业领域的虚假宣传、金融市场的庞氏骗局,还是社会层面的认知误导,都可能在“合理”的外壳下运行。但与此同时,一小部分人的“认知觉醒”(如意识到“真相背后的利益掠夺”)将推动庞氏骗局的“定义重构”,促使社会重新审视“信任”与“利益”的边界。
斗:从“战”到“缠斗”的长期博弈“战”是激烈的冲突,“斗”是阴柔的博弈。战可以更快解决矛盾,打造新的秩序。斗是对利益的争夺,但却无意重塑既有格局。
2025 年,全球进入“战”的年代(贸易战、科技战、舆论战);2026 年,“战”的局限性将暴露——理想中的“正义战胜邪恶”的童话不存在,取而代之的是“多方力量的反复缠斗”。这种“斗”是复杂的、长期的,甚至是“没有赢家”的:企业间的竞争不再是“一次性胜负”,而是“持续的资源争夺”;国家间的 ...
虚拟列表:只渲染可视区域元素,通过占位容器模拟滚动条。树的特殊性:需出来层级关系、展开折叠动态变化,二者结合即为虚拟树(Virtual Tree)。
数据结构转化递归遍历树节点,转化为线性数组并记录层级、展开状态、父子关系:
12345678function flattenTree(root, level = 0, result = []) { const node = { ...root, level, expanded: false }; result.push(node); if (node.children && node.expanded) { node.children.forEach(child => flattenTree(child, level + 1, result)); } return result;}
滚动事件通过容器scrollTop动态计算当前可视区域索引:
12const startIdx = Math.floor(scrollTop / itemH ...
醉是流年作者:吴华锦
烛光曳曳竹影移,庭前寒露满纱窗。冷月沁出珍珠泪,银桂飘得十里香。
灿若星辰美若仙,凌波飞渡有河洛。长发飘然惊鱼貌,粉颊带雪玲珑心。
江南烟雨春,湘西山色好。临风但曰雅,新亭铺盏茶。儿童游戏闹,浣洗言谈欢。渐午炊烟起,回家吃饭去。
月洒金辉镶碧树,花落银盘挂玉帘。
山花已盛开,好景时光裁。暖阳须明日,君卿直可待。
看他悠然自得,胸中自有丘壑,世事纷然无涯,不如归家喝茶。天也晴,水也清,风光正好,可惜,行人太匆匆,为哪般?纵使急速有千里,穿林起风声,不敌年华易老,人面婆娑,不如举起一杯清浅,相邀歌。
小城故事多,夕阳剪影,华灯初上,夜色宁静。好山好水好风景,燕雀穿空有余音,晚风轻拍美人镜,皱起鳞光催夜频。
日长夜短不足眠,窄巷深深,行人急促,摩肩接踵。欢庆后,百无聊赖,观星摘月,追踪往年。正是,良辰好景莫辜负,赏心乐事各家院,天地辽阔,不似,处处高楼遮望眼。恰逢佳节好心闲,山水同源,花开自在,艳羡路人。称病几分重,游丝不肯离,静心且静气,常翻几页书。读完我也不知道看了什么,只是看书这件事本身就很有意思。爱惜身体,早睡,早不早起看毅力,晚安。
网络优化配置优化:通过调整构建工具(如Webpack或Vite)的配置,比如代码压缩、Tree Shaking和代码分割,减少打包体积和加载时间。
访问优化:包括图片懒加载、预加载关键资源,以及优化DOM操作,减少渲染阻塞,提升用户体验。
通过减少HTTP请求、启用HTTP/2、使用CDN和缓存策略,提升资源加载速度。
避免巨大的网络负载是Lighthouse的一个审计指标,它指的是前端文件通过网络传输的总大小。
需要实施一个全面的Web性能优化流程:识别特定问题、可视化HTML和CSS文件、压缩和精简代码、减小字体和图片的体积等。
网络负载是指页面从自身服务器或第三方服务器通过互联网下载的所有文件的总和。
优化网络负载需要减少资源的总大小:
移除不必要的资源
找出那些对用户体验没有显著影响的资源,并将它们从页面中移除。
未使用的CSS和JavaScript文件、过大的图片等
减小资源的下载大小
使用压缩工具(如Gzip或Brotli)压缩HTML、CSS和JavaScript文件。
优化图片和字体大小,采用现代格式(如webP和woff2)。
延迟加载资源(Lazy Loa ...





















