踩坑指南虽然howler.js说他可以自动感知然后自动播放，事实上没什么软用，所以我们还需要自己去配置一下触发器。监听一个全局的click事件之类的。虽然howler.js说可以自动降级到h5播放，但是实际测试无法在安卓4.4中进行播放，但是个人测试，如果你使用一个audio元素，是可以播放的，但是这样就需要自己去手动封装一个基于audio元素的播放管理，项目赶的很，实在没有多余的时间去研究这个，特别是音效的播放，还是专业的库处理比较好，所以暂时对于安卓4.4的兼容是没法做到的。官方对于这个问题也是很模糊，找不到解决办法。howler.js在文档中找了半天，也没看到官方提供动态替换资源的...

typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...

eslint校验的一些问题（暂时无解）在初始化项目时勾选了eslint校验之后，升级vue 2.7版本后，eslint-plugin-vue这个插件需要升级到9+版本，我目前使用的版本是："eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南：2.7日志官方居然把这个写在了变更日志里面，按道理最好官方的文档上也有一份说明的，但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题，但是有时候我们的SFC单文件组件开发的时候，template中的一些变量绑定还是会出现波浪线警告，这...

前言大概在上个月的时候我就看了对应的一些资料，但是一直拖着，因为这个功能其实vue的框架就有提供，比如element ui的input组件，它的这个功能叫自适应文本域，属性为autosize。所以本文也不过多讲解具体实现，主要还是它的原理层的东西。这个功能可以用在哪呢？比如移动端的聊天输入框的高度判断，拿我们的QQ来讲，在没有内容的时候它就只有1行的高度，如果内容过高，就会自动变高，然后也会有一个max的最大高度阈值，这个高度一般是几行，比如最大6行高度，多了就滚动条处理。那么就开始吧！最基本的实现变高原理其实非常简单，假设我现在有一个textarea元素用于用户的输入，然后我希望它在用...

问题起源可能Cocos Creator软件的开发人员认为每个开发者都是有两个电脑屏幕的（苦笑）;它的脚本检测逻辑是：当你改动完脚本文件后，切换到Cocos Creator面板，此时才会触发预览更新，如果你是双屏的话，就不用切换，一个屏幕打开Cocos Creator，一个屏幕打开vscode，然后vscode保存后就会自动更新，此时切换到浏览器预览，一切都是那么的正常，前提你得有两块屏幕。非常蛋疼！！！这真是一个糟糕的体验！如果我们是单屏，你vscode改动脚本保存后，还得切换到Cocos Creator软件上，然后再切到浏览器去查看，超恶心有没有，怎么会有这种体验，都2022年了，文件...

起因由于最近在了解前端js中length不准的问题，其中文章带有一些特殊字符，而typecho和mysql都只是支持UTF-8字符，但是这个utf-8并不是真正意义上的utf-8，它最多支持3个字节的内容，也就是24bit，而我文章中的特殊字符是需要4个字节来存储的，这就导致文章无法正常的展示和保存。这个特殊字符和现在移动端常用的emoji表情差不多，emoji也是一种特殊字符，所以该教程同样适用于如何让typecho支持emoji表情。教程打开宝塔的phpmyadmin -> 找到typecho的数据库 -> 操作 -> 滑动到最底部找到排序规则 -> 选择ut...

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

今晚心潮澎湃写下了下半年的计划，加油搞下去吧，任务不分先后，加油，下半年[ ] 博客主题更新v2.0[ ] nestjs[x] vue3 快速入门文章[ ] pinia 入门文章[ ] 看书《你不知道JavaScript》上中下前端功能：[ ] 虚拟滚动条[ ] 虚拟列表[ ] 上拉刷新[ ] 下拉刷新[x] autosize input[x] length[x] 复制功能[x] uuid

前言前端的复制功能第一次使用的时候还记忆犹新，那时根本不知道怎么操作，复制它到底是怎么实现的，该怎么去触发，百度查看了不知道多少所谓的复制功能文档，每篇都有不一样的用法，我总想着有一天能搞清楚这些，毕竟现在复制功能已经web功能开发中离不开了。execCommand API浏览器在document对象上暴露了execCommand方法，该方法允许使用者通过输入“命令”的方式来操作 可编辑内容区域 的元素。可编辑内容区域被官方认为是contenteditable="true"的html元素，但按道理，input这些应该也是算可编辑内容区域的。这些都不重要，我们这次关注的...

什么是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()"abstract"...

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

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

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 { apiKey: 'a1b...

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

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

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组件，最终都会转为render函数，只是我们使用template的写法（SFC）...

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

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

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