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

13 0 0

vue3 异步组件

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

13 0 0

vue3 函数式组件 functional

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

14 0 0

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

13 0 0

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

33 0 0

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(() => { // something DOM-related ...

48 0 0

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: '#app-1' }) const app2 = new...

47 0 0

vue3 createRenderer 自定义渲染器

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

40 0 0

vue3 emits 自定义事件声明

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

102 0 0

vue3 Fragment 片段

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

121 1 0

vue3 Teleport 传送门

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

73 0 0

2022下半年计划

最近感觉在设计模式过后,整个人惫懒了,一方面可能是因为生活上遇到了一些事情,导致每天的心情七零八落的,有时候嫉妒有时放飞自我,现在应该是属于那种想通了状态吧,反正不属于我,或者说现在的我还没有成长为可以照顾别人的状态,那么,一切随缘就好,该来的总会来的,嗯,就是这样。今晚心潮澎湃写下了下半年的计划,加油搞下去吧,任务不分先后,加油,下半年[ ] 博客主题更新v2.0[ ] nestjs[ ] vue3全功能文章[ ] pinia 入门文章[ ] 看书《你不知道JavaScript》上中下前端功能:[ ] 虚拟滚动条[ ] 虚拟列表[ ] 上拉刷新[ ] 下拉刷新[ ] autosize ...

82 0 0
2022下半年计划

正确使用vue3的ts类型声明

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

正确使用vue3的ts类型声明

Cocos Creator 制作仿DNF血条优化版

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

165 0 0
Cocos Creator 制作仿DNF血条优化版

Cocos Creator 制作仿DNF血条

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

181 0 0
Cocos Creator 制作仿DNF血条

完善版 对象扁平化和反扁平化

对象扁平化其中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) => { ...

199 0 0

Cocos Creator 事件穿透

前言Cocos Creator 中可以通过挂载 BlockInputEvents组件来防止事件穿透,但是如果我们想让它能够事件穿透,官方的文档只字不提。这个需求也是有场景的,比如我们有两个元素,A和B,B会浮动到A上,从而导致click被B给挡住了,从而A事件无法触发了,这种场景在打地鼠游戏中是常见的。解决办法我们需要给挡住的那个元素添加允许事件穿透,用上面的例子,那就是需要给B节点添加一个事件穿透。import { _decorator, Component, Node } from "cc"; const { ccclass, property } = _deco...

184 68 0

关于给css自动添加浏览器前缀

前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...

239 10 0

vscode 隐藏.meta文件

前言.meta文件是cocos自己的配置文件,用于标识每个文件的,在开发过程中不用关心这个文件,但是通过vscode打开cocos项目会将.meta和ts这些文件全部显示在一起,非常影响开发,得想办法忽略显示这个文件。教程在vscode设置里搜索:files,找到Files:Exclude,添加一个新的规则:**/*.meta保存即可。如果不想可视化,可以打开vscode的json配置文件,填入以下内容:{ "files.exclude": { "**/*.meta": true } }保存也是一样的。

170 0 0
vscode 隐藏.meta文件

github重新设置ssh rsa key

前言最近遇到这么一个问题,我之前在搞ssh远程的时候,把之前生成的rsa令牌全给删除了,这就导致之前在github上绑定的key无法继续使用了,我无法再推送数据到github仓库了。解决办法就是重新生成一个令牌并绑定,期间还需要在首次的时候使用命令拉取一下,并输入yes才行。教程生成rsassh-keygen -t ed25519 -C "your_email@example.com"照着官方的教程就行了,此时window用户,他会在:本地c盘 -> 用户 -> 你的用户名 -> .ssh目录下,生成名为ed25519的令牌,它有两个文件:id_ed...

178 0 0
github重新设置ssh rsa key

行为模式:职责链模式

简介责任链模式:为了避免请求发送者与多个请求处理者耦合在一起,于是将所有请求的处理者通过前一对象记住其下一个对象的引用而连成一条链;当有请求发生时,可将请求沿着这条链传递,直到有对象处理它为止。举个例子,小明因为感冒需要请假,此时它的需要请3天,但是他的小组长只有1天的允许权限,小组长的领导项目经理有2天的权限,而能允许3天的只有老板,但是小明是新员工,所以它只能一步步的问,直到问到老板才成功请到了假期。但是如果小明的公司更大,那么它的审批流程就可能会更加复杂,如果人事流通了,说不定还得重新问一遍,有没有什么办法能方便一点呢?于是就有了职责链模式,它可以理解为一个申请表单,只要有领导在职...

198 1 0
行为模式:职责链模式

行为模式:策略模式

简介策略模式: 该模式定义了一系列算法,并将每个算法封装起来,使它们可以相互替换,且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式,它通过对算法进行封装,把使用算法的责任和算法的实现分割开来,并委派给不同的对象对这些算法进行管理。简单点来说就是,我现在有10个算法,可能会根据不同的状态使用不同的算法,一般的做法就是if else或者switch这种判断方式,这样的话就跟状态模式一样,后续新增的算法和状态判断又得套一层if判断,这样的话代码的可读性就下降,且维护起来比较麻烦。我们来看个代码例子:function calc(type: number, a: number, b: ...

216 0 0

行为模式:状态模式

简介状态模式:对有状态的对象,把复杂的“判断逻辑”提取到不同的状态对象中,允许状态对象在其内部状态发生改变时改变其行为。简单点来说,我们在平时开发的过程中,会遇到一个对象中会判断一个“状态”的不同,从而会使用不同的行为(函数之类的调用),常见的做法就是if else或者switch这种判断方式,当我们一个状态有多种形式时,可能会产生大量的if else语句,这就不好维护了,如果每次新增一种状态,就得改动一次该对象,显然不符合我们的开闭原则。而状态模式是将每种状态的处理都单独提取出来,然后通过源对象进行组合使用,状态对象会持有源对象,当状态A发生改变时,会调用持有的源对象的设置状态方法,将...

223 0 0
行为模式:状态模式

行为模式:解释器模式(太难了,不一定正确)

简介解释器模式:给分析对象定义一个语言,并定义该语言的文法表示,再设计一个解析器来解释语言中的句子。因为是自定义的语言,所以它的语法表示肯定是有一些相似的地方,比如必须使用空格分割这种要求,或者使用其他特殊的字符。在这个基础上我们才能进行下一步,而不是说随便写个句子就可以的。举个简单的例子:我们博客编辑文章语言是markdown,而文法就是md中的各种语法,比如## 我是2级标题;这个就表示h2标签,这个规则就是文法,我们需要创建一个解释器来解释语法,说白了就是我们需要将各种文法组成的句子转换成html标签。文法:用于描述语言的语法结构的形式规则解释器会将解释的语言生成一个抽象的语法树,...

297 0 1
 行为模式:解释器模式(太难了,不一定正确)

行为模式:备忘录模式

简介备忘录模式:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态,以便以后当需要时能将该对象恢复到原先保存的状态。该模式又叫快照模式。其实就是一种设计历史记录的方式,在ps中,每次操作的记录都会进行一次记录,用户可以自己选择需要回退到哪条记录,而备忘录模式,是一种能记录一个对象的内部状态,可以通过方法获取到之前保存的内部状态数据,从而进行恢复。这里面最复杂的就是需要设计好需要记录的状态数据,然后通过谁去保存,谁去控制保存的数据,谁去主动进行创建备忘录数据和读取备忘录数据。所以他会有三个角色:备忘录角色:专门存储内部状态数据的类,这个类的实例被管理者管理,被发起者...

行为模式:备忘录模式