标签: Vue

布朗熊 | 5周前 | Vue前端相关

5 种在 Vue 3 中定义组件的方法

Vue 正在不断发展,目前,在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API,情况大不相同,如果您刚刚开始,可能会感到困惑。让我们定义一个简单的组件并使用所有可用的方法重构它。 1. Options API 这是在 Vue 中声明组件的最常见方式。从版本 1 开始可用,您很可能已经熟悉它。一切都在对象内声明,数据在幕后由 Vue 响应。它不是那么灵活,因为它使用 mixin 来共享行为。 <script import TheComponent from './components/TheComponent.vue' import componentMixin from './mixins/componentMixin.js' export default { name: 'OptionsAPI', components: { TheComponent, AsyncComponent: () = import('./components/AsyncComponent.vue'), }, mixins:

 78 |  0 |  0 Vue前端相关

大牛猫 | 6周前 | Vue前端相关

5 种在 Vue 3 中定义组件的方法

Vue 正在不断发展,目前,在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API,情况大不相同,如果您刚刚开始,可能会感到困惑。让我们定义一个简单的组件并使用所有可用的方法重构它。 1. Options API 这是在 Vue 中声明组件的最常见方式。从版本 1 开始可用,您很可能已经熟悉它。一切都在对象内声明,数据在幕后由 Vue 响应。它不是那么灵活,因为它使用 mixin 来共享行为。 <script import TheComponent from './components/TheComponent.vue' import componentMixin from './mixins/componentMixin.js' export default { name: 'OptionsAPI', components: { TheComponent, AsyncComponent: () = import('./components/AsyncComponent.vue'), }, mixins:

 125 |  0 |  0 Vue前端相关

追风少年 | 6周前 | Vue前端相关

谈谈Vue为什么禁用undefined

undefined 的问题举几个demo 就可以说明 demo1 undefined 的全局修改问题     let undefined ="anlijun"; 输出结果: Uncaught SyntaxError: Identifier 'undefined' has already been declared 解释: 这步是在外层全局去声明一个变量undefined 值为anlijun,由于全局已经有这个变量了所以声明会报错            //众所周知var可以重复声明     var undefined ="anlijun";  输出结果: console.log(undefined)//这里打印依旧是值undefined 而不是 anlijun 解释: 这样的确可以(修改)而且不报错 但是由于 undefined 这个是 不可枚举不可写 不可配置的所以打印输出的值是undefined           demo1的总结 如果只看demo1 那么平常开发中直接使用undefined 没有任何问题,因为不可改嘛; 但是问题不是出在这,而

 158 |  0 |  0 Vue前端相关

青木 | 7周前 | Vue前端相关

一文读懂 Nuxt.js 服务端组件

服务端组件在 Web 开发生态系统中变得越来越普遍。传统上,在单页面应用中,即使是服务端渲染的应用,服务端仅与第一次加载相关,之后将由客户端接管。这意味着 Web 应用的每个部分都必须能够在客户端和服务端上渲染。 相反,服务端组件允许在客户端应用程序中对单个组件进行服务端渲染。即使需要生成静态站点,也可以在 Nuxt 中使用服务端组件。这使得构建混合动态组件、服务端渲染的 HTML 甚至静态标记块的复杂站点成为可能。 事实上,Nuxt 在 React 之前就已经拥有了服务端组件功能。 1、主要优点 ⚡️ 服务端组件允许从客户端包中提取逻辑 通过将代码移至服务端组件中,这些组件(以及它们使用的组件)不再需要由 Vue 进行水合或“跟踪”。这对于可能不需要在客户端上“重新运行”的复杂或昂贵的操作特别有用,例如应用语法高亮显示或解析 markdown。 在大多数情况下,在 Nuxt 站点中使用服务端组件并不是一个万能的解决方案。相反,当在客户端上渲染组件所需的代码量过多时,这将是一个有用的选项。 🔐 服务端组件确保特权代码安全运行 当应用逻辑需要...

 93 |  1 |  0 Vue前端相关

OOM | 2个月前 | Vue设计模式

Vue 前端设计模式梳理

一、什么是设计模式? 设计模式是一套被反复使用、多数人知晓、经过分类编目的、代码设计经验的总结。它是为了可重用代码,让代码更容易的被他人理解并保证代码的可靠性。 设计模式实际上是“拿来主义”在软件领域的贯彻实践,它是一套现成的工具,拿来即用。下面来看一下设计模式的设计原则。 二、设计几个原则 单一职责原则、开放封闭原则、里式替换原则、接口隔离原则 、依赖反转原则 、最少知识原则。 下面我们一起来看看几种在前端领域常见的设计模式: 单例模式、工厂模式、策略模式、代理模式、适配器模式、观察者模式/发布-订阅模式 三、常见的设计模式及实际案例 单例模式 1. 什么是单例模式? 单例模式 (Singleton Pattern)又称为单体模式,保证一个类只有一个实例,并提供一个访问它的全局访问点。也就是说,第二次使用同一个类创建新对象的时候,应该得到与第一次创建的对象完全相同的对象。 Vue中的单例模式 (1)Element UI Element UI是使用Vue开发的一个前端UI框架。Elemen

 149 |  0 |  0 Vue设计模式

念旧。 | 2023-06-05 | Vue前端相关

十分钟,带你了解 Vue3 的新写法

本文的目的,是为了让已经有 Vue2 开发经验的 人 ,快速掌握 Vue3 的写法。 因此, 本篇假定你已经掌握 Vue 的核心内容 ,只为你介绍编写 Vue3 代码,需要了解的内容。 一、Vue3 里 script 的三种写法 首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法, 1、最基本的 Vue2 写法 <template   <div {{ count }}</div   <button @click="onClick"     增加 1   </button </template <script export default {   data() {     return {       count: 1,     };   },   methods: {     onClick() {       this.count += 1;     },   }, } </scr

 225 |  0 |  0 Vue前端相关

青木 | 2023-05-29 | ReactVue前端相关

Vue 和 React 的区别,且看不同段位是怎么说的

大家好,我是沐华。最近部门招人,捞了一批简历至少都是5年以上的前端来面试,其中不乏360的,腾讯的,简历上写的基本都是熟练使用 Vue2 、 Vue3 、 React 并阅读源码对其实现原理有自己的理解,实际问起来却不免让人唏嘘 比如:既然两个框架都用过,那能说一下你觉得这俩有什么区别吗 毕竟是两个框架,不像两个 API ,要说细节上的区别就太多太多了,可能能聊几个小时都聊不完,所以你给自己的定位是什么呢 说说 Vue 和 React 的区别 青铜级 只要真正了解一些,或者用过两个框架开发,就一定能说上来的一些语法层面: Vue API 多, React API 少 Vue 双向绑定,修改数据自动更新视图,而 React 单向数据流,需要手动 setState Vue template 结构表现分离, React 用 jsx ...

 190 |  0 |  0 ReactVue

晴天 | 2023-05-22 | Vue

Vue3 除了 keep-alive,还有哪些页面缓存的实现方案

引言 有这么一个需求:列表页进入详情页后,切换回列表页,需要对列表页进行缓存,如果从首页进入列表页,就要重新加载列表页。 对于这个需求,我的第一个想法就是使用keep-alive来缓存列表页,列表和详情页切换时,列表页会被缓存;从首页进入列表页时,就重置列表页数据并重新获取新数据来达到列表页重新加载的效果。 但是,这个方案有个很不好的地方就是:如果列表页足够复杂,有下拉刷新、下拉加载、有弹窗、有轮播等,在清除缓存时,就需要重置很多数据和状态,而且还可能要手动去销毁和重新加载某些组件,这样做既增加了复杂度,也容易出bug。 接下来说说我的想到的新实现方案(代码基于Vue3)。 keep-alive 缓存和清除 keep-alive 缓存原理:进入页面时,页面组件渲染完成,keep-alive 会缓存页面组件的实例;离开页面后,组件实例由于已经缓存就不会进行销毁;当再次进入页面时,就会将缓存的组件实例拿出来渲染,因为组件实例保存着原来页面的数据和Dom的状态,那么直接渲染组件实例就能得到原来的页面。 keep-alive 最大的难题就是缓存的清理,如果能有简...

 241 |  0 |  0 Vue

花小染 | 2023-05-18 | Vue前端相关

Nuxt 3.5 正式发布,支持 Vue 3.3!

5 月 16 日,Nuxt 3.5.0 正式发布,它带来了 Vue 3.3 版本、新的默认设置、交互式服务端组件、类型化页面、环境配置等。 Vue 3.3 [Vue 3.3 已经发布](https://www.developers.pub/article/1202228),具有许多令人兴奋的特性,特别是在类型支持方面。包括: 宏中的导入和复杂类型支持 通用组件 更符合人体工程学的 defineEmits 使用 defineSlots 的类型插槽 响应式 Props 解构 defineModel defineOptions 使用 toRef 和 toValue 实现更好的 getter 支持 JSX 导入源支持 维护基础设施改进 Nitropack v2.4 Nuxt.js 团队一直致力于对 Nitro 进行大量改进,这些改进已经在 Nitro v2.4 中实现——其中包含许多错误修复、Cloudflare 模块工作格式的更新、Vercel KV 支持等。 注意: 如果需要部署到 Vercel 或 Netlify ...

 202 |  0 |  0 Vue前端相关

孤音 | 2023-05-18 | Vue

Vue 3.3 正式发布,代号:Rurouni Kenshin

5 月 11 日,Vue 3.3 正式发布,代号 Rurouni Kenshin 。本次更新主要针对开发者体验进行了改进,特别是在使用 TypeScript 时的 SFC <script setup 。与 Vue 语言工具(以前称为 Volar)1.6 的发布相结合,解决了在使用 TypeScript 时存在的许多长期困扰问题。下面就来看看 Vue 3.3 版本中的重点功能! 当升级到 Vue 3.3 时,建议同时更新以下依赖项: volar / vue-tsc @ ^1.6.4 vite @ ^4.3.5 @vitejs/plugin-vue @ ^4.2.0 vue-loader @ ^17.1.0(如果使用 webpack 或 vue-cli) SFC中的 <script setup 和 TypeScript DX 改进 宏中的导入和复杂类型支持 在之前的版本中,用于 defineProps 和 defineEmits 的类型参数位置使用的类型被限制为本地类型,并且仅支持类型字面量和接口。这是因为 Vue 需要...

 171 |  0 |  0 Vue

温酒 | 2023-05-14 | Vue

Vue 前端设计模式梳理

一、什么是设计模式? 设计模式是一套被反复使用、多数人知晓、经过分类编目的、代码设计经验的总结。它是为了可重用代码,让代码更容易的被他人理解并保证代码的可靠性。 设计模式实际上是“拿来主义”在软件领域的贯彻实践,它是一套现成的工具,拿来即用。下面来看一下设计模式的设计原则。 二、设计几个原则 单一职责原则、开放封闭原则、里式替换原则、接口隔离原则 、依赖反转原则 、最少知识原则。 下面我们一起来看看几种在前端领域常见的设计模式: 单例模式、工厂模式、策略模式、代理模式、适配器模式、观察者模式/发布-订阅模式 三、常见的设计模式及实际案例 单例模式 1. 什么是单例模式? 单例模式 (Singleton Pattern)又称为单体模式,保证一个类只有一个实例,并提供一个访问它的全局访问点。也就是说,第二次使用同一个类创建新对象的时候,应该得到与第一次创建的对象完全相同的对象。 Vue中的单例模式 (1)Element UI Element UI是使用Vue开发的一个前端UI框架。ElementUI 中的全屏 Loadi...

 229 |  0 |  0 Vue

奈我何 | 2023-05-12 | Vue

Vue 3.3 发布了,来看看有哪些更新~

2023年5月11日,我们很高兴地宣布发布 Vue 3.3 “浪客剑心”! 此版本专注于开发人员体验改进-特别是SFC <script setup 与TypeScript的使用。与Vue语言工具 ^[1]^ (以前称为Volar)的1.6版本一起,我们在将Vue与TypeScript一起使用时解决了许多长期存在的痛点。这篇文章概述了3.3中突出显示的功能。有关更改的完整列表,请参阅GitHub上的完整更改日志 ^[2]^ 。 --- 依赖性更新升级到3.3时,建议也更新以下依赖项: volar / vue-tsc@^1.6.4 vite@^4.3.5 @vitejs/plugin-vue@^4.2.0 vue-loader@^17.1.0(如果使用webpack或vue-cli) \<脚本设置 + TypeScript DX改进^[3]^ 宏中的导入和复杂类型支持^[4]^ 通用组件^[5]^ 更符合人体工程学的定义Emits^[6]^ 带有定义插槽的类型插槽^[7]^ 实验特征^[8]^ 响应式 ...

 244 |  0 |  0 Vue

雪千寻 | 2023-04-14 | ReactVue前端相关

Vue3 与 React 全方面对比

1. 编程风格 & 视图风格 1.1 编程风格 1. React 语法少、难度大; Vue 语法多,难度小 例如指令: Vue <input v-model="username"/ <ul     <li v-for="(item,index) in list" :key="index" {{ item }}</li </ul 复制代码 React <input value={username} onChange={e =  setUsername(e.target.value)}/ <ul { list.map((item,index) =  <li key={index} {item}</li ) } </ul 复制代码 Vue 给我们提供了很多的指令功能,而这些功能在 React 中基本都需要我们使用原生 js 来实现。 所以会有很多人说: "使用 Vue 实际上你就是在操作 Vue,使用 React 实际上你是在操作 js"。 2. React 魔改少,手动实现;

 215 |  0 |  0 ReactVue

观云 | 2023-04-08 | Vue

Vue2迁移Vue3,如何迁移?

vue2 对比 Vue3 有很多新特性增加,也有很多功能属于破坏性更新。 列举值得关注的新特性 1. 第一个肯定是组合式API setup 以及 setup语法糖 模式 2. 新增的内置组件 TelePort 以及 Suspense 3. 响应式原理的变化从 Object.defineProperty 换成了 proxy 4. 对ts支持比较友好 5. 自定义 hooks 逻辑拆分 6. v-memo 新指令可以小幅度提升性能 破坏性更新的API以及功能 1. 不在需要手动实例化Vue 废弃了 new Vue 这个操作,取而代之的是 createApp 接受一个根组件实例 ts import { createApp } from 'vue' import App from './App.vue' const app = createApp(App).mount(' app') 同时返回的app实例也跟之前不一样 废弃了 Vue.config.productionTip Vue.extend 具有影响

 340 |  0 |  0 Vue

温酒 | 2023-04-06 | Vue

利用 Vue 实现评论板块:发表情,@某人消息推送

简介 在接到这个需求的时候,就纳闷,为啥要搞这么多花样,评论就评论吧,它还要你实现艾特某人的时候,还要调用后台的IM接口,给相关人员发送通知推送;说到这里,有点经验的JY应该就想到了,数据参数如何组装和传递这是个关键点,后面再细说。 评论区主要实现的功能点有:表情包选择,艾特符识别并弹出人员选择,还有就是图片选择(篇幅有限,这个放在第二篇文章述说),还有就是支持表情包,艾特人,文本组合显示的文本区域(这个是难点) 组合显示的文本区域,除了能正常显示三种元素节点,还需要将其关联的数据包裹起来,方便在点击发送的时候,将这些数据提取出来进行组装,然后发送给后台; 刚开始,毫无头绪,不知从何下手的时候,想到的就是去寻找一劳永逸的插件,然后发现,比较适合做这方面的插件,无非就是富文本编辑器吧,比如最常用的富文本编辑器Vue-Quill-Editor^[1]^ ,但是研究了一番这开源插件的文档发现,开发的API并不能满足我实际的需求, 比如艾特人的情况下数据存储,还有改写后光标的显示和跟踪问题, ,😮‍💨唉,一番折腾之后又陷入了苦思当中;但问题总归是要解决的,于是我开始萌...

 200 |  0 |  0 Vue