Vue2主动屏蔽响应式

在用Vue开发项目时,有时候希望Vue的响应式系统能忽略掉一些特定对象,特别是一些数据量比较大的对象,比如地图实例,如果变成响应式对象会极大地降低地图的性能。经测试发现会降低70%甚至更多。

自己一个人开发还好,只要注意不赋值给响应式变量(data选项中定义的变量)即可,但多人合作时,难免每个人任何时候都不出错,一旦一个地方没注意,整个地图实例都会被改为响应式对象。

以前也查过资料、看过源码,都没有在Vue2中找到比较好的方法来处理这个屏蔽响应式的问题。(Vue3中通过 markRaw 或者 shallowReactive、shallowRef 来处理对象即可。)

最近因为开发一个公共的地图工具,而工具使用方刚好就是用 Vue 开发的项目,于是又研究起了这个问题,我希望工具这边能主动屏蔽响应式,降低使用者的心智负担。

在查源码,有了惊喜发现,Vue2.7 因为回迁了Vue3的一些特性,让Vue2也支持了主动屏蔽响应式,方法很简单,只需要给对象增加一个真值属性 __v_skip 即可,支持[email protected]+。

赶快用起来吧~~

Vite 开发默认端口为什么改为 5173

闲来无事,突然回想起这个以前就在大脑中一闪而过的疑问,隐约记得当时vite官方说法是为了避开常用端口范围,但,为什么要选择 5173 这个有点“毫无亮点”的端口呢,还有什么其他原因吗?

我眼睛盯着 Vite 这个单词,脑中想着5173,忽然我似乎明白了:

V  ->  罗马数字5
i  ->  1
t  =>  7
e  =>  3

这不就是黑客常用的起名方式吗?

为了验证我的猜测,我搜了一下 Vite 的 issue,发现果然有网友跟我想法一致:
https://github.com/vitejs/vite/pull/8148#issuecomment-1335439757

不过最后没有找到确切的证据,但上面的猜测离正确答案应该也是八九不离十了吧。

解决 npm i 会重复安装依赖

一个老项目中用到了 leaflet 这个地图操作库,最近项目升级,需要使用 supermap,于是安装 @supermap/iclient-leaflet(依赖 leaflet),然后程序报错。
经检查,发现原始安装的 leaflet 版本为 1.5.1,而 iclient-leaflet 依赖 1.7.1,造成程序中同时引用了2个不同版本的 leaflet 导致错误,于是升级 leaflet 至 1.7.1。
一切就绪,run——错误依旧,无语.jpg。
继续排查,发现 npm 居然会重复安装 leaflet 1.7.1:通过 npm list leaflet 查看其依赖树为:

+-- @supermap/[email protected]
| `-- [email protected] (此处重复)
+-- [email protected]
| `-- [email protected]
|   `-- [email protected] deduped
`-- [email protected]

于是通过 npm ddp (或 npm dedupe) 清理重复依赖,问题解决。

前端开发资料大杂烩

基础资料
MDN https://developer.mozilla.org/zh-CN/docs/Web
CSS手册 https://tympanus.net/codrops/css_reference/

前端题目
https://github.com/haizlin/fe-interview
https://q.shanyue.tech/

前端周刊、日报
https://github.com/tnfe/TNT-Weekly
https://github.com/kujian/frontendDaily
https://github.com/tower1229/frontend-weekly
https://github.com/ascoders/weekly
https://github.com/sorrycc/weekly
https://www.yuque.com/mmfe/weekly

算法
https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md

CSS技巧
https://github.com/chokcoco/iCSS
https://chokcoco.github.io/CSS-Inspiration

CSS加载
https://connoratherton.com/loaders
https://projects.lukehaas.me/css-loaders/
https://loading.io/css/
https://365webresources.com/best-pure-css-loading-spinners/
https://icons8.com/cssload
https://loading.io/spinner/
https://dev.to/afif/another-100-css-loaders-for-your-next-project-352l
https://joebell.co.uk/sketches/loading-disco

JavaScrit
现代 JavaScript 教程 https://zh.javascript.info
33个JS概念:https://github.com/stephentian/33-js-concepts

ajax
http://louiszhai.github.io/2016/11/02/ajax/

