木灵鱼儿

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

vue3 取消$on、$off、$once

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

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

2730 0 0

transition vue3 watch

vue3 自定义指令

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

vue3 自定义指令

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

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

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

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

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

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

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

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

2667 0 0

vue3 createApp

vue3 createRenderer 自定义渲染器

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

vue3 createRenderer 自定义渲染器

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

3335 62 0

vue3 createRenderer 自定义渲染器

vue3 emits 自定义事件声明

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

vue3 emits 自定义事件声明

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

5348 0 0

.native vue3 emits

vue3 Fragment 片段

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

vue3 Fragment 片段

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

3616 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接收一个布尔值，表示是否禁用传送门，通过这个属性我们可以很方便的...

3153 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控制其实都在第一条上面。也就是说，血条的宽度控制其实一直是第一条在循环控制，扣完了马上切换成第二条的颜色，然后宽度设满，第二条的颜色变成第三条，直到没有血条了，第...

3048 0 0

Cocos Creator 血条 dnf血条

Cocos Creator 制作仿DNF血条

木灵鱼儿 3年前 Cocos Creator

Cocos Creator 制作仿DNF血条

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

3312 0 0

Cocos Creator 血条 dnf血条

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

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

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

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

2867 0 0

对象扁平化对象反扁平化

Cocos Creator 事件穿透

木灵鱼儿 3年前 Cocos Creator

Cocos Creator 事件穿透

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

6394 6 2

Cocos Creator 事件穿透

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

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

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

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

5254 0 0

css vue webpack

vscode 隐藏.meta文件

木灵鱼儿 3年前 Cocos Creator

vscode 隐藏.meta文件

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

4204 0 0

vscode cocos .meta

github重新设置ssh rsa key

木灵鱼儿 3年前 Git 笔记

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

3364 0 0

git github rsa

行为模式：职责链模式

木灵鱼儿 3年前设计模式

行为模式：职责链模式

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

3747 0 0

设计模式职责链模式链表

行为模式：策略模式

木灵鱼儿 3年前设计模式

行为模式：策略模式

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

3762 0 0

设计模式行为模式策略模式

行为模式：状态模式

木灵鱼儿 3年前设计模式

行为模式：状态模式

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

3460 0 0

设计模式状态模式

木灵鱼儿

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血条

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

Cocos Creator 事件穿透

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

vscode 隐藏.meta文件

github重新设置ssh rsa key

行为模式：职责链模式

行为模式：策略模式

行为模式：状态模式

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

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血条

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

Cocos Creator 事件穿透

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

vscode 隐藏.meta文件

github重新设置ssh rsa key

行为模式：职责链模式

行为模式：策略模式

行为模式：状态模式

最近评论

博客文章RSS订阅

博客评论RSS订阅

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