今晚心潮澎湃写下了下半年的计划，加油搞下去吧，任务不分先后，加油，下半年[ ] 博客主题更新v2.0[ ] nestjs[x] vue3 快速入门文章[ ] pinia 入门文章[x] 看书《你不知道JavaScript》上[x] 看书《你不知道JavaScript》中[ ] 看书《你不知道JavaScript》下前端功能：[x] 虚拟滚动条[ ] 虚拟列表[ ] 上拉刷新[ ] 下拉刷新[x] autosize input[x] length[x] 复制功能[x] uuid总结下半年这几个月也是攒足了劲了，好多东西混在一起，随着时间有些东西都忘了，哈哈。。。还好写了博客，回头用的时候来...
什么是uuidUUID 是 通用唯一识别码（Universally Unique Identifier）的缩写，其目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。如此一来，每个人都可以创建不与其它人冲突的UUID。uuid是指在一台机器上生成的数字，它保证对在同一时空中的所有机器都是唯一的说白了就是生成唯一标识符的作用，那么它的重复几率就一定要极低。每秒产生10亿笔UUID，100年后只产生一次重复的机率是50%。如果地球上每个人都各有6亿笔UUID，发生一次重复的机率是50%所以我们在日常使用中，可以不用考虑重复性的问题，几率非常非常小...
基本概念问题的起源：前后端分离在前后端开发的时候，前端的数据基本都是通过api请求获取到的，但是后端可能在开发的时间上与前端不一致，这就导致前端常常需要等待后端提供接口，等待会耗去很多开发时间，所以我们经常做的方式就是自己模拟数据（假数据时代）。比如写个定时器返回一个数据对象，或者使用一个json文件，去模拟请求。但是这些其实都并不方便，每次都要自己去写一堆数据，如果是json格式还不能for循环，以及一些随机数据，最重要的是这些代码最终都得删除，因为耦合在业务代码中，而且我们的请求并不是真正的请求代码，最终在后端接口出来后我们还得改一遍代码。难道就不能前端模拟的效果和真实请求一样，后端...
动态路由这个其实在3版也有，不过3版原来使用的api是addRoutes，这个api顾名思义，就是可以传入一个路由数组来进行注册，后来被废弃，现在3版和4版统一采用addRouteapi。addRoute一次只能添加一个路由，但是有两种用法：添加一条新路由router.addRoute({ path: "/about", name: "About", component: () => import("../views/About.vue"), })给已存在的路由注册一个子路由，父路由必须有name属性route...
创建路由实例方式改变3版本的时候是通过new的方式创建路由实例，4版本是改用了createRouter的方式：import { createRouter } from 'vue-router' const router = createRouter({ // ... })路由模式配置改变3版本路由模式是由mode属性控制，值为字符串，现在通过import引入不同函数来创建不同的路由模式："history"改为createWebHistory()"hash"改为createWebHashHistory()"abst...
vue3直接移除了filter过滤器，官方推荐，如果要使用过滤器可以使用computed计算属性和method函数来代替。如果使用了全局过滤器，官方也提供了一个属性来进行迁移修复，但是也只推荐用于迁移。const app = createApp(App) //给当前app的全局属性上挂载一个过滤器对象 app.config.globalProperties.$filters = { currencyUSD(value) { return '$' + value } }使用的时候：<template> <h1>Bank Ac...
vue2我们在监听按键事件的时候，是可以通过在事件后面加上按键码来实现监听某一个按键的。<input @keyup.13="submit" />甚至我们还可以使用按钮别名alias的方式调用<input @keyup.enter="submit" />还可以全局自定义别名，通过Vue.config.keyCodes属性。Vue.config.keyCodes = { f1: 112 }随着ECMAScript的标准推荐，官方已经不推荐使用keyCode键码了，这个功能在js的官方定义上是一个已弃用的状态，最新的标准是使用...
在vue2的时候，我们可以通过$on、$off、$once、$emit来实现一个事件总线EventBus，但是vue3的时候，又换了一套逻辑思想。官方不鼓励使用EventBus在组件之间进行通信，虽然短期内确实是非常简单的解决方案，但是从长远来看，它总是很难维护的，所以官方更加推荐使用其他方式：父子组件之间可以通过Props和自定义事件来进行沟通，如果是兄弟组件，可以通过父级组件来沟通使用Provide / inject方式来跨层级沟通，比如与插槽的内容组件。Provide / inject也可以用于跨层级沟通，以避免props，emit事件层级过深的问题通过使用插槽的形式来避免层级沟通...
transition动画的变化就是vue3调整了一下动画类名，原来vue2是：.v-enter{ opacity: 0; } .v-leave{ opacity: 1; }这两个在vue3中改为：.v-enter-from{ opacity: 0; } .v-leave-to{ opacity: 1; }其相关属性也对应发生了变化：leave-class被重命名为 leave-from-class（可以写成 leaveFromClass在渲染函数或 JSX 中）enter-class被重命名为 enter-from-class（可以写成 enterFromClass在...
vue3将自定义指令的生命钩子函数全部改为与组件的生命钩子函数相同，原来vue2时，自定义指令的生命钩子是一套完全不同的，但是也正因为如此，它的钩子函数有点晦涩难懂，这次统一了我觉得是一件非常好的事情，让我们的记忆力压力减轻了很多，也方便了我们的理解。vue3写法：const myDirective = { // 在绑定元素的 attribute 前 // 或事件监听器应用前调用 created(el, binding, vnode, prevVnode) { // 下面会介绍各个参数的细节 }, // 在元素被插入到 DOM 前调用 beforeMoun...
书接上文，我们的函数式组件在vue3里只能声明一个函数再通过h函数组合处理，然后导出使用，你会发现这个组件是一个函数类型。然后我再去看一下vue2时，我们的异步组件引入方式：const asyncModal = () => import('./Modal.vue')你会发现除了异步组件也是一个函数类型，这就尴尬了，怎么区分呢？vue3提供了一个defineAsyncComponent函数用于区分异步组件。import { defineAsyncComponent } from 'vue' const asyncModal = defineAs...
由于vue3对dom的渲染做了优化，优化了diff算法，在vue2时不管元素是否参与更新，都会被重新创建，vue3则针对不参与更新的元素，打上一个静态标记，此时这个元素只会创建一次，后续的渲染更新则不会重新创建。于是函数式组件在vue3中性能的提升可以忽略不计，于是functional组件的声明被移除，不在支持：template中不能再写上functional来表示函数式组件vue组件中的{ functional: true }选项也被删除但是，这也并不意味着无法创建函数式组件了，vue3也有提供创建的方式，但是需要引入h函数。创建一个js组件：_test.js_import { h }...
vue3将一些全局性的api作为一个可以被import引入的功能来使用，至于为什么这么做，我们稍后再谈，具体有哪些api就不一一说明了，我们举个例子就行，比如nextTick。在vue2的时候，如果我们需要使用它，就必须通过Vue.nextTick的方式来调用：import Vue from 'vue' Vue.nextTick(() => { // something DOM-related })现在vue3可以这样：import { nextTick } from 'vue' nextTick(() => { // so...
vue3提供了createRenderer用于用户自定义控制渲染，这样的好处就是方便在不同平台之间的使用！就拿weex来说，它是一个跨平台的移动端解决方案，除了能够一套代码适配多个系统之外，其实还承载热更新的能力，我们都知道web页面是动态的，代码上传后用户刷新页面就能拿到最新的效果，这个效果其实在原生app上是很难做到的。而weex是阿里的产物，他们的业务需求非常需要动态更新的功能，就拿淘宝来说，一个店铺的装修，当然是希望装修完立马就能给用户呈现效果，当然用web网页就可以啊，但是web网页它没有app级的体验，这两个东西就好像鱼和熊掌一样，于是乎在两者兼具的路上折腾了很多，weex也...
在vue2的时候，我们的自定义事件是通过this.$emit进行触发的，并没有统一的某一处属性进行定义，这其实会导致一个问题，当代码量上升一定程度后，后面来维护的人很难快速了解这个组件的自定义事件有哪些。vue3版本提供了emits配置，它可以定义当前组件触发的自定义事件有哪些，并且还支持参数校验，如果绑定的事件没有在emits中显式声明，那么就会作为$attrs属性挂载到根节点上，这个效果在fragment组件是无效的。为此vue3放弃了.native修饰符，一方面是因为emits的存在，可以更加明确的知道该组件支持什么自定义事件，另一方面是因为未声明的事件会默认绑定到根节点上，所以....
在vue2的时候，我们在编写组件时往往是需要提供一个根元素的，这个根元素会作为虚拟dom的差异算法依赖，但是有的时候往往会带来一些很难受的体验，比如会带来很多的无必要的元素嵌套，常见的嵌套应该就是div了，如果你曾经尝试写过递归一个导航组件的话。这个问题其实在react中也出现过，所以它在v16版本中提供了Fragments功能，它会将多个根元素的内容包裹在一个名为React.Fragment的元素下，这样就不需要多余的“根元素”；为此它还得在渲染时进行特殊处理，所以当时业界吹了一把react牛逼，重写了虚拟dom算法。在vue2阶段，我个人也尝试了好多办法，包括尝试使用这种方式：<...
官方文档：Teleport该组件可以将插槽接收的内容渲染到指定的dom位置，常见的一个业务需求就是model弹窗了，我们有时候会在子组件里面去书写一个弹窗，但是这个弹窗是全局性的，为了防止被定位元素影响，我们vue2时会在mounted生命钩子里手动将model的dom传入body里面，而且还得在销毁时从body移除。vue3提供了teleport组件，它和react的传送门组件其实效果相同，它有两个props属性：toto支持字符串和html元素，如果是字符串，指的是css选择器，而html元素则是dom。disabled接收一个布尔值，表示是否禁用传送门，通过这个属性我们可以很方便的...
前言使用了ts最头疼的是什么，除了类型声明应该没有第二家了，那么在vue3中如何正确的声明ts类型，代表着我们踏出了认识vue3的第一步，这非常重要，所以为此水个文章，分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要，因为一直使用的Vetur，而且这个插件刚出来时并不完善，各种视频up讲的那个一键分屏功能其实也并不好用，虽然是个很有意思的东西，但是没有那种非要使用它的点，所以当时的我怀着这么一个疑问？为什么要用Volar ？现在我就通过两张图告诉你，它有多香！我们在template里面写代码，绑定变量最烦的是什么，就是我们写了个对象，但是忘了它的属性有哪些啊，使用...
前言看本文章前建议先看上一篇《Cocos Creator 制作仿DNF血条》，这样就会明白优化的处理有哪些了。上一章中，我们的血条它的逻辑是两条血条来回切换，包括颜色，宽度，层级，控制起来其实是非常不方便的， 逻辑也变得复杂了，而且没有考虑到秒杀的情况下血条的处理，所以这次根据同事提供的好主意我重新写了一版。教程原理我们可以将第二条血条作为一个固定的底色来控制，只有当第二条血没有的时候，我们将其设置白色的，这样每次血条width控制其实都在第一条上面。也就是说，血条的宽度控制其实一直是第一条在循环控制，扣完了马上切换成第二条的颜色，然后宽度设满，第二条的颜色变成第三条，直到没有血条了，第...
前言最近在想boss的血条制作，比较简单的就是单条血条，但是我想弄个想类似dnf那种，血条减完一条还有一条的那种，于是有了本篇文章预览图教程节点结构由于cocos原生没有这种血条，我们需要手动创建，我先通过两个单色精灵模拟血条的框架，大概就是一个大的节点里面包含一个小的节点，两个节点颜色不一致，里面的节点宽高都小4px，这样就模拟出边框的效果了。然后就是血条了，我的原理是通过两个血条节点进行来回替换实现的，当血量有两管血的时候，一开始就扣除时控制第一条血条的width，然后这是这个计算非常重要，它需要return出余值，当它存在余值的时候，说明还能扣血， 此时一瞬间将第一条置于第二条的底...
对象扁平化其中objectDit表示的是对象的分割符/** * @description: 对象扁平化 * @param {object} data * @Date: 2022-06-01 17:41:13 * @Author: mulingyuer */ export function objectFlat(data: object, options = { objectDit: "." }): object { let newObj = {}; let process = (key: string, value: any) => { ...
最近评论