Vue Amsterdam 2023 于 2 月 8 日至 10 日举行（Vue Amsterdam 是世界上最大的 Vue.js 会议），这是 Vue.js 作者尤雨溪三年以来首次参加面对面 Vue 活动。在会议中，尤雨溪透露了 Vue 的一些令人兴奋的新功能，并提供了 2023 路线图的更新。 概述： Vue 2 将于 2023 年 12 月 31 日结束支持，达到生命周期结束（EOL）； Reactivity Transform 将从 v3.4 中的 Vue 核心中移除； 响应式 props 解构； Suspense 将于 Q2 确定； 更多 SSR 改进，包括懒水合、v-ssr-only； Vapor mode：一种可选择的以性能为导向的编译模式。 Vue 2 EOL 为了弥补个和主要版本之间的差距，Vue 2.7 添加了内置的 Composition API 支持以及 <script s...

前言 在 Vue2 中，有一个老生常谈的话题，如何避免 data 中一个复杂对象（自身或属性对象）被默认被创建为响应式（Non-reactive Object）的过程？举个例子，有一个 Vue2 的组件的 data： <script export default { data() { return { list: [ { title: 'item1' msg: 'I am item1', extData: { type: 1 } }, ... ] } } } </script 这里我们希望 list.extData 不被创建为响应式对象，相信很多同学都知道，我们可以通过 Object.defineProperty 设置对象 list.extData 的 configurable 属性为 false 来实现。 而在 Vu

最近自己开发了一个图片编辑器，把源码也放在了GitHub上，顺便也总结下使用fabric.js开发一个编辑器需要用到哪些知识点。 预览地址：[nihaojob.github.io/vue-fabric-…](https://link.juejin.cn/?target=https%3A%2F%2Fnihaojob.github.io%2Fvue-fabric-editor%2F "https://nihaojob.github.io/vue-fabric-editor/") GitHub地址：[github.com/nihaojob/vu…](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fnihaojob%2Fvue-fabric-editor "https://github.com/nihaojob/vue-fabric-editor") ![Foxmail20220904011310.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp...

目的 这个代码主要实现了：Nav导航条根据滚动条方向显示淡入淡出效果。 Nav的定位是 fixed ，向下滚动导航条隐藏，向上滚动导航条出现。 代码 js <template <div id="demo" <!- 淡入淡出动画 - <transition name="fade" <!- 导航条 - <div v-show="show" 内容省略 </div </transition </template <script export default { mounted() { //开始------------------------------------ let oldTop = 0; //旧数据，初始为0 // 将自定义方法绑定到窗口滚动条事件 window.onscroll = () = { let top = document.scrollingElement.scrollTop; //触发滚动条

reactive用来包装一个对象，使其每个对象属性都具有响应性，但是这个包装过程是递归调用的，如果包装的对象有过多属性而又不需要设置相应，无疑是性能浪费 针对这种情况vue设置了 shallowReactive shallowRef 两个方法来包装响应式数据，通过该方法包装的数据只有第一层具有响应性 shallowReactive = 和 reactive 一样，该方法只能把对象或数组包装为响应式对象 js <template <div class="about" {{ test }} <button @click="change" change</button </div </template <script setup const test = shallowReactive({ a: { b: "b", }, }); function change() { test.a.b = "new"; console.log(te

🔥🔥🔥 fastposter海报生成器是一款快速开发海报的工具。只需上传一张背景图，在对应的位置放上组件（ 文字 、 图片 、 二维🐴 、 头像 ）即可生成海报。 点击 代码 直接生成各种语言的调用代码，方便快速开发。 现已服务众多电商类项⽬，多个项⽬有 52W+ ⽤户，通过多年⽣产环境的考验，稳定可靠。广泛应用于各类电商、分销系统、电商海报、电商主图等海报生成和制作场景。 特别感谢大家的鼓励、捐赠和支持，开源不易、希望能够一直坚持。 社区版 v2.10.0 发布 更改开源协议为 MIT 升级依赖 Pillow 9.3.0 升级依赖 requests_cache 0.9.7 专业版 v2.0.14 支持 minio 资源存储（感谢林总提供支持） 数据库配置文件，需要使用""，避免纯数字密码的情况下导致无法获取DB连接. Python版本 解决static资源不同步问题 Java版本 下载海报支持动态传递文件名称

前言 不知大家有没有听过 Preact 这个框架，就算没听过 Preact 那也应该听过 React 吧？ 一字之差， preact 比 react 多了个 p ！（听起来咋不像啥好话呢） 这个 P 代表的是 Performance ， 高性能版React 的意思。 Preact 一开始是 CodePen 上的一个小项目，有点类似于咱们国内常见的 《三百行代码带你实现个React》 这类文章，用最少的代码实现了 React 的最基本功能，然后放到 CodePen 上供大家 敬仰 学习。 当然这是很多年前的事了，那时候这种东西很容易火，想想 N 年前你看过的第一篇 《三百行实现个Vue》 、 《三百行实现个React》 之类的文章是不是竞争对手很少、很容易引发大量的关注度。不过现在不行了，太卷！这类文章隔三差五的就能看到一篇，同质化严重，导致大家都有点审美疲劳了。 但在那个年代 Preact 就是这么火起来的，三百行实现了个 React 引发大量关注度之后，作者觉得自己做的这玩意好像还挺不错的哈！于是开始继续完善，完善后拿去一测试：性能简直完...

前言 个人认为框架的初衷是带给开发者更好的开发体验，更快的性能，更简单的操作。 vue3 和 react18 都是最新的框架版本，两者虽然底层原理和思想不同，但是更多的是相同之处，比如都是声明式的，一般多用于 spa ，都用 hooks 来逻辑复用等等 用vite初始化vue3和react18项目 ----------------------------- pnpm create vite 然后删除无用的代码之后，再改造成同样功能的HelloWorld组件，这个组件做如下事情： 定义数据 count ，点击按钮可以是 count+1 ，页面也会响应式改变； 还有一个监听数据改变，在控制台打印改变的数据； 有一个数组 ['apple', 'orange', 'pear'] ，用于列表渲染到页面。 ![image-20220727144746261....