本文将介绍如何使用Vue3来封装一些比较有用的组合API,主要包括背景、实现思路以及一些思考。
就我自己的感觉而言,Hook与Composition API概念是很类似的,事实上在React大部分可用的Hook都可以使用Vue3再实现一遍。
为了拼写方便,下文内容均使用Hook代替Composition API。
useRequest背景使用hook来封装一组数据的操作是很容易的,例如下面的useBook
123456789101112131415161718192021222324252627282930import {ref, onMounted} from 'vue'function fetchBookList() { return new Promise((resolve) => { setTimeout(() => { resolve([1, 2, 3]) }, 1000) })}export funct ...
Vue 的设计模式介绍一下 MVVM 模式,和 MVC 模式有什么区别?MVVM 即 Model-View-ViewModel 的简写,即模型-视图-视图模型。模型(Model)指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是 MVVM 模式的核心,它是连接 View 和 Model 的桥梁。视图模型有两个方向的作用:1.将模型(Model)转化成视图(View),即将后端传递的数据转化成所看到的页面,实现的方式是:数据绑定。2.将视图(View)转化成模型(Model),即将所看到的页面转化成后端的数据,实现的方式是:DOM 事件监听。当这两个方向的数据转换都实现时,我们称之为数据的双向绑定。
MVVM模型图解:
MVC 是 Model-View-Controller 的简写,即模型-视图-控制器。M 和 V 指的意思和 MVVM 中的 M 和 V 意思一样。C 即 Controller 指的是页面业务逻辑。使用 MVC 的目的就是将 M 和 V 的代码分离。MVC 是单向通信,也就是 View 跟 Model ,必须通过 Controll ...
前端开发
未读JavaScript 变量var、let、const 的差异?相同点var、let、const 三者都可以声明变量。变量可以看作盒子,变量名就是盒子名称,值是放在盒子里的东西。
1234567891011121314151617// var 声明变量,初始值可选var name;var name = "Lucy";// let 声明变量,初始值可选let age;let age = 12;// const 声明常量,必须要赋初始值const city = "Beijing";// 如果给常量重新赋值会报错const city = "Shanghai"; // Uncaught SyntaxError: Identifier 'city' has alre ady been declared// 如果常量的值是对象(数组),不可以修改常量指向的引用,但是可以修改引用的值const cities = ["Beijing"];cities[0] = ["Shanghai"] ...
创建项目1npm init vite@latest name -- --template vue-ts
编码规范配置
ESLint:编码规范检查Prettier:代码格式化工具
安装12345678# eslint => ESLint的核心代码# @typescript-eslint/parser => ESLint的解析器,用于解析ts,从而检查和规范ts代码# @typescript-eslint/eslint-plugin => 一个ESLint插件,包含了各类定义好的检测ts代码的规范# eslint-plugin-vue => vue3的代码校验# prettier => prettier插件的核心代码# eslint-config-prettier => 解决ESLint中的样式规范和prettier中样式规范的冲突,以prettier的样式规范为准,使ESLint中的样式规范自动失效# eslint-plugin-prettier => 将prettier作为ESLint规范来使用cnpm install --save-d ...
1. Vue3简介
2020年9月18日,Vue.js发布版3.0版本,代号:One Piece(n
经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者
官方发版地址:Release v3.0.0 One Piece · vuejs/core
截止2023年10月,最新的公开版本为:3.3.4
1.1. 【性能的提升】
打包大小减少41%。
初次渲染快55%, 更新渲染快133%。
内存减少54%。
1.2.【 源码的升级】
使用Proxy代替defineProperty实现响应式。
重写虚拟DOM的实现和Tree-Shaking。
1.3. 【拥抱TypeScript】
Vue3可以更好的支持TypeScript。
1.4. 【新的特性】
Composition API(组合API):
setup
ref与reactive
computed与watch
……
新的内置组件:
Fragment
Teleport
Suspense
……
其他改变:
新的生命周期钩子
data 选项应始终被声明为一个函数 ...
1、免费视频
▼ 高清视频
简介
🌐 Pixabay
免登录、CC0版权、无下载限制、支持中文。
🌐 Pexels
免登录、CC0版权、无下载限制、支持中文。
🌐 Coverr
免登录、CC0版权、无下载限制。
🌐 Mixkit
免登录、CC0版权、无下载限制。
🌐 Vidsplay
免登录、CC0版权、无下载限制。
🌐 ISO Republic
免登录、CC0版权、无下载限制。
🌐 Videezy
免登录、CC0版权、无下载限制、免费使用需要署名。
🌐 Videvo
免登录、CC0版权、无下载限制、免费使用需要署名。
🌐 Freepik
免登录、CC0版权、无下载限制、免费使用需要署名。
▼ 小众视频
简介
🌐 Motion Places
免登录、CC0 版权、无下载限制、小众视频、多为延时摄影。
🌐 Mazwai
免登录、CC0 版权、无下载限制、小众视频、多为电影风格。
🌐 Dareful
免登录、CC0 版权、无下载限制、小众视频、多为自然景色。
🌐 FOCA
免登录、CC0 版权、无下载限 ...
1、中文字体
▼ 免费商用
简介
🌐 字集
免费商用字体库,大概是 2020 年最全的免费可商用字体库。👍
🌐 猫啃网
免费商用字体库,有 图文版、预览版、表格版 等多种方法,并提供下载。
🌐 自由字体
免费商用字体库,附有字体使用样版,确保是商用免费字体,不会有版权纠纷。
🌐 洋芋田
免费商用字体库,收录了 140+ 字体,确保是商用免费字体,不会有版权纠纷。
🌐 CN Fonts
免费商用字体库,收录了 180+ 字体,确保是商用免费字体,不会有版权纠纷。
🌐 100font
免费商用字体库,专门收录免费商用字体,通过网盘下载。
🌐 SHEJIDT
免费商用字体库,专门收录免费商用字体,通过网盘下载。
🌐 51Font
免费商用字体库,专门收录免费商用字体,通过网盘下载。
🌐 900免费字体
免费商用字体库,网友整理的免费商用字体集合,通过网盘下载,提取码:52pj
▼ 字体资讯
简介
🌐 The Type
字体资讯网站。
🌐 找字网
字体资讯网站。
🌐 字客网
字体资讯网站。
🌐 字魂网
字 ...
1、音效素材
▼ 国内网站
简介
🌐 爱给网
要登陆、CC0 版权、支持中文、下载需付费。
🌐 淘声网
免登陆、CC0 版权、支持中文、聚合搜索引擎。
🌐 耳聆网
要登陆、CC0 版权、支持中文。
🌐 站长素材
免登陆、版权不明,商用需谨慎。
▼ 国外网站
简介
🌐 Pixabay
免登陆、CC0 版权、无下载限制。
🌐 Mixkit
免登陆、CC0 版权、无下载限制。
🌐 FindSounds
免登陆、CC0 版权、无下载限制。
🌐 SoundEffects+
免登陆、CC0 版权、无下载限制。
🌐 SoundGator
免登陆、CC0 版权、无下载限制。
🌐 小森平
免登陆、CC0 版权、无下载限制。
🌐 Videvo
免登陆、CC0 版权、无下载限制、免费使用需署名。
🌐 Freesound
要登陆、CC0 版权、无下载限制、免费使用需署名。
🌐 SoundBible
免登陆、CC0 版权、无下载限制、免费使用需署名。
🌐 OrangeSounds
免登陆、CC0 版权、无下载限制、免费 ...
1、小游戏
▼ 打发时间
—
—
—
魔术键盘
海带鱼拍脸
指出不一样
各式各样生日歌
人类时钟
在线扇耳光
在线放烟花
无聊网站传送门
画线为雕
魔法人型师
Yes Or No?
亚马逊雷人商品
堆沙子游戏
无限二分法
鼠标指针在哪?
真不是双胞胎?
▼ 休闲解压
便携小空调
童年小电视
全球自驾游体验
深呼吸放松 60 秒
清凉小风扇
蒙娜丽莎展馆
有趣谷歌街景图
静心呼吸 感受平静
在线养金鱼
猫的无限循环
无家可归的玩偶
短暂的旅行
全球窗户共享
2 分钟什么也不干
▼ 学会思考
信任的进化
各种各样的自我测试
选择你相信的现实
人生清单检查表
群体的智慧与愚蠢
20个问题猜你想什么
假新闻是怎样炼成的
写给未来的自己 1
经典逻辑推理游戏
贾斯纳的猫
如何记忆任何东西
写给未来的自己 2
IQ 测试题
心理健康测试
一张纸折N次的厚度
心理学测试
和焦虑一起冒险!
DidYouKnow 冷知识
▼ 身体测试
听觉测试
眼睛的幻觉
色盲色弱测试
全球视觉错觉收集
点击选择框
...