Promise 资料
https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/%E5%BC%82%E6%AD%A5/Promises%E8%AF%AD%E6%B3%95
https://es6.ruanyifeng.com/#docs/promise
https://github.com/ljianshu/Blog/issues/81
https://segmentfault.com/a/1190000014938839

Vue
路径 https://segmentfault.com/a/1190000016120011#articleHeader6

Vue3
https://juejin.cn/post/6940454764421316644
https://juejin.cn/post/6914862150872170509

Vue Hooks
VueUse https://vueuse.org
vue-use-web https://github.com/Tarektouati/vue-use-web
vue-use-gesture https://github.com/koca/vue-use-gesture

OpenLayers 学习资料
https://iclient.supermap.io/web/books/modern-web-gis-in-action/kai-fa-zhi-nan/for-openlayers/zhun-bei.html
http://linwei.xyz/ol3-primer/ch01/index.html
https://www.zhihu.com/column/c_1098918318844612608

动画
PAG https://pag.io
https://svga.io
https://animejs.com https://www.animejs.cn
https://github.com/Tencent/vap
Raphael.js
svg.js https://github.com/svgdotjs/svg.js
TweenMax
Animater https://github.com/cutting-mat/animater

Nginx
https://xuexb.github.io/learn-nginx/
https://nginx-playground.wizardzines.com
https://ssl-config.mozilla.org

飞线
https://github.com/jsplumb/jsplumb
https://github.com/Molunerfinn/markline.js
https://github.com/anseki/leader-line
https://github.com/stonerao/flyLine

新用户/新功能引导
shepherd.js https://github.com/shipshapecode/shepherd

落地页模板
https://github.com/nordicgiant2/awesome-landing-page

效果集合
https://github.com/lindelof/awesome-web-effect
粒子:https://github.com/lindelof/particles-bg
下雨:https://github.com/codrops/RainEffect

GIS
坐标转换 https://github.com/hujiulong/gcoordhttps://github.com/wandergis/coordtransformhttps://github.com/CntChen/tile-lnglat-transform

360全景
https://ourcodeworld.com/articles/read/843/top-7-best-360-degrees-equirectangular-image-viewer-javascript-plugins
Three.js https://threejs.org/
360-image-viewer https://github.com/Jam3/360-image-viewer
Kaleidoscope https://github.com/thiagopnts/kaleidoscope
Panolens.js https://github.com/pchen66/panolens.js
Panellum https://github.com/mpetroff/pannellum
Photo Sphere Viewer https://github.com/mistic100/Photo-Sphere-Viewer
Marzipano https://github.com/google/marzipano

小程序
mpx https://github.com/didi/mpx
Taro https://github.com/NervJS/taro
Wepy https://juejin.cn/post/6844903478184148999

字体
http://www.lixuejiang.me/2017/01/02/css%E7%9A%84font-family%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E9%9C%80%E8%A6%81%E5%BC%95%E5%8F%B7/

理解 grid 布局中的长度单位 fr

CSS 中有很多的长度单位fr 也是其中之一。

fr 单位专用于 grid 布局,意为 fraction(分数),额,好像也不是很好理解~

对比 px(像素)、em(文字)、vw(窗口),fr 好像缺了一个中文名字,来帮助大家理解。

所以我自告奋勇,凭借对 grid 布局还自觉得比较理解的基础上,给 fr 起了一个中文名字:份(儿),代表占剩余空间份数,这个剩余空间是指除去已知的宽度(包括px、%、grid 间隔等)之后的剩余空间。

读音相近,意思也差不多,我个人对这个名字还是比较满意的~

grid-template-columns: 150px 1fr;

//grid 容器分为了2列,第一列宽度150px,第二列占剩余空间1份儿,因为剩余空间只分成了1份儿,所以第二列也就是全部剩余空间。这种情况下,第二列写 100fr 也是相同的效果。
grid-template-columns: 150px 2fr 3fr;

//grid 容器分为了3列,第一列宽度150px,第二列占剩余空间(100% - 150px)的2份儿,第三列占剩余空间3份儿。也就是剩余空间总共分为了 2+3=5 份儿,第二列占2份儿,第三列占3份儿。

怎么样,是不是觉得 fr 很好理解了。