皮皮网

1.Vue实战项目：电商管理系统（Element-UI）-（4）用户列表增删改查
2.vue3-ref源码解析
3.Vue2.0源码阅读(2) —vue.nextTicket()
4.分享一个基于 Vue.js 和 ant-design-vue 的项项目中后台前端脚手架
5.Vue 3 开发环境实战总结

Vue实战项目：电商管理系统（Element-UI）-（4）用户列表增删改查

       渲染用户列表

       通过作用域插槽渲染操作列，利用elementui中slot-scope获取作用域数据，目实码参考自定义模板。战接使用Tooltip文字提示展示鼠标hover时的口源提示信息，设置enterable属性为false，接口禁止鼠标进入，配置asp 提案系统源码避免遮挡。项项目

       修改用户状态

       将用户状态设置为Switch开关，目实码添加change事件监听状态改变。战接监听函数向修改用户状态接口发送put请求，口源使用message设置请求失败和成功提示。接口

       搜索用户

       为文本框绑定queryInfo.query数据，配置在点击搜索按钮时重新获取更新query属性后的项项目数据。清空文本框数据同时重置所有表单数据，目实码为input输入框添加clearable属性可清空文本框数据，战接并添加clear事件在点击由clearable属性生成的清空按钮时触发。

       添加和修改用户

       自定义邮箱和手机号的校验规则，使用elementui的自定义表单规则。实现对话框中表单的重置功能，为对话框绑定close事件，对话框关闭时调用表单组件的resetFields()方法。修改用户的展示框，控制dialog对话框的显示，通过将:visible.sync中的属性设置为true来控制，点击按钮将其设置为true，实现渲染对应数据功能。

       提交表单完成用户信息的修改，为“修改用户”按钮绑定事件函数，将该列数据的源码理财系统“id”传入到后台接口。后台接口根据id值将需要修改的数据赋值给“editFrom”变量，“editForm”变量通过v-model绑定在修改用户对话框中，通过接口获取对应数据，再通过v-model更新修改过后的值。为修改用户对话框的“确定”按钮绑定事件，点击“确定”重新获取表单，渲染更新后表单的值。

       删除用户

       利用id传入后台接口删除对应用户数据，使用MessageBox弹框提示。

vue3-ref源码解析

       本文深入解析了 Vue3 中的 ref 源码，主要探讨了 ref 的特性、实现原理以及与 reactive、effect 的关系。在阅读本文之前，建议先了解 reactive 和 effect 的基本概念和实现原理。

       reactive 函数能够创建响应式对象，通过 Proxy 实现响应式功能。当修改响应式对象时，Proxy 会通过 trigger 通知所有依赖的 effect 对象执行监听方法。然而，Proxy 不支持基础类型（如 number、string、boolean）作为入参。

       ref 对象是针对 reactive 不支持数据类型的一个补充，它支持基础类型响应式，并提供了更方便的对象替换操作。ref 对象在 value 属性的修改和获取时进行拦截，收集依赖并触发相关 effect 对象。南陵源码出售

       ref 和 shallowRef 是两个主要的 ref 实现方式。ref 支持深度响应式，shallowRef 只支持浅层响应式。ref 的响应式行为通过将 value 属性转化为 reactive 对象来实现，同时存储原始值以判断是否发生修改。

       ref 对象内部使用 RefImpl 类实现，该类接收 raw 和 shallow 参数。当创建 ref 对象时，会检查入参是否为 ref 对象，如果是则直接返回。否则，ref 对象将通过 toReactive 方法将 raw 转化为 reactive 对象，然后存储在 _value 中，以实现深度响应式。

       ref 的 dep 属性与 effect 中的 dep 相关联，使得 ref 能够成为响应式对象。当获取或设置 value 时，ref 会通过 trackRefValue 和 triggerRefValue 方法触发响应式行为，分别在获取和设置值时收集和触发依赖。

       自定义 ref 方法 customRef 允许用户通过传入收集依赖和触发执行的工厂函数，实现更灵活的响应式控制。toRefs 和 toRef 方法提供了从 reactive 对象生成 ref 对象的便利接口，用于解决缓存属性值时失去响应式特性的问题。

       此外，ref 文件还包含了辅助方法，如 triggerRef 用于手动触发 ref 更改，unref 用于获取原始值。proxyRefs 方法将对象中所有 ref 属性值解构访问，cba源码设置仅对第一层属性有效。

       总之，ref 在 Vue3 中提供了一种灵活的响应式数据操作方式，支持基础类型响应式并提供了深度响应式支持。通过结合 reactive、effect 和内部的 dep 管理机制，ref 实现了高效的数据响应式处理。理解 ref 的源码有助于深入掌握 Vue3 中的数据响应式机制。

