木灵鱼儿

木灵鱼儿 3年前前端功能

为什么length不准

前言这个问题在最近经常被刷到，虽然我知道怎么解决这个问题，但是为什么会这样，其实并不太明白，所以这次特此开一篇文章讲讲为什么length获取字符位数会不准的问题，以及我们的解决办法。"𠮷".length //2 "💩".length //2𠮷与吉利的吉是一个意思，𠮷是异体写法，古文中会出现。按照我们的认知，上述的length输出应该是1才对，但事实上却是2。计算机是如何存储字符的早期的ASCII字符集在计算机中，所有的数据存储最终都是二进制，如何正确的存储及其识别字符，做法就是定制一个编码规则，让每个字符都由一个个数字来表示，这些数字被...

3151 0 0

length Unicode ASCII

2022下半年计划

木灵鱼儿 3年前教程

2022下半年计划

今晚心潮澎湃写下了下半年的计划，加油搞下去吧，任务不分先后，加油，下半年[ ] 博客主题更新v2.0[ ] nestjs[x] vue3 快速入门文章[ ] pinia 入门文章[x] 看书《你不知道JavaScript》上[x] 看书《你不知道JavaScript》中[ ] 看书《你不知道JavaScript》下前端功能：[x] 虚拟滚动条[ ] 虚拟列表[ ] 上拉刷新[ ] 下拉刷新[x] autosize input[x] length[x] 复制功能[x] uuid总结下半年这几个月也是攒足了劲了，好多东西混在一起，随着时间有些东西都忘了，哈哈。。。还好写了博客，回头用的时候来...

2514 0 0

uuid

木灵鱼儿 3年前前端功能

uuid

什么是uuidUUID 是通用唯一识别码（Universally Unique Identifier）的缩写，其目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。如此一来，每个人都可以创建不与其它人冲突的UUID。uuid是指在一台机器上生成的数字，它保证对在同一时空中的所有机器都是唯一的说白了就是生成唯一标识符的作用，那么它的重复几率就一定要极低。每秒产生10亿笔UUID，100年后只产生一次重复的机率是50%。如果地球上每个人都各有6亿笔UUID，发生一次重复的机率是50%所以我们在日常使用中，可以不用考虑重复性的问题，几率非常非常小...

2526 0 0

uuid 唯一值 nanoid

mock 快速入门

木灵鱼儿 3年前 JavaScript

mock 快速入门

基本概念问题的起源：前后端分离在前后端开发的时候，前端的数据基本都是通过api请求获取到的，但是后端可能在开发的时间上与前端不一致，这就导致前端常常需要等待后端提供接口，等待会耗去很多开发时间，所以我们经常做的方式就是自己模拟数据（假数据时代）。比如写个定时器返回一个数据对象，或者使用一个json文件，去模拟请求。但是这些其实都并不方便，每次都要自己去写一堆数据，如果是json格式还不能for循环，以及一些随机数据，最重要的是这些代码最终都得删除，因为耦合在业务代码中，而且我们的请求并不是真正的请求代码，最终在后端接口出来后我们还得改一遍代码。难道就不能前端模拟的效果和真实请求一样，后端...

3283 1 0

mock

vue-router4 新增功能

木灵鱼儿 3年前 vue3 快速上手

vue-router4 新增功能

动态路由这个其实在3版也有，不过3版原来使用的api是addRoutes，这个api顾名思义，就是可以传入一个路由数组来进行注册，后来被废弃，现在3版和4版统一采用addRouteapi。addRoute一次只能添加一个路由，但是有两种用法：添加一条新路由router.addRoute({ path: "/about", name: "About", component: () => import("../views/About.vue"), })给已存在的路由注册一个子路由，父路由必须有name属性route...

3340 0 0

vue-router vue3 动态路由

vue-router4 一些常见配置的改动

木灵鱼儿 3年前 vue3 快速上手

