6 天前 / cxc_xinconan
响应式是 Vue 的特色,如果你简历里写了 Vue 项目,那基本都会问响应式实现原理。 而且不只是 Vue,状态管理库 Mobx 也是基于响应式实现的。 那响应式是具体怎么实现的呢? 与其空谈原理,不如让我们来手写一个简易版吧。 响应式首先,什么是响应式呢? 响应式就是被观察的数据变化的时候做一系列联动处理。 就像一个社会热点事件,当它有消息更新的时候,各方媒体都会跟进做相关报道。 这里社会热点事件就是被观察的目标。 那在前端框架里,这个被观察的目标是什么呢? 很明显,是状态。 状态一般是多个,会通过对象的方式来组织。
22 天前 / 冷星1024
你的可能已经注意到,VUE 3 版本的 Vue router (4.0) 与其之前的版本有一些 breaking change 更改。大部分的 Vue Router API 都没有变化,而且迁移过程也非常直接。然而,一个非常不明显但重要的变化常常被忽视,它可能导致难以调试的行为。现在所有的导航都是异步的。 如果你想知道为什么 URL 中的查询参数在你的 setup 方法或 created 钩子中无处可寻,但当插入它们时,它们仍然出现在模板中,不要离开, 我们来一探究竟。 现在所有的导航都是异步的为了探索这一点,我们将使用一个已经安装了 Vue router 4.0 的 Vue 3 骨架应用的 barebones 。
46 天前 / 九彩拼盘
常见的管理后台系统的有 3 个特点: 页面数量多。相似页面多。页面业务复杂。问题及解决方案开发管理后台的相似的复杂页面,如果采用复制粘贴的方式,会出现大量的重复代码。每次改动重复的部分,都会产出巨大的工作量。以下面两个场景为例: 场景 1: 给所有列表页的搜索条件加重置功能 如果 100 个列表页,则要加 100 个地方。 场景 2: 第三方下拉框组件升级 下拉框是用第三方组件。新的需求要升级下拉框组件。新版本的组件的 API 变了。要把所有组件都改一遍。 场景 1 是重复代码多导致的的问题。可以通过提升代码复用性来解决。
76 天前 / pingan8787
最近入门 Vue3 并完成 3 个项目,遇到问题蛮多的,今天就花点时间整理一下,和大家分享 15 个比较常见的问题,基本都贴出对应文档地址,还请多看文档~已经完成的 3 个项目基本都是使用 Vue3 (setup-script 模式)全家桶开发,因此主要分几个方面总结: Vue3ViteVueRouterPiniaElementPlus 一、Vue31. Vue2.x 和 Vue3.x 生命周期方法的变化文档地址:https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html Vue2.x 和 Vue3.x 生命周期方法的变化蛮大的...
76 天前 / Ryan众乐
无障碍写文章登录 Vue3 五大痛点,Vue3-OOP 都给解决了!!回到过去求知若饥,虚心若愚 30 人赞同了该文章 一。 ref 的 value 之痛为了解决 ref 的 value 问题,尤大不知道废了多少脑细胞,专门写了 ref sugar 提案来解决,但在我看来还是太繁琐,来看看 vue3-oop 怎么解决的吧! class Count extends VueComponent {@Mut() count = 1render() {return this.count++}>{this.count}}}只需要使用 @Mut 装饰器就不用考虑 ref reactive 相关的烦恼, Mut 是 mutable 的缩写,表示容易变化的, 标记此装饰器,就代表这个变量变化的时候需要重新 render 了 二。
78 天前 / pingan8787
在开发组件库或者插件,经常会需要区分多种环境构建,从而实现: 提供各种「体积」版本:全量版、精简版、基础版等;提供各种「环境」版本:web 版、nodejs 版等等;提供各种「规范」版本:esm 规范版本、cjs 规范版本、UMD 规范版本等等。那么如何能够方便实现上面功能呢?这种场景就适合使用 Feature Flags,在构建过程中,通过开关的启用和关闭,对构建代码的过程进行动态设置,从而更好的实现 Tree Shaking。 Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。
81 天前 / 开发者头条
以下内容选自「码农周刊 VIP 会员」圈子,每日更新,精彩不断。 扫描下方二维码,即刻加入! 一个基于 Vue 开发的可视化商城搭建平台,包括多页面可视化构建、JSON Schema 生成器(可视化搭建物料控制面板),实现组件流水线式标准接入平台。 最新版本使用 uni-app 重构物料、模板项目,支持生成 H5、小程序多端商城。
85 天前 / 九彩拼盘
前言大家好,我是 webfansplz.这两天肝了个 Vite 插件,本文主要跟大家分享一下它的功能和实现思路。如果你觉得它对你有帮助,请给一个 star 支持作者 . 介绍 vite-plugin-vue-inspector 的功能是点击页面元素,自动打开本地 IDE 并跳转到对应的 Vue 组件。类似于 Vue DevTools 的 Open component in editor 功能。 用法 vite-plugin-vue-inspector 支持 Vue2 & Vue3,并且只需要进行简单的配置就可以使用。 Vue2//vite.config.ts import{defineConfig}from"vite" import{createVuePlugin}from"vite-plugin-vue2" importInspectorfrom"vite-plugin-vue-insp...
87 天前 / 冷星1024
大家好,我是若川。持续组织了 8 个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12参与,每周大家一起学习 200 行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含 20 余篇源码文章。历史面试系列 前言这两天肝了个 Vite 插件,本文主要跟大家分享一下它的功能和实现思路。如果你觉得它对你有帮助,请给一个 star 支持作者 . 介绍 vite-plugin-vue-inspector 的功能是点击页面元素,自动打开本地 IDE 并跳转到对应的 Vue 组件。类似于 Vue DevTools 的 Open component in editor 功能。
91 天前 / 冷星1024
在本文中,我们将探讨一些最常见的 vue js 组件。你可以收藏一波。 Vue Tables-2 地址:https://github.com/matfish2/vue-tables-2 Vue Tables 2 旨在为开发者提供一个功能齐全的工具集,以便用 Vue 创建漂亮而实用的数据表格。数百个商业软件应用正在使用它。此外,Vue Tables 2 正在不断成长、改进,同时也在获得新的功能。 特点 可选行及粘性头部虚拟分页下载客户组件数据的 CSV 有数据层支持的多级分组 Tailwind 主题 Handsontable 地址:https://github.com/handsontable/handsontable/tree/master/wrappers/vue handsontable 是一款页面端的表格交互...
104 天前 / 开发者头条
以下内容选自「码农周刊 VIP 会员」圈子,每日更新,精彩不断。 京东风格的轻量级移动端 Vue2、Vue3 组件库,支持一套代码生成 H5 和小程序。特性 70+ 高质量组件(3.0 持续开发中),覆盖移动端主流场景支持小程序开发基于京东 App 10.0 视觉规范支持按需引用详尽的文档和示例支持 TypeScript 支持服务端渲染(测试阶段)支持定制主题单元测试覆盖(3.0 开发中)...
110 天前 / 逆锋起笔
正文 网上已经一些运行不错的图床了,比如 SM.MS https://sm.ms/ 图壳 https://imgkr.com 路过图床 https://imgchr.com/ 那为什么我们还要自己搭建图床呢?一来是因为码农总是喜欢折腾,二来是有了自己的图床数据自己存储更安全。那么接下来我们就搞起来。下面是演示地址,可以先看一下搭建完成的效果。https://xiaotuwo.github.io 点击按钮上传图片,完成以后可以复制链接和下载准备前端环境安装 nodejs 自行去 nodejs 官网下载,我们主要是为了使用 npm 工具。 安装淘宝镜像,如果是在国内,下载镜像很慢,所以使用国内的镜像 。
112 天前 / 趣编程
作为前端开发,基本每天都要调试 Vue/React 代码,不知道大家都是怎么调试的,但我猜大概有这么几种: 不调试,直接看代码找问题 console.log 打印日志用 Chrome Devtools 的 debugger 来调试用 VSCode 的 debugger 来调试不同的调试方式效率和体验是不一样的,我现在基本都是用 VSCode debugger 来调试,效率又高、体验又爽。 可能很多同学还不知道怎么用 VSCode 调试网页,这篇文章我就来介绍下。 我们分别看下 React 和 Vue 的: 用 VSCode 调试 React 代码我用 create-react-app 创建了一个 demo 项目...
126 天前 / 冷星1024
Rollup 是一个 JavaScript 模块打包器,它将小块的代码编译并合并成更大、更复杂的代码,比如打包一个库或应用程序。它使用的是 ES Modules 模块化标准,而不是之前的模块化方案,如 CommonJS 和 AMD。ES 模块可以让你自由、无缝地使用你最喜爱库中那些最有用的独立函数,而让你的项目无需包含其他未使用的代码。 近期在团队内组织学习 Rollup 专题,在着重介绍了 Rollup 核心概念和插件的 Hooks 机制后,为了让小伙伴们能够深入了解 Rollup 在实际项目中的应用。
127 天前 / 开发者头条
以下内容节选自「码农周刊 VIP 会员专属邮件周报 Vol.080」,查看完整链接版请微信扫描下方二维码,加入「码农周刊 VIP 会员」。 本期,首先分享的是《Elon Musk 的一些思维习惯》,希望对您有所启发。1)Automatic。Elon 做软件出身倾向于用互联网经验优化火箭制造流程,SpaceX 任何可以没有人的地方就必须没有人,所有可以自动化的工作必须自动化完成; 2)不畏惧失败。Elon 认为失败是一个正常的指标,只有失败才能说明正在走出 comfort zone。没有失败说明就没有尝试新路径,不过也要看到最终成果; 3)Push to extreme。