Vue2.0源码阅读(2) —vue.nextTicket()

       揭开Vue.nextTick之谜

       在vue圈子中，有一句广为流传的“都市传说”：“遇事不决，问nextTick。”这句话背后的nextTick究竟是何物？根据官方文档的解释，nextTick()是在下次DOM更新循环结束之后执行延迟回调。其核心功能是在数据更新后自动调用回调函数，获取更新后的DOM。接下来，我们将深入源码，一探nextTick的真谛。

       将nextTick定义至Vue原型链的代码位于src/core/instance/render.js，具体实现则在src/core/util/next-tick.js。nextTick接受两个参数：函数cd（实际使用场景中，为延迟执行的函数）与this上下文。内部定义了一个回调函数数组callbacks，当cb存在时将其添加至数组，同时将回调函数的上下文指向组件的this；若cb不存在，则将resolve函数添加至数组。接着判断pending值，其用于控制状态。98源码测试当pending值为false，表示无回调函数正在执行，进而执行timerFunc函数。timerFunc函数在cb不存在且浏览器支持Promise时返回一个Promise，允许在不传入回调的情况下通过this.$nextTick().then(cb)进行调用。

       timerFunc看似实现关键，实则执行逻辑围绕Promise、MutationObserver、setImmediate与setTimeout(f(), 0)等方法展开。若系统支持Promise，则使用Promise执行延时；不支持Promise时，依次判断是否支持MutationObserver、setImmediate或setTimeout，选择合适的方法执行flushCallbacks函数。

       flushCallbacks函数负责将pending状态设为false，并将callbacks数组复制至copies数组，清空callbacks。接着遍历copies数组，依次执行回调函数（即传入nextTick的cb函数）。至此，我们理解了nextTick的核心机制与使用场景。

       MutationObserver：在源码阅读中，我们发现若系统不支持Promise，则使用MutationObserver作为替代方案。MutationObserver是监听DOM树变更的接口，其设计用于替代DOM3 Events规范中的Mutation Events功能。简单理解，MutationObserver用于监听DOM变动，当DOM发生任何更改时，它会接收到通知。

       MutationObserver的使用方式如代码所示，实例化MutationObserver并指定回调函数与需要监控的DOM元素与变动类型。调用observer.observe(dom, options)方法进行观察。options对象中定义了需要观察的变动类型，如childList、attributes、characterData等。

       下面通过一个简单的demo来理解MutationObserver。在运行该demo后，屏幕显示了，说明文本节点已添加至DOM中。然而，控制台打印的I值只有1，这意味着DOM变动只触发了一次。这表明MutationObserver在异步处理DOM变化，直到页面上所有DOM操作完成时执行一次，实现高效处理。

       在nextTick中，MutationObserver用于触发flushCallbacks函数。通过文本节点的操作触发MutationObserver，从而执行flushCallbacks。至此，我们理解了nextTick的实现与MutationObserver的用法。

       源码阅读让我们发现，nextTick并非传说中的神物，其主要应用场合与DOM操作相关。在遇到无法在DOM更新前操作DOM的情况时，可以考虑使用nextTick。由于nextTick在DOM更新循环结束后执行，因此在created钩子中操作DOM成为可能，实现目标。

