标签: Vue

大牛猫 | 1周前 | Vue

Vue.js 2023 年最新路线图

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...

 29 |  0 |  0 Vue

花小染 | 3周前 | Vue前端相关

Vue3 性能优化之 Non-reactive Object

前言 在 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

 71 |  0 |  0 Vue前端相关

客栈小K | 2个月前 | Vue前端相关JavaScript

使用fabric.js 快速开发一个图片编辑器

最近自己开发了一个图片编辑器,把源码也放在了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...

 142 |  1 |  0 Vue前端相关

他在笑_1 | 2022-11-19 | VueJavaScript

导航条根据滚动条方向显示淡入淡出效果

目的 这个代码主要实现了: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; //触发滚动条

 284 |  1 |  4 VueJavaScript

客栈小K | 2022-11-11 | Vue前端相关

shallowReactive和shallowRef

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

 231 |  0 |  0 Vue前端相关

物有本木 | 2022-11-10 | Vue电商产品前端相关后端相关

fastposter v2.10.0 简单易用的海报生成器

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

 312 |  2 |  0 Vue电商产品

客栈小K | 2022-11-09 | 算法Vue前端相关React

信仰崩了?Preact 开始采用 Vue3 的响应式设计

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

 333 |  0 |  0 算法Vue

客栈小K | 2022-07-28 | Vue前端相关Java

思考vue3和react18的区别

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

 922 |  1 |  0 Vue前端相关