Xiuji957

1、Event Loop事件循环机制js执行机制js是单线程的，如果是多线程的话会引发一个问题：在同一时间同时操作DOM，一个增加一个删除，js就不知道到底该干嘛了，所以js是单线程。 随着HTML5到来，js也支持了多线程webWorker，但是也是不允许操作DOM的。 单线程意味着所有任务都需要排队，后面的任务需要等前面的任务执行完才能执行，如果前面的任务耗时过长，后边的任务就需要一直等，一些从用户角度上来说不需要等待的任务就需要一直等待，从用户体验上来说这是不能接受的，于是js中就出现了异步的概念。 同步任务代码从上往下依次执行 异步任务 宏任务script（整体代码）、setTimeout、setInterval、UI交互事件、postMessage、Ajax 微任务Promise.then catch finally、MuationObserver、process.nextTick（Node.js环境） 运行机制 所有的同步任务都是在主进程执行的，形成一个执行栈，主进程之外还存在一个任务队列，异步任务执行队列中先执行宏任务，然后清空当前任务队列中所有微任务，然后进入下一 ...

1、css深度选择器scoped原理:vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。 总结一下scoped三条渲染规则： 给HTML的DOM节点加一个不重复data属性(形如：data-v-123)来表示他的唯一性 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性 保留scoped属性，使用深度选择器，代码如下:123456789101112131415161718192021222324<!-- 写法1 使用::v-deep --><style lang="scss" scoped> ::v-deep .el-input__inner{ background: yellowgreen; }</styl ...

插件编写及挂载在使用createApp()初始化Vue应用程序后，可以通过调用use()方法将插件添加到你的应用程序中 如下实现一个Loading插件 Loading.vue123456789101112131415161718192021222324252627282930313233343536373839404142<!-- * @Description: * @Author: xiuji * @Date: 2022-11-29 15:54:13 * @LastEditTime: 2022-11-29 17:06:29 * @LastEditors: Do not edit--><template> <div> <div class="loading" v-if="showLoading">加载中...</div> </div></template><script setup lang="ts">i ...

寻仙自当涯高，采珠应探海深最近一些事，总结一下自己的心情以及一些感悟 不断拓宽自身掌握技术的宽度，挖掘一项技术的深度，可取。可上九天揽月，可下五洋捉鳖，谈笑凯歌还的高度没人不想企及，业务场景中遇到的很多问题确实都需要坚实的理论基础来支撑。有方向有规划，在不断精进主业技能的同时，找到合适的矿去深入挖掘。计算机科学每个方向都是参天大树，皓首穷经为一事，江湖路远叹一痴，找到技术栈的上下游，把关联的技术互补融合，否则贪多不精只会丢失初心和方向。付出太多，得到太少，增添烦恼（拔剑四顾心茫然）。 投身其中却不可偏激。确实，没有什么比每天做自己喜欢的事更有意思了，而且技术改变世界这句话并不是说说而已。可是不要太专注于技术，不要太把技术当一回事。多数时候不要妄想专注技术远离喧嚣，有人的地方就有江湖，一片江湖就有一片江湖对应的规则。做事激情无限勇往直前的作风值得欣赏，但不总是可取的。须知你我只是冲锋陷阵的士兵，打了胜仗是指挥官的大功：有的人不必卖命也能吃好的喝好的。这样人的层次就完全不同了，而我只有一身坦荡，和岁月刻的伤。

自定义hooks1、Mixins的不足vue2中通过Mixins将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现一次写代码，多组件受益的效果。 弊端就是 会涉及到覆盖的问题：组件中定义的data，methods，filters会覆盖mixins中相同命名的data，methods，filters。 变量来源不明确（隐式传入），不利于阅读，使代码变的难以维护 2、Vue3的自定义hooks Vue3的hooks函数相当于Vue2的mixin，不同在于hooks是函数 Vue3的hooks函数可以帮我们提高代码的复用性 图片转base64hook： 1234567891011121314151617181920212223242526272829303132333435/* * @Description: * @Author: xiuji * @Date: 2022-11-20 12:16:07 * @LastEditTime: 2022-11-20 12:41:51 * @LastEditors: Do not edit */import { onMo ...

Vue3-自定义指令directive1、Vue3指令的钩子函数 created 元素初始化的时候 beforeMount 指令绑定到元素后调用 只调用一次 mounted 元素插入父级dom调用 beforeUpdate 元素被更新之前调用 update 这个周期方法被移除 改用updated beforeUnmount 在元素被移除前调用 unmounted 指令被移除后调用 只调用一次 2、在setup内定义局部指令Tips：必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。 1234567891011121314151617181920212223242526272829303132333435<template> <button @click="show = !show">开关{{show}} ----- {{title}}</button> <Dialog v-move-di ...

平心静气，戒骄戒躁

Promise一、什么是Promise通过打印Promise可以看到其是一个构造函数，自身带有多种方法 Promise是Es6新增的构造器，用来提优化异步代码的写法，Promise中文意为承诺，承诺它一段时间后返回给你最终的结果。 二、Promise如何运作Promise存在三种状态：pending（进行中）、fulfilled（成功）和reject（失败），当 Promise 被调用后，它会以处理中状态 (pending) 开始。 这意味着调用的函数会继续执行，而 promise 仍处于处理中直到解决为止，从而为调用的函数提供所请求的任何数据。 被创建的 Promise 最终会以被解决状态 (fulfilled) 或 被拒绝状态 (rejected) 结束，并在完成时调用相应的回调函数（传给 then 和 catch）。 123456789101112131415161718192021/* * @Description: * @Author: xiuji * @Date: 2022-11-14 10:05:13 * @LastEditTime: 2022-11-14 19:36: ...

Mitt在vue3中$on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口，EventBus无法使用了，但可以使用Mitt库代替EventBus 1、安装mitt1pnpm install mitt -S 2、main.ts全局挂载mitt库1234567891011121314151617181920212223242526/* * @Description: * @Author: xiuji * @Date: 2022-07-12 16:30:05 * @LastEditTime: 2022-11-10 16:12:19 * @LastEditors: Do not edit */import { createApp } from 'vue'import App from './App.vue'import Mitt from 'mitt'import ElementPlus from 'element-plus'import 'element ...

1、什么是发布 — 订阅模式在23种设计模式中没有发布-订阅模式的，其实它是发布订阅模式的一个别名，但两者又有所不同。这个别名非常形象地诠释了观察者模式里两个核心的角色要素——发布者和订阅者。 很多人在微博上关注了A，那么当A发布微博动态的时候微博就会为我们推送这个动态。在这个例子中，A就是发布者，我们是订阅者，微博就是调度中心，我们和A之间是没有直接信息来往的，都是通过微博平台来协调的，这就是发布-订阅模式。 虽然发布-订阅模式是观察者模式的一个别名，但是发布-订阅模式经过发展，已经独立于观察者模式，成为一种比较重要的设计模式。 较观察者模式的最大区别就是发布-订阅模式有一个调度中心，观察者模式是由具体目标调度的，而发布-订阅模式是统一由调度中心调的，所以观察者模式的订阅者与发布者之间是存在依赖的，而发布-订阅模式则不会，这就实现了解耦。 2、发布-订阅模式的实现1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606 ...