vue-router4 一些常见配置的改动

创建路由实例方式改变3版本的时候是通过new的方式创建路由实例，4版本是改用了createRouter的方式：import { createRouter } from 'vue-router' const router = createRouter({ // ... })路由模式配置改变3版本路由模式是由mode属性控制，值为字符串，现在通过import引入不同函数来创建不同的路由模式："history"改为createWebHistory()"hash"改为createWebHashHistory()"abst...

5503 0 0

vue-router vue3

vue3 filter过滤器

木灵鱼儿 3年前 vue3 快速上手

vue3 filter过滤器

vue3直接移除了filter过滤器，官方推荐，如果要使用过滤器可以使用computed计算属性和method函数来代替。如果使用了全局过滤器，官方也提供了一个属性来进行迁移修复，但是也只推荐用于迁移。const app = createApp(App) //给当前app的全局属性上挂载一个过滤器对象 app.config.globalProperties.$filters = { currencyUSD(value) { return '$' + value } }使用的时候：<template> <h1>Bank Ac...

6609 4 0

过滤器 filter 全局过滤器

vue3 keyCode修饰符

木灵鱼儿 3年前 vue3 快速上手

vue3 keyCode修饰符

vue2我们在监听按键事件的时候，是可以通过在事件后面加上按键码来实现监听某一个按键的。<input @keyup.13="submit" />甚至我们还可以使用按钮别名alias的方式调用<input @keyup.enter="submit" />还可以全局自定义别名，通过Vue.config.keyCodes属性。Vue.config.keyCodes = { f1: 112 }随着ECMAScript的标准推荐，官方已经不推荐使用keyCode键码了，这个功能在js的官方定义上是一个已弃用的状态，最新的标准是使用...

3249 0 0

修饰符 vue3 keyCode

vue3 取消$on、$off、$once

木灵鱼儿 3年前 vue3 快速上手

vue3 取消$on、$off、$once

在vue2的时候，我们可以通过$on、$off、$once、$emit来实现一个事件总线EventBus，但是vue3的时候，又换了一套逻辑思想。官方不鼓励使用EventBus在组件之间进行通信，虽然短期内确实是非常简单的解决方案，但是从长远来看，它总是很难维护的，所以官方更加推荐使用其他方式：父子组件之间可以通过Props和自定义事件来进行沟通，如果是兄弟组件，可以通过父级组件来沟通使用Provide / inject方式来跨层级沟通，比如与插槽的内容组件。Provide / inject也可以用于跨层级沟通，以避免props，emit事件层级过深的问题通过使用插槽的形式来避免层级沟通...

5593 0 0

vue3 $on $off

vue3 transition、watch、挂载api的变化

木灵鱼儿 3年前 vue3 快速上手

vue3 transition、watch、挂载api的变化

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在...

2579 0 0

transition vue3 watch

vue3 自定义指令

木灵鱼儿 3年前 vue3 快速上手

vue3 自定义指令

vue3将自定义指令的生命钩子函数全部改为与组件的生命钩子函数相同，原来vue2时，自定义指令的生命钩子是一套完全不同的，但是也正因为如此，它的钩子函数有点晦涩难懂，这次统一了我觉得是一件非常好的事情，让我们的记忆力压力减轻了很多，也方便了我们的理解。vue3写法：const myDirective = { // 在绑定元素的 attribute 前 // 或事件监听器应用前调用 created(el, binding, vnode, prevVnode) { // 下面会介绍各个参数的细节 }, // 在元素被插入到 DOM 前调用 beforeMoun...

3304 0 0

自定义指令 vue3

vue3 杂项

木灵鱼儿 3年前 vue3 快速上手

vue3 杂项

data选项在vue3中，data选项已标准化为仅接受 function返回一个 object，在vue2的时候，data可以直接是一个object。vue2：<script> const app = new Vue({ data: { apiKey: 'a1b2c3' } }) </script>vue3:<script> import { createApp } from 'vue' createApp({ data() { return { ...

2697 0 0

data vue3 mixin

vue3 异步组件

木灵鱼儿 3年前 vue3 快速上手

vue3 异步组件

书接上文，我们的函数式组件在vue3里只能声明一个函数再通过h函数组合处理，然后导出使用，你会发现这个组件是一个函数类型。然后我再去看一下vue2时，我们的异步组件引入方式：const asyncModal = () => import('./Modal.vue')你会发现除了异步组件也是一个函数类型，这就尴尬了，怎么区分呢？vue3提供了一个defineAsyncComponent函数用于区分异步组件。import { defineAsyncComponent } from 'vue' const asyncModal = defineAs...

2472 0 0

异步组件 vue3 defineAsyncComponent

vue3 函数式组件 functional

木灵鱼儿 3年前 vue3 快速上手

vue3 函数式组件 functional

由于vue3对dom的渲染做了优化，优化了diff算法，在vue2时不管元素是否参与更新，都会被重新创建，vue3则针对不参与更新的元素，打上一个静态标记，此时这个元素只会创建一次，后续的渲染更新则不会重新创建。于是函数式组件在vue3中性能的提升可以忽略不计，于是functional组件的声明被移除，不在支持：template中不能再写上functional来表示函数式组件vue组件中的{ functional: true }选项也被删除但是，这也并不意味着无法创建函数式组件了，vue3也有提供创建的方式，但是需要引入h函数。创建一个js组件：_test.js_import { h }...

3983 0 0

函数式组件 functional vue3

vue3 渲染函数

木灵鱼儿 3年前 vue3 快速上手

vue3 渲染函数

rendervue2的render他的h函数是本身接的参，vue3则转为es6模块语法，通过import引入，同时也是为了摇树功能。vue2写法：export default { render(h) { return h('div') } }vue3写法：import { h } from 'vue' export default { render() { return h('div') } }这个render其实也是作为vue组件的一个配置属性存在的，事实上我们所有的vue组件，最终都会转为r...

2732 0 0

render diff vue3

vue3 v-model

木灵鱼儿 3年前 vue3 快速上手

vue3 v-model

在vue2的时候，v-model和.sync修饰符在职能上是一样的，容易混淆，在vue3时做了统一，为此移除了.sync修饰符，以及组件内的model选项，新增了可以多个v-model的使用方式。我们先看看vue2的v-model写法：<ChildComponent v-model="pageTitle" />  <ChildComponent :value="pageTitle" @input="pageTitle = $event" />model选项export...

2530 0 0

v-model .sync vue3

vue3 全局api tree-shaking摇树优化

木灵鱼儿 3年前 vue3 快速上手

vue3 全局api tree-shaking摇树优化

vue3将一些全局性的api作为一个可以被import引入的功能来使用，至于为什么这么做，我们稍后再谈，具体有哪些api就不一一说明了，我们举个例子就行，比如nextTick。在vue2的时候，如果我们需要使用它，就必须通过Vue.nextTick的方式来调用：import Vue from 'vue' Vue.nextTick(() => { // something DOM-related })现在vue3可以这样：import { nextTick } from 'vue' nextTick(() => { // so...

3061 0 0

vue3 全局api tree-shaking

vue3 createApp 创建实例

木灵鱼儿 3年前 vue3 快速上手

vue3 createApp 创建实例

在vue2的时候，我们的Vue构造函数上会携带很多全局的api，如果我们想要主要注册一个全局的组件，就不得不这么做：Vue.component('button-counter', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>' })此时，我们创建两个实例：const app1 = new Vue({ el: '#a...

2547 0 0

vue3 createApp

vue3 createRenderer 自定义渲染器

木灵鱼儿 3年前 vue3 快速上手

vue3 createRenderer 自定义渲染器

vue3提供了createRenderer用于用户自定义控制渲染，这样的好处就是方便在不同平台之间的使用！就拿weex来说，它是一个跨平台的移动端解决方案，除了能够一套代码适配多个系统之外，其实还承载热更新的能力，我们都知道web页面是动态的，代码上传后用户刷新页面就能拿到最新的效果，这个效果其实在原生app上是很难做到的。而weex是阿里的产物，他们的业务需求非常需要动态更新的功能，就拿淘宝来说，一个店铺的装修，当然是希望装修完立马就能给用户呈现效果，当然用web网页就可以啊，但是web网页它没有app级的体验，这两个东西就好像鱼和熊掌一样，于是乎在两者兼具的路上折腾了很多，weex也...

3196 62 0

vue3 createRenderer 自定义渲染器

vue3 emits 自定义事件声明

木灵鱼儿 3年前 vue3 快速上手

vue3 emits 自定义事件声明

在vue2的时候，我们的自定义事件是通过this.$emit进行触发的，并没有统一的某一处属性进行定义，这其实会导致一个问题，当代码量上升一定程度后，后面来维护的人很难快速了解这个组件的自定义事件有哪些。vue3版本提供了emits配置，它可以定义当前组件触发的自定义事件有哪些，并且还支持参数校验，如果绑定的事件没有在emits中显式声明，那么就会作为$attrs属性挂载到根节点上，这个效果在fragment组件是无效的。为此vue3放弃了.native修饰符，一方面是因为emits的存在，可以更加明确的知道该组件支持什么自定义事件，另一方面是因为未声明的事件会默认绑定到根节点上，所以....

5156 0 0

.native vue3 emits

vue3 Fragment 片段

木灵鱼儿 3年前 vue3 快速上手

vue3 Fragment 片段

在vue2的时候，我们在编写组件时往往是需要提供一个根元素的，这个根元素会作为虚拟dom的差异算法依赖，但是有的时候往往会带来一些很难受的体验，比如会带来很多的无必要的元素嵌套，常见的嵌套应该就是div了，如果你曾经尝试写过递归一个导航组件的话。这个问题其实在react中也出现过，所以它在v16版本中提供了Fragments功能，它会将多个根元素的内容包裹在一个名为React.Fragment的元素下，这样就不需要多余的“根元素”；为此它还得在渲染时进行特殊处理，所以当时业界吹了一把react牛逼，重写了虚拟dom算法。在vue2阶段，我个人也尝试了好多办法，包括尝试使用这种方式：<...

3485 0 0

虚拟dom diff vue3

vue3 Teleport 传送门

木灵鱼儿 3年前 vue3 快速上手

vue3 Teleport 传送门

官方文档：Teleport该组件可以将插槽接收的内容渲染到指定的dom位置，常见的一个业务需求就是model弹窗了，我们有时候会在子组件里面去书写一个弹窗，但是这个弹窗是全局性的，为了防止被定位元素影响，我们vue2时会在mounted生命钩子里手动将model的dom传入body里面，而且还得在销毁时从body移除。vue3提供了teleport组件，它和react的传送门组件其实效果相同，它有两个props属性：toto支持字符串和html元素，如果是字符串，指的是css选择器，而html元素则是dom。disabled接收一个布尔值，表示是否禁用传送门，通过这个属性我们可以很方便的...

2964 0 0

vue3 Teleport 传送门

正确使用vue3的ts类型声明

木灵鱼儿 3年前 vue 项目实战

正确使用vue3的ts类型声明

前言使用了ts最头疼的是什么，除了类型声明应该没有第二家了，那么在vue3中如何正确的声明ts类型，代表着我们踏出了认识vue3的第一步，这非常重要，所以为此水个文章，分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要，因为一直使用的Vetur，而且这个插件刚出来时并不完善，各种视频up讲的那个一键分屏功能其实也并不好用，虽然是个很有意思的东西，但是没有那种非要使用它的点，所以当时的我怀着这么一个疑问？为什么要用Volar ？现在我就通过两张图告诉你，它有多香！我们在template里面写代码，绑定变量最烦的是什么，就是我们写了个对象，但是忘了它的属性有哪些啊，使用...

2w 258 1

vue vue3 TypeScript

Cocos Creator 制作仿DNF血条优化版

木灵鱼儿 3年前 Cocos Creator

Cocos Creator 制作仿DNF血条优化版

前言看本文章前建议先看上一篇《Cocos Creator 制作仿DNF血条》，这样就会明白优化的处理有哪些了。上一章中，我们的血条它的逻辑是两条血条来回切换，包括颜色，宽度，层级，控制起来其实是非常不方便的，逻辑也变得复杂了，而且没有考虑到秒杀的情况下血条的处理，所以这次根据同事提供的好主意我重新写了一版。教程原理我们可以将第二条血条作为一个固定的底色来控制，只有当第二条血没有的时候，我们将其设置白色的，这样每次血条width控制其实都在第一条上面。也就是说，血条的宽度控制其实一直是第一条在循环控制，扣完了马上切换成第二条的颜色，然后宽度设满，第二条的颜色变成第三条，直到没有血条了，第...

2867 0 0

Cocos Creator 血条 dnf血条

Cocos Creator 制作仿DNF血条

木灵鱼儿 3年前 Cocos Creator

Cocos Creator 制作仿DNF血条

前言最近在想boss的血条制作，比较简单的就是单条血条，但是我想弄个想类似dnf那种，血条减完一条还有一条的那种，于是有了本篇文章预览图教程节点结构由于cocos原生没有这种血条，我们需要手动创建，我先通过两个单色精灵模拟血条的框架，大概就是一个大的节点里面包含一个小的节点，两个节点颜色不一致，里面的节点宽高都小4px，这样就模拟出边框的效果了。然后就是血条了，我的原理是通过两个血条节点进行来回替换实现的，当血量有两管血的时候，一开始就扣除时控制第一条血条的width，然后这是这个计算非常重要，它需要return出余值，当它存在余值的时候，说明还能扣血，此时一瞬间将第一条置于第二条的底...

3093 0 0

Cocos Creator 血条 dnf血条

木灵鱼儿

为什么length不准

2022下半年计划

uuid

mock 快速入门

vue-router4 新增功能

vue-router4 一些常见配置的改动

vue3 filter过滤器

vue3 keyCode修饰符

vue3 取消$on、$off、$once

vue3 transition、watch、挂载api的变化

vue3 自定义指令

vue3 杂项

vue3 异步组件

vue3 函数式组件 functional

vue3 渲染函数

vue3 v-model

vue3 全局api tree-shaking摇树优化

vue3 createApp 创建实例

vue3 createRenderer 自定义渲染器

vue3 emits 自定义事件声明

vue3 Fragment 片段

vue3 Teleport 传送门

正确使用vue3的ts类型声明

Cocos Creator 制作仿DNF血条优化版

Cocos Creator 制作仿DNF血条

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

为什么length不准

2022下半年计划

uuid

mock 快速入门

vue-router4 新增功能

vue-router4 一些常见配置的改动

vue3 filter过滤器

vue3 keyCode修饰符

vue3 取消$on、$off、$once

vue3 transition、watch、挂载api的变化

vue3 自定义指令

vue3 杂项

vue3 异步组件

vue3 函数式组件 functional

vue3 渲染函数

vue3 v-model

vue3 全局api tree-shaking摇树优化

vue3 createApp 创建实例

vue3 createRenderer 自定义渲染器

vue3 emits 自定义事件声明

vue3 Fragment 片段

vue3 Teleport 传送门

正确使用vue3的ts类型声明

Cocos Creator 制作仿DNF血条优化版

Cocos Creator 制作仿DNF血条

最近评论

博客文章RSS订阅

博客评论RSS订阅