Vue3快速构建自己的MarkDown编辑器
最近开始频繁尝试着如火如荼的Vue3，于是开始对之前随手写的Ant Design后台下手了，准备使用Vue3 + Element Plus 重构一波，但是之前用来写博客文章的MD编辑器还不适配Vue3，于是只好赶紧找了一个替代工具，用了一下感觉还不错，非常适合个人快速开发属于自己的编辑器。
快速开始12345# 使用 npmnpm i @kangc/v-md-editor@next -S# 使用 yarnyarn add @kangc/v-md-editor@next
引入配置在入口文件处配置 （如 main.ts ）
12import VMdEditor from '@kangc/v-md-editor'import githubTheme from '@kangc/v-md-editor/lib/theme/github.js' // 主题
引入代码高亮：
12345678// import hljs from 'highlight.js' // 引入全部import hljs from ' ...
Vue缓存组件或页面实用技巧 - keepAlive销毁
假设在一个列表中，用户滑动几页点击了详情，此时若再回到列表页，页面状态都已经刷新，用户又需要再进行滑动，这显然是不合理的。
在PC端我们有很多天然优势可以处理这类问题，比如使用分页器让列表不要过长，比如打开详情跳转个新标签页，又或者将详情页面做成抽屉，做成遮罩弹窗等等。。但是在移动端开发中，我们无法避免这个问题，所以有时候就必须记录下页面的状态，让用户在返回时保持页面原有的样子。
在Vue中，我们可以很方便的使用keep-alive来缓存页面，通常情况下，我们可以通过如下方式改写路由视图：
1234<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
如上使用了两个if判断，不然会不生效
12345<!-- 错误写法： -->& ...
多页面应用、移动端混合开发H5通信解决方案实践
0. 背景介绍：移动端混合开发，APP中90%的内容均为内嵌H5，由于种种原因，我在客户端内无法使用单页面路由跳转，只能新开窗口跳转页面，于是被迫形成了“多页面”的情形。（即使是连贯的页面）
1. 需求场景例如当处于一个列表中，此时点击某一项跳转至详情进行操作，并改变了这一项的状态，那么列表也需要同步改变该项的状态。（此时列表与详情是两个webview）
最终实现效果：（使用两个标签页模拟真机情况）
2. 问题思考既然是多页面，Vue中的各种通信方式就用不了了，首先想到的是小程序的onShow()生命周期，我们的APP也提供了类似的协议方法，意味着H5页面中可以监听到页面重回，但是该方式依赖原生，且正常情况下也无法做到数据通信，页面重回时直接重新请求新数据会导致整个页面刷新，方案pass。
3. 最终解决方案localStorage是我前端开发中最常用到的数据持久储存方案没有之一，在同源情况下，完全可以作为多页面之间的数据通信桥梁，我决定采用发布订阅模式，编写一个eventBus，来解耦多页面之间的通信，使用window原生的事件监听充当事件总栈，监听localStorage的变动并 ...
用纯CSS实现优惠券剪卡风格
在做商城类项目的时候，我们可能都会经历过“优惠券”这类需求，笔者在过往工作中，都是直接要求UI切图来实现，直到有一天产品告诉我一个奇思妙想：这个优惠券的宽度会随内容变化的！一下子让我陷入了人生的大思考，这样图片方式可不好整呐，因此萌生一个想法：能不能用纯css实现这些效果呢？
0. 内倒角首先我们来看下css如何实现内倒角
1234567891011.card { width: 200px; height: 100px; position: relative; background-image: radial-gradient(circle at left 50px, #fff, #fff 10px, transparent 10px), radial-gradient(circle at right 50px, #fff, #fff 10px, transparent 11px), radial-gradient(circle at 100px top, #fff, #fff 10px, transpare ...
利用Vue自定义指令让你的开发变得更优雅
前段时间在用框架开发H5页面时，碰到框架中的组件内置了一个属性用于适配异形屏，虽然是组件内部实现的，但这个方式让我萌生一个想法：能不能自己写一个属性来实现这样的功能？
经过一番思索，我发现Vue的指令模式就很像属性的写法，在Vue中，我们利用模板指令诸如v-if v-for等完成了许多工作，而Vue同样也支持自定义属性：
123456789const app = Vue.createApp({})// 注册一个全局自定义指令 `v-focus`app.directive('focus', { // 当被绑定的元素挂载到 DOM 中时…… mounted(el) { // 聚焦元素 el.focus() }})
然后你可以在模板中任何元素上使用新的 v-focus attribute，如下
1<input v-focus />
注：这里除了全局注册，也可以采用局部注册的方式，实际开发中可以使用vue另一项方便的功能mixin来将对应的指令混入你想使用的文件中，以达到代码的复用 ...
浅谈vue2的12种组件通信方式及理解
重新梳理了一下，个人认为Vue中组件通信思想与React一致，都是单向数据流，高阶流向低阶(父传子)，子组件只可通知父组件，此时数据还是在父级变更而不是发生流动。
1. props
高频使用
父组件向子组件传递参数。 Vue文档: props
2. $emit
高频使用
子组件通知父组件执行对应函数，可携带参数。 Vue文档: $emit
3. $refs
高频使用，也可用在DOM元素操作
通信上属于父组件向子组件传递。通过给子组件设置ref属性，使用 this.$refs 对象来获取实例，即可直接访问及调用子组件上的属性和方法。 Vue文档: refs
4. Vuex 状态管理器
需注意场景使用，可以很好地满足复杂数据交互，在SPA应用中无障碍通信，但频繁使用会增加代码耦合度。
主要以State、Getters、Mutations、Actions四个核心组成，约定了对数据的变更只在 Mutations 中，以 store.commit触发，异步操作则放在 Actions 中，以 store.dispatch 触发。 Vuex官网文档
5. $root、$parent、$chi ...
探索响应式数据原理，Proxy与reflect
首先上一段代码：
1234const obj = { age: 1 } // 定义一个对象let age = obj.age // 将对象的age属性赋值给一个变量obj.age++ // 对象的age属性发生了变化console.log(`age=${age}`, obj); // 输出结果： age = 1 {age: 2}
在obj的age属性变化时，变量age如果也随之变化，通常就需要定义一个函数赋予改变逻辑，在每次变化时手动执行一下函数。下面将以vue3中的响应式设计作为参考，来实现一个能自动响应方法。
创建Demo在Vue3中，数据响应模块被独立拆分了出来，现在我们可以随意创建一个node项目，然后npm或yarn安装包@vue/reactivity，这个包中有两个关键函数，reactive 和 effect，分别是创建一个响应式的对象和数据发生改变时的监听方法：
使用包引入的函数，修改了上面的例子，满足了响应式需求，外部定义的变量跟随对象一起改变，打印出两个数值一致：
1234567891011121314c ...
从零开始实现一个Vuex状态管理器
前言先vue-cli工具直接创建一个项目，勾选Vuex，其他随意：
创建完毕自动安装依赖，之后启动项目，熟悉的helloworld ~ 简单写个demo运行看看，后面会逐步实现一个myVuex，来达到相同的期望运行结果：
src/store/index.js ：
123456789101112131415161718192021222324252627import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({ state: { age: 7 }, getters: { // 不用多说 getAge(state) { return state.age } }, mutations: { // vuex约定了对state的操作函数都放在这里，使用commit方法触发 changeAge(state, data) ...
从零开始基于React服务端渲染&同构
1. 概念分析：服务端渲染（SSR）
更好的⾸屏性能
更利于 SEO，爬虫可以直接抓取已渲染的内容
客户端渲染
前后分离，⻚⾯的交互
同构：服务端和客户端都可以运⾏的同⼀套代码
同一套代码，复用率，可维护性增强
同时具有SSR与前后端分离的优势，利于 SEO 优化
更好的性能与更好的用户体验
2. 架构思路及要点React提供了服务器渲染的各种API，可快速满足同构需求。同一份代码要在服务端与客户端各执行一次，首屏加载完服务端渲染的页面后，客户端紧接着继续执行并重新渲染页面，接管后续的页面交互。
3. 同构关键点所谓同一份代码同时运行服务端和客户端，其实可复用的基本为组件，服务端与客户端的差异无法完全被抹平，而React的好处就是对服务端构建提供了不少解决方案。
1. 路由不同客户端使用：<BrowserRouter /> 服务端使用：<StaticRouter />
2. 代码的同构
接下来我们将尝试一步步从零开始实现一个React同构项目Demo。
文章参考：https://imweb.io/topic/5d2da910b17a4bd24 ...
40行代码实现一个简单Promise函数
一个遵循PromiseA+规范的函数，解决异步回调地狱问题。
Promise主要特点
Promise 会有三种状态，「进⾏中」「已完成」和「已拒绝」，进⾏中状态可以更改为已完成或已拒绝，已经更改过状态后⽆法继续更改（例如从已完成改为已拒绝）。
Promise 构造之后需要传⼊⼀个函数，它接受两个参数，执⾏第⼀个参数之后就会改变当前 promise 为「已完成」状态，执⾏ 第⼆个参数之后就会变为「已拒绝」状态。
通过 .then ⽅法，即可在上⼀个 promise 达到已完成 时继续执⾏下⼀个函数或 promise。同时通过 resolve 或 reject 时传⼊参数，即可给下⼀个函数或 promise 传⼊初始值。
已拒绝的 promise，后续可以通过 .catch ⽅法或是 .then ⽅法的第⼆个参数或是 try catch 进⾏捕获。
结构梳理1234567891011121314151617class simplePromise { constructor(handleFn) { // 构造时传入一个函数 this.status ...