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。