更流畅、简洁的软件开发方式

代码在线跑，知识轻松学

Python精品学习库

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

博客搬家 | 分享价值百万资源包

往期视频·干货材料·成员作品 最新动态

技术创作特训营·精选知识专栏

新邀入驻腾讯云开发者社区，福利多多！

如何运用「云、端融合的数智化安全体系」高效护航数据安全

左手AI，右手安全 —— 一汽丰田数字化转型之路

vue的版本一直在不断更新，内部实现方式也是不断的优化，官网也在不断更新。
 既然一切皆在不停地发展，那么我们呢？等着官网更新还是有自己的思考？
 我觉得我们要走在官网的前面，而不是等官网更新后，才知道原来可以这么实现。。。

【vue3】详解单向数据流，大家千万不用为了某某而某某了。

泛型仅仅只是表达传啥都行吗？当然不是，因为js原生就支持“泛型”，本来就啥都可以传的。
 泛型的目的是——约束！泛型相当于制定了一个白名单，名单里面的类型可以传，不在名单里面的不可以传。

Vue3.3 的新功能的体验（下）：泛型组件（Generic Component) 与 defineSlots

先来一个简单的，以前我们有时候想设个name，有时候不想让组件自动继承属性，这时候需要单独设置一个script进行设置，现在简化了操作，直接使用 defineOptions 即可。

Vue3.3 的新功能的一些体验

vue3提供了 mixins和extends，但是尝试之后发现这两种方法只支持纯OptionAPI，设置的data会被识别，但是设置的setup里return 的 reactive，完全无效，setup也没有被执行。
 所以这种方式只能使用于第一种方式。

Vue3实现组件级基类的几种方法

表单里面需要各种各样的子控件，像文本、数字、选择、日期等常见的需求，可以由内部提供组件解决，但是其他各种“奇奇怪怪”的需求怎么办呢？

【摸鱼神器】UI库秒变低代码工具——表单篇（二）子控件

表单是很常见的需求，各种网页、平台、后台管理等，都需要表单，有简单的、也有复杂的，但是目的一致：收集用户的数据，然后提交给后端。

【摸鱼神器】UI库秒变低代码工具——表单篇（一）设计

Vue3对于表单的绑定提供了一种简单的方式：v-model。对于使用者来说非常方便，v-model="name" 就可以了。

用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。

如果基于原生HTML来实现显示数据列表的功能的话，那么需考虑如何创建 table，如何设置css等。
 如果直接使用UI库的话，那么可以简单很多，只需要设置各种属性，然后绑定数据即可。
 以 el-table 为例：

【摸鱼神器】UI库秒变LowCode工具——列表篇（一）设计与实现

这个是不是有点繁琐？尤其是路由的设置和菜单的配置，是不是很雷同？那么能不能简单一点呢？如果可以实现设置一次就全部搞定的话，那么是不会很香呢？

【摸鱼神器】一次搞定 vue3的 路由 + 菜单 + tabs

Vue3 的 props ，分为 composition API 的方式以及 option API 的方式，可以实现运行时判断类型，验证属性值是否符合要求，以及提供默认值等功能。

被迫开始学习Typescript —— vue3的 props 与 interface

TS 的 class 看起来和 ES6 的 Class 有点像，基本上差别不大，除了 可以继承（实现）接口、私有成员、只读等之外。

被迫开始学习Typescript —— class

一开始以为，需要使用 class 来定义呢，学习之后才发现，一般都是使用 interface 来定义的。

被迫开始学习Typescript —— interface

结合 Vuex 和 Pinia， 保留需要的功能，去掉不需要的功能，修改一下看着不习惯的使用方法，最后得到了一个满足自己需要的轻量级状态管理 —— nf - state。

结合 Vuex 和 Pinia 做一个适合自己的状态管理 nf-state

jQuery的使用非常方便，用 script 引入 js文件即可，然后找到DOM即可开始操作。
 而 Vue3 也支持直接用 script 引入的方式，然后使用插值的方式绑定数据，我们来看一下使用方法：

从 jQuery 到 Vue3 的快捷通道

一开始看，是把数据部分变成了 ref，但是仔细一看，原理是toRef。好吧，大概是为了保证响应性，自动结构了。只是还是挺无语的。

简单了解一下pinia的结构

上一篇 https://www.cnblogs.com/jyk/p/15994934.html 介绍了一下基本功能，这里介绍一下关于代码方面的功能。

nf-Press —— 在线文档也可以加载组件和编写代码

vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，这就郁闷了。

vite2 打包的时候vendor-xxx.js文件过大的解决方法

VuePress 是“静态网站生成器”，需要我们自行编写文档，然后交给VuePress变成网站，VuePress 并没有提供编写环境，我知道有很多编写 Markdown 的方式，但是我还是喜欢编写、浏览合为“一体”的方式。

基于 vite2 + Vue3 写一个在线帮助文档工具

父子组件传值可以通过 prosp + emit 来实现，虽然 props 可以传递各种类型，但是却不能传递组件（包括HTML），这样灵活度就差了一些。
 那么怎么办呢？为了提高灵活性，Vue 提供了插槽功能。

通过UI库深入了解Vue的插槽的使用技巧

https://naturefw.gitee.io/nf-rollup-ui-controller/

如何优雅的设置UI库组件的属性？

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

腾讯云开发者社区推出了更流畅、简洁的软件开发方式专栏，为你提供了更流畅、简洁的软件开发方式的相关文章，致力于帮助开发者快速成长与发展。

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