标签: Vue

他在笑_1 | 1周前 | JavaScriptVue

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

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

 78 |  1 |  4 JavaScriptVue

客栈小K | 2周前 | 前端相关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

 68 |  0 |  0 前端相关Vue

物有本木 | 3周前 | 后端相关电商产品前端相关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版本 下载海报支持动态传递文件名称

 99 |  1 |  0 后端相关电商产品

客栈小K | 3周前 | React算法前端相关Vue

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

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

 75 |  0 |  0 React算法

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

思考vue3和react18的区别

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

 475 |  1 |  0 前端相关Vue

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

Vue 2.7 正式发布,代号为 Naruto

大家好,我是CUGGZ。 今天,Vue 正式发布了 2.7 版本, 版本名称为 Naruto,即火影忍者。 尽管现在 Vue 3 是默认版本,但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中,从 Vue 3 向后移植了一些最重要的功能,以便 Vue 2 用户也可以从中受益。 向后移植的功能 ------- [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) SFC [ <script setup ](https://vuejs.org/api/sfc-script-setup.html) SFC [CSS v-bind](https://vuejs.org/api/sfc-css-features.html v-bind-in-css) 此外,还支持以下 API: defineComponent() :具有改进的类型推断(与 Vue.extend 相比); h...

 608 |  1 |  0 前端相关Vue

HZFEStudio | 2022-07-01 | React前端相关Vue

框架:谈谈 React 和 Vue 的区别

回答关键点 推模型与拉模型 模板与 JSX React 和 Vue 同为现代化的 Web 前端开发框架。相同之处都是采用数据驱动视图的思想,以虚拟 DOM 为基础,以组件化的方式组织应用,让开发者无需关心 DOM 细节,从更高的层次设计应用。不同之处在于,具体组件的编写方式(template vs jsx),数据响应模型以及具体的生态。 知识点深入 1\. 开发体验的区别 学习曲线 Vue:旨在降低前端开发门槛,学习曲线平缓,对了解 HTML、CSS 及 JS 的传统模式的前端开发和后端开发人员更友好。 React:传播自身的概念和思想,需要了解 JSX 的相关知识,组件中的一切都可以通过 JavaScript 灵活控制,上手成本相较于 Vue 来说略高。 JSX 与模板语法 Vue:默认使用基于 HTML 的模板语法,将模板、样式及逻辑划分开来使关注点分离。也可以选配 JSX 支持。 React:默认使用 JSX 编写组件,将 HTML 和 CSS 组合到 JavaScript 中。在选用 Typ...

 355 |  0 |  0 React前端相关

HZFEStudio | 2022-06-29 | 前端相关Vue

框架:Vue 的 computed 和 watch 的区别

相关问题 computed 和 watch 的实现原理 computed 和 watch 的适用场景 回答关键点 响应变化 属性 侦听 computed 是模板表达式的声明式描述,会 创建新的响应式数据 。而 watch 是响应式数据的 自定义侦听器 ,用于 响应数据的变化 。除此之外,computed 还具有 可缓存,可依赖多个属性,getter 函数无副作用 等特点。watch 则更适用于 异步或开销大的操作 。 知识点深入 1\. 实现原理 在了解 Vue 数据双向绑定的基础上,computed 等同于为属性设置 getter 函数 (也可设置 [setter](https://cn.vuejs.org/v2/guide/computed.html %E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter)),而 watch 等同于为属性的 setter 设置回调函数、监听深度 deep 及响应速度 immediate 。下面简单讲解下两者...

 317 |  0 |  0 前端相关Vue

HZFEStudio | 2022-06-29 | 前端相关Vue

框架:Vue 的数据绑定机制

相关问题 Vue 是如何实现数据劫持的 Vue 是如何实现双向绑定的 MVVM 是什么 回答关键点 响应式对象 数据劫持 双向绑定 MVVM(Model-View-ViewModel) 发布/订阅模式(publish-subscribe pattern) 响应式对象 Vue2 通过 Object.defineProperty ,Vue3 通过 Proxy 来劫持 state 中各个属性的 setter、getter,通过 getter 收集依赖。当 state 中的数据发生变动之后发布通知给订阅者更新数据。 双向绑定 Vue 通过 v-model 实现双向绑定。 v-model 实际是 v-bind:xxx 和 v-on:xxx 的语法糖。当触发元素对应的事件(如 input、change 等)时更新数据(ViewModel),当数据(ViewModel)更新时同步更新到元素的对应属性(View)上。 MVVM(Model-View-ViewModel) MVVM 模式是一种...

 295 |  0 |  0 前端相关Vue

动感超人, | 2022-06-20 | JavaScript前端相关Vue

你是怎么理解ES6中 Decorator 的?使用场景?

一、介绍 Decorator,即装饰器,从名字上很容易让我们联想到装饰者模式 简单来讲,装饰者模式就是一种在不改变原类和使用继承的情况下,动态地扩展对象功能的设计理论。 ES6 中 Decorator 功能亦如此,其本质也不是什么高大上的结构,就是一个普通的函数,用于扩展类属性和类方法 这里定义一个士兵,这时候他什么装备都没有 js class soldier{ } 定义一个得到 AK 装备的函数,即装饰器 js function strong(target){ target.AK = true } 使用该装饰器对士兵进行增强 js @strong class soldier{ } 这时候士兵就有武器了 js soldier.AK // true 上述代码虽然简单,但也能够清晰看到了使用 Decorator 两大优点: 代码可读性变强了,装饰器命名相当于一个注释 在不改变原有代码情况下,对原来功能进行扩展 二、用法 Docorator 修饰对象为下面两种:

 392 |  0 |  0 JavaScript前端相关

动感超人, | 2022-06-20 | JavaScript前端相关Vue

说说Vue 3.0中Treeshaking特性?举例说明一下?

一、是什么 Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination 简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码 如果把代码打包比作制作蛋糕,传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(没有用的)蛋壳全部挑选并剔除出去 而 treeshaking 则是一开始就把有用的蛋白蛋黄(import)放入搅拌,最后直接作出蛋糕 也就是说 , tree shaking 其实是找出使用的代码 在 Vue2 中,无论我们使用什么功能,它们最终都会出现在生产代码中。主要原因是 Vue 实例在项目中是单例的,捆绑程序无法检测到该对象的哪些属性在代码中被使用到 js import Vue from 'vue' Vue.nextTick(() = {}) 而 Vue3 源码引入 tree shaking 特性,将全局 API 进行分块。如果您不使用其某些功能,它们将不会包含在您的基础包中 js import { nextTick, o

 388 |  0 |  1 JavaScript前端相关

动感超人, | 2022-06-20 | JavaScript前端相关Vue

Vue3.0里为什么要用 Proxy API 替代 defineProperty API ?

一、Object.defineProperty 定义: Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象 为什么能实现响应式 通过 defineProperty 两个属性, get 及 set get 属性的 getter 函数,当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值 set 属性的 setter 函数,当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。默认为 undefined 下面通过代码展示: 定义一个响应式函数 defineReactive js function update() { app.innerText = obj.foo } function defineReactive(obj, key, val) { Object.def

 455 |  0 |  0 JavaScript前端相关

动感超人, | 2022-06-20 | JavaScript前端相关Vue

Vue3.0性能提升主要是通过哪几方面体现的?

一、编译阶段 回顾 Vue2 ,我们知道每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把用到的数据 property 记录为依赖,当依赖发生改变,触发 setter ,则会通知 watcher ,从而使关联的组件重新渲染 试想一下,一个组件结构如下图 html <template <div id="content" <p class="text" 静态文本</p <p class="text" 静态文本</p <p class="text" {{ message }}</p <p class="text" 静态文本</p ... <p class="text" 静态文本</p </div </template

 438 |  0 |  0 JavaScript前端相关