分享一个基于 Vue.js 和 ant-design-vue 的中后台前端脚手架

       为了解决公司内部多个项目中常见的列表、详情和弹框等重复页面问题，我们开发并维护了一个基于Vue.js 2.x和ant-design-vue的中后台前端脚手架。这款脚手架已成功应用于5个以上的系统，未来将持续优化，现提供在线效果预览。

       这个脚手架旨在快速构建一致性风格的中后台系统前端，兼容性良好。它包含一套详细的配置，如环境变量，如BASE_URL用于设置路由前缀，VUE_APP_API_PREFIX用于定制接口请求前缀，以及VUE_APP_LS_PREFIX等用于存储管理的配置。

       脚手架中的环境变量可以根据业务需求进行个性化设置，如VUE_APP_PRIVATE用于决定是否使用私有云部署，VUE_APP_USE_MOCKER用于选择mock服务，VUE_APP_BUILD_ENV则支持多环境打包配置。此外，还提供了打包优化、主题配置和接口代理配置功能，以提升开发效率和性能。

       在定制部分，开发者可以通过配置菜单风格、主题色等，脚手架会自动隐藏预览环境的定制入口。对于请求，脚手架支持自定义mock数据，动态和静态路由也有详细配置选项。权限管理则通过用户信息和权限点实现，方便按钮级别的控制。

       使用时，只需按照文档进行操作，如安装脚手架、打包部署、配置mock服务等，脚手架的维护和文档更新将同步进行。欢迎访问GitHub地址，下载并尝试这款中后台前端脚手架。

Vue 3 开发环境实战总结

       随着 Vue 3 正式版的发布，前端界掀起了一阵讨论的热潮。本文将总结我在使用 Vue 3 进行开发一个月以来的经验和观点，主要围绕开发环境、配置、数据模拟与模块导入等方面进行探讨。

       开发环境选择：

       在构建 Vue 3 项目时，常用工具包括 vue-cli 和 vite。考虑到 vite 的兼容性尚待验证，我选择使用 vue-cli 来快速搭建项目。vue-cli 是官方推荐的脚手架工具，易于上手且功能全面。

       外部依赖配置：

       对于外部依赖的配置，externals 是关键一环。externals 用于指定项目中不需要打包的外部模块，比如 jQuery。通过正确设置 externals，可以有效节省服务器空间、减少项目间的代码重复和提高编译效率。例如，配置 externals 后，无需再安装 jQuery，而通过引入 script 标签直接引用即可。

       模拟数据策略：

       前端开发中，模拟数据是提高效率的常用手段。市面上有多种方法可选，如 Mock.js、Postman、自建 JSON 文件及使用 webpack 的 proxy 功能。Mock.js 提供了便捷的接口数据模拟，配置简单且功能齐全，但可能存在维护性问题。Postman 的 mock 功能虽然简便，但安全性较低。自建 JSON 文件和使用 webpack 的 proxy 功能相结合，能够灵活配置数据，同时支持开发和生产环境的切换。

       模块导入与 externals 结合：

       在 Vue 3 中，模块导入遵循与 Vue 2 类似的规则，但需结合 TypeScript 进行更精确的类型定义。当使用 externals 设置时，通常不再需要安装外部模块。然而，在 ESLint 代码检查中，若未安装外部模块，可能会引发错误。解决方法是在项目中安装对应依赖的声明文件（.d.ts），即使这些文件在依赖库中也存在。这样处理虽增加了 node_modules 的体积，但避免了在编译过程中将外部库打包到项目中。

       处理无声明文件的库：

       对于老旧或无声明文件的库，可通过在 `shims-vue.d.ts` 文件中为库定义类型来解决。例如，处理微信 JS 文件时，需要明确其类型信息，以确保 TypeScript 能正确识别和提示。

       综上所述，Vue 3 开发环境实战总结着重于外部依赖管理、数据模拟与模块导入策略。合理利用这些工具与技巧，可以有效提升开发效率和项目质量。