一、代码分割 一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。 代码分割是一种有效的优化方式。提前把代码切分为多个小块，只下载当前必需的部分，用到哪块下载哪块。就像吃自助餐一样，吃多少拿多少。 早期的代码分割一般通过 webpack...[2024/4/19]

vue3 快速入门系列 - vue3 路由 在vue3 基础上加入路由。 vue3 需要使用 vue-router V4，相对于 v3，大部分的 Vue Router API 都没有变化。 Tip：不了解路由的同学可以看一下笔者之前的文章：vue2 路由 参考：vue2 路由官网、vue3...[2024/4/10]

前言 vue3.4增加了defineModel宏函数，在子组件内修改了defineModel的返回值，父组件上v-model绑定的变量就会被更新。大家都知道v-model是:modelValue和@update:modelValue的语法糖，但是你知道为什么我们在子组件内没有写任何关于props...[2024/4/8]

网上找的没有满意的，决定从若依前后端分离其前端vue2中的crontab进行转换，先上效果 若依v2版：  改v3后：     v2转v3没什么难度，其中有大量的将 this.*** 替换为 ***.value，笔者写了个正则替换，希望可以帮助...[2024/4/8]

需要实现的效果： 1、子菜单如果不是全部选中，一级菜单半选。 2、子菜单全选，一级菜单选中。 3、一级菜单选择，二级菜单全选。 4、没有二级菜单，则只控制一级菜单。 主要用到的属性是checked和halfCheckedKeys，通过手动控制那些菜单选中，那些半选中实现功能。 **页面截...[2024/3/29]

前言 我们每天都在用v-model，并且大家都知道在vue3中v-model是:modelValue和@update:modelValue的语法糖。那你知道v-model指令是如何变成组件上的modelValue属性和@update:modelValue事件呢？将v-model指令转换为mode...[2024/3/26]

好家伙,   今天来手写我们的老伙计vue-router,   1.替换router 新开一个项目,并使用我们手写的router   2.大致结构 let Vue; 保存vue的构造函数 cla VueRouter { constru...[2024/3/13]

前言 我们每天写vue代码时都在用defineProps，但是你有没有思考过下面这些问题。为什么defineProps不需要import导入？为什么不能在非setup顶层使用defineProps？defineProps是如何将声明的 props 自动暴露给模板？ 举几个例子 我们来看几个例子...[2024/3/13]

前言 我们每天写的vue代码都是写在vue文件中，但是浏览器却只认识html、c 、js等文件类型。所以这个时候就需要一个工具将vue文件转换为浏览器能够认识的js文件，想必你第一时间就想到了webpack或者vite。但是webpack和vite本身是没有能力处理vue文件的，其实实际背后生效...[2024/3/7]

前言 上周五晚上8点，开开心心的等着产品验收完毕后就可以顺利上线。结果产品突然找到我说要加需求，并且维护这一块业务的同事已经下班走了，所以只有我来做。虽然内心一万头草泥马在狂奔，但是嘴里还是一口答应没问题。由于这一块业务很复杂并且我也不熟悉，加上还饿着肚子，在梳理代码逻辑的时候我差点崩溃了。需要...[2024/3/1]

01、什么是枚举Enum？ 枚举Enum是在多种语言中都有的一种数据类型，用于表示一组特定相关的常量数据集合，如性别（男、女）、数据状态（可用、禁用）、垂直对齐（顶端、居中、底部）、星期等。特点是数据值固定，不会变，存储和显示的内容不同。 然而在JavaScript中并没有枚举Enum类型...[2024/2/28]

前言 我们每天写vue3项目的时候都会使用setup语法糖，但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以直接使用？为什么import一个组件后就可以直接使用，无需使用components 选项来显式...[2024/2/26]

写在前面 怎么来诠释下现在的心情呢？ 算是比较复杂吧，我也想过关于自己个人问题的事，始终是无解的状态。 35岁，变成了一个没有胆量、小心翼翼的年纪，甚至说慎重到说话都要反复思考的程度，先不说内耗问题了，真的就是负能量爆棚了，我有那么一阵极度怀疑自己丧失了和人沟通的能力。 今天，我cod...[2024/2/23]

前言 从vue3开始vue引入了宏，比如defineProps、defineEmits等。我们每天写vue代码时都会使用到这些宏，但是你有没有思考过vue中的宏到底是什么？为什么这些宏不需要手动从vue中import？为什么只能在setup顶层中使用这些宏？ vue 文件如何渲染到浏览器上 要...[2024/2/21]

玩转 CMS2 上篇研究了样式、请求、evn、mock，感觉对效率的提升没有太明显作用。 比如某个工作需要2天，现在1天可以干完，这就是很大的提升。 提高效率的方法有代码复用、模块化、低代码工具。 目前可以考虑从代码复用方面下手，即使最低级的代码复制也可以。 要快速提高效率，需要对本地项...[2024/2/21]

听我说 从 条件渲染 那一篇，我学习到了如何用Vue对dom节点根据条件显示 但单单有条件还不够啊，有时候数据是一大坨一大坨的数据，如果Vue不提供咱要么使用“v-html” 要么就没办法实现 v-html又感觉太low了，Vue提供了另外的指令更好的实现，那便是：列表渲染 列表渲染：v...[2024/2/7]

追忆 上一节：零基础入门Vue之影分身之术——列表渲染&渲染原理浅析 虽然我深知，大佬告诉我”先学应用层在了解底层，以应用层去理解底层“，但Vue的数据如何检测的我不得不去学 否则，在写代码的时候，可能会出现我难以解释的bug 对此，本篇文章，将记录我对Vue检测数据的理解 ...[2024/2/7]

前言 随着vue3.4版本的发布，defineModel也正式转正了。它可以简化父子组件之间的双向绑定，是目前官方推荐的双向绑定实现方式。 vue3.4以前如何实现双向绑定 大家应该都知道v-model只是一个语法糖，实际就是给组件定义了modelValue属性和监听update:modelV...[2024/2/5]

温故 上一节：零基础入门Vue之皇帝的新衣——样式绑定 在前面的内容能了解到，Vue不仅仅能进行数据渲染还可以对样式进行绑定 并且他能随意的切换样式，但Vue的初衷就是尽量少让使用者操作dom节点 加入你要让指定dom显示或者不显示，该怎么办呢？以目前的东西来说，不拿到dom节点还是做不到...[2024/2/5]

已经用 uni-app+vue3+ts 开发了一段时间，记录一下日常遇见的问题和解决办法 uni-app 中的单端代码 uni-app 是支持多端，如果你想让你的代码，只在部分平台使用，那么就需要用的它的单端处理语法 #ifdef 和 #ifndef 等。 1. #ifdef xxx...[2024/2/2]

前言 随着Svelte和SolidJS的流行，无虚拟DOM模式逐渐开始火了起来。vue也推出了无虚拟DOM模式的版本，就是我们今天要讲的Vue Vapor。 什么是Vue Vapor Vue Vapor是一个无虚拟DOM模式版本的vue。这个仓库是2023年11月9日基于vuej core仓库...[2024/1/26]

专栏分享：vue2源码专栏，vue3源码专栏，vue router源码专栏，玩具项目专栏，硬核??推荐?? 欢迎各位ITer关注点赞收藏?????? Vue2 Diff算法可以参考【Vue2.x源码系列08】Diff算法原理 Vue3 Diff算法可以参考【Vue3.x源码系列06】D...[2024/1/19]

　　本文内容提炼于《Vue.js设计与实现》，全书共 501 页，对 Vue.js 的设计原理从 0 到 1，循序渐进的讲解。 　　篇幅比较长，需要花些时间慢慢阅读，在合适的位置会给出在线示例以供调试。 一、概览 　　Vue.js 是一款声明式框架，注重结果；早年间流行的 jQuery 是典...[2024/1/10]

项目代码同步更新至码云 uni-vue3-ts-template 开发前准备 利用 uni-app 开发，有两种方法： 通过 HBuilderX 创建（需安装 HBuilderX 编辑器） 通过命令行创建（需安装 NodeJS 环境），推荐使用 vscode 编辑器 这里我们使用第2...[2024/1/10]

jQuery.i18n.properties 是 jQuery 老项目的国际化框架，其实国际化方案本质上都大同小异，都是需要用翻译函数包裹词条，然后根据词条文件来进行翻译 就是使用上与其他框架不太一样而已 但由于我们已经基于 vue 框架实现了一个国际化自动处理脚本，脚本会自动用全局函数包裹...[2024/1/8]

除了测试版本之外，uniapp打包好的ipa文件是无法直接安装在普通用户的手机上面，这是苹果的证书和描述文件的机制的原因。 因此我们需要将打包好的ipa文件上架到苹果应用商店，也就是app store。 下面我整理了一篇全程不需要mac os电脑参与的上架苹果应用商店的教程。 教程的第一步...[2024/1/5]

如果有做过项目国际化的应该了解, 国际化的工作项大概包括以下几项： 【词条相关工作】 文本包裹翻译函数，如 $t 提取翻译词条到 json 文件里 翻译并更新 json 文件 【三方库相关工作】 组件库的国际化配置，如 element-ui 组件库 其他有词条场景的三方库的国际化配置 ...[2024/1/5]

Ref & ShallowRef ref：接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value 可以将 ref 看成 reactive 的一个变形版本，这是由于 reactive 内部采用 Proxy 来实现，而 ...[2024/1/5]

返回JSON数据类 public cla LeaveMe ageTreeTable { public LeaveMe ageTreeTable() { this.children = new List<LeaveMe ageTreeTable>(...[2023/12/29]

前言 经过上一篇文章的介绍，已经将这个计算器的计算功能实现了，接下来就是我们项目当中的一个发包上线阶段，我模拟一下，目的就是为了给大家介绍一下，uni-app是如何打包成网页的。 除了可以打包成网页，uni-app还可以打包成小程序、App、H5、快应用等等，后面在单独开文章详细介绍。 正...[2023/12/29]

前言 大家好，我是 BNTang, 在上一节文章中，我给大家详细的介绍了如何将我开发好的项目打包为网页。 趁热打铁，在来一篇文章，给大家详细的介绍如何将项目打包为小程序。 正文 打开微信小程序呢，其实还是需要进行一些相关的配置的 首先打开微信小程序的配置页面找到 manifest.jso...[2023/12/29]

前言 经过前面的文章介绍，基本上 UniApp 的内容就介绍完毕了 那么从本文开始，我们就开始进行一个项目的实战 这次做的项目是苹果计算器，这个项目的难度不是很大，但是也不是很简单，适合练手 创建项目 打开 HBuilderX，点击左上角 文件 -> 新建 -> 项目： ...[2023/12/26]

前言 本文主要介绍uni-app中动态计算字体大小的方法 原因呢就是在上一篇文章当中我发现输入的内容已经超过了展示区域 于是我就想到了动态计算字体大小的方法，这样就可以保证输入的内容不会超过展示区域 正文 首先要改造的是 style="font-size: 180rpx;" ...[2023/12/26]

前言 好，经过上个章节的介绍完毕之后，了解了一下 uni-app-OptionAPI应用生命周期和页面生命周期 那么了解完了uni-app-OptionAPI应用生命周期和页面生命周期之后，这篇文章来给大家介绍一下 uni-app-CompositionAPI应用生命周期和页面生命周期 Co...[2023/12/11]

本文本记录了使用 Vue3+Vite+ElementPlus 从0开始搭建一个前端工程会面临的常见问题，没有技术深度，但全都是解决实际问题的干货，可以当作是问题手册以备后用。本人日常工作偏后端开发，因此，文中的一些前端术语描述可能不严谨，敬请谅解。重点是：这里记录的解决方案都是行之有效果的，拿来...[2023/12/8]

前言 好，经过我们前面文章的编写，大家可以了解到微信小程序开发相关的知识，了解完了这个微信小程序开发和云开发之后，从这篇文章开始，我再来给大家写一下关于 Uniapp 的知识。 好，开始，那什么是 Uniapp 呢？这个时候我们不管三七二十一，先打开我们 Uniapp 官方文档，它官方地址...[2023/12/8]

你好，我是 Kagol。 非常高兴跟大家宣布，2023年11月30日，OpenTiny Vue 发布了 v3.12.0 ??。 OpenTiny 每次大版本发布，都会给大家带来一些实用的新特性，10.24 我们发布了 v3.11.0 版本，增加了富文本、ColorPicker 等4个新组件，...[2023/12/8]

前言 好，经过上个章节的介绍完毕之后，了解了一下 uni-app-全局样式和局部样式 那么了解完了全局样式和局部样式之后，这篇文章我再来给大家介绍一下 UniApp 中全局数据和局部数据 搭建演示环境 创建一个全新的项目： 然后在配置一下，微信小程序的 AppId，直接去之前的项目...[2023/12/8]

公共loading是项目系统中很常见的场景，处理方式也不外乎三个步骤： 1.通过全局状态管理定义状态值（vuex、pinia等）。 2.在程序主入口监听状态值变化，从而展示/隐藏laoding动画。 3.在请求和相应拦截器中变更状态值。 第一二步骤处理大同小异，但在第三步中，网上很多博文...[2023/11/22]

本文学习vue2.0源码，主要从new Vue()时发生了什么和页面的响应式更新2个维度了解Vue.js的原理。以一个简单的vue代码为例，介绍了这个代码编译运行的流程，在流程中原始DOM的信息会被解析转换，存在不同的对象中。其中关键的对象有el、template、ast、code、render...[2023/11/20]

在Vue3中使用Element-Plus分页（Pagination ）组件 开发过程中数据展示会经常使用到，同时分页功能也会添加到页面中。 记：在Vue3中使用Element-Plus分页组件与表格数据实现分页交互。 开始实现 引入表格和分页组件的H5标签。 <strong>...[2023/11/20]

前言 在上一篇【手撕Vuex-模块化共享数据】文章中，已经了解了模块化，与共享数据的注意点。 那么接下来就要在我们自己的 Nuex 中实现共享数据模块化的功能。那么怎么在我们自己的 Nuex 中实现共享数据模块化的功能呢？ 处理数据 也非常的简单，是不是就是处理一下子模块的数据，处理一下子模...[2023/11/8]

专栏分享：vue2源码专栏，vue3源码专栏，vue router源码专栏，玩具项目专栏，硬核??推荐?? 欢迎各位ITer关注点赞收藏?????? 背景 以下是柏成根据Vue3官方课程整理的响应式书面文档 - 第二节，课程链接在此：Proxy and Reflect - Vue 3 R...[2023/11/6]

经过上一篇章介绍，完成了实现 getters 的功能，那么接下来本篇将会实现 mutations 的功能。 在实现之前我们先来回顾一下 mutations 的使用。 将官方的 Vuex 导入进来，因为我们的还没有实现，现用一下官方的，来演示一下 mutations 的使用。 mutat...[2023/11/1]

好家伙,   补了一下watch的多种用法   1.属性: 方法(最常用) 使用最广泛的方式是将watch选项设置为一个对象，对象的属性是要观测的数据属性，值是一个回调函数，该回调函数会在属性变化时触发。例如： watch: { firstName: func...[2023/10/25]

经过上一篇文章的学习，实现了界面驱动数据更新，接下来实现一下其它相关的指令，比如事件相关的指令，v-on 这个指令的使用频率还是很高的，所以我们先来实现这个指令。 v-on 的作用是什么，是不是可以给某一个元素绑定一个事件。 紧接着了解了 v-on 的作用之后，我在 example.html...[2023/10/23]

公司有一个新需求，在原来项目基础上开发，项目中使用 Ant Design Vue，版本是 1.X ,在此记录下遇到的问题；对于没有使用过或者使用程度不深的同学来说，希望可以帮助你在开发中遇到问题时有个参考。对于已经熟练使用的同学，可能这些问题都遇到过，欢迎大家在评论区补充。 1、实现对下拉框显示...[2023/10/23]

好家伙，nextTick, (...这玩意,不太常用)   1.什么是nextTick 在Vue中，nextTick是一个用于异步执行回调函数的方法。 它在Vue更新DOM后被调用，以确保在下一次DOM更新渲染完成后执行回调函数。 而事实上,我们把队列处理的操作封装到了nex...[2023/10/23]

好家伙，   本篇讲的是数据更新请求列队处理   1.一些性能问题 数据更新的核心方法是watcher.updata方法 实际上也就是vm._updata()方法, vm._updata()方法中的patch()方法用于将新的虚拟DOM树与旧的虚拟DOM树进行比较...[2023/10/20]

经过上一篇的介绍，数据驱动界面改变 v-model 的双向绑定已告一段落, 剩余的就以这篇文章来完成。 首先完成我们的 v-html，v-text, 其实很简单，就是将我们之前的 v-model 创建观察者的方法，在 v-html 和 v-text 中再写一次即可，创建属于 v-html 和 ...[2023/10/20]