IT沐华-CSDN博客

游戏名称：清凉一夏消消乐技术栈：Vue3 + TypeScript + Vite + Element-Plus游戏体验地址(pc/手机皆可)：https://wmuhua.com/games/xxl开源地址：https://github.com/wmuhua/vue3-xxl点赞留香，与有荣焉，感谢感谢核心思路游戏步骤主要就是：消除、下落、补充、移动，采用三种状态来区分需要删除的(remove)、新添加的(add)、和正常的方块(normal)主要就是生成小方块列表后，马上保存每一个方块.

2022-05-26 16:11:39 1619

原创学了就忘？看我是怎么解决的

学如逆水行舟，不进则退；如何学有所得，如何把自己会的技术，用语言文字表达出来，你要相信，只要动手，就一定会有所收获！

2022-05-25 11:44:48 142 1

原创上手 Vue 新的状态管理 Pinia，一篇文章就够了

Vuex 作为一个老牌 Vue 状态管理库，大家都很熟悉了Pinia 是 Vue.js 团队成员专门为 Vue 开发的一个全新的状态管理库，并且已经被纳入官方 github为什么有 Vuex 了还要再开发一个 Pinia ？先来一张图，看下当时对于 Vuex5 的提案，就是下一代 Vuex5 应该是什么样子的Pinia 就是完整的符合了他当时 Vuex5 提案所提到的功能点，所以可以说 Pinia 就是 Vuex5 也不为过，因为它的作者就是官方的开发人员，并且已经被官方接管了，只是目前 Vuex

2022-03-16 09:03:25 1472

原创 10个 Vue3 精华知识点，你知道几个？

本文不适合 Vue 初学者，如果你是 Vue2 迁移者或者是准备面试的话，那么本文肯定很适合你，废话不多说Vue2 和 Vue3 有什么区别对 Vue3 的了解 / Vue3 是怎么得更快的？新增了三个组件：Fragment 支持多个根节点、Suspense 可以在组件渲染之前的等待时间显示指定内容、Teleport 可以让子组件能够在视觉上跳出父组件(如父组件overflow:hidden)新增指令 v-memo，可以缓存 html 模板，比如 v-for 列表不会变化的就缓存，简单说就是用内存

2021-11-03 15:59:12 442

原创一次弄懂 Vue2 和 Vue3 的 nextTick 实现原理

都会用 nextTick，也都知道 nextTick 作用是在下次 DOM 更新循环结束之后，执行延迟回调，就可以拿到更新后的 DOM 相关信息那么它到底是怎么实现的呢，在 Vue2 和 Vue3 中又有什么区别呢？本文将结合案例介绍执行原理再深入源码，全部注释，包你一看就会在进入 nextTick 实现原理之前先稍微回顾一下 JS 的执行机制，因为这与 nextTick 的实现息息相关JS 执行机制我们都知道 JS 是单线程的，一次只能干一件事，即同步，就是说所有的任务都需要排队，后面的任务需要等

2021-10-22 09:11:04 722

原创 Vue3的7种和Vue2的12种组件通信，值得收藏

本文原文首发掘金：https://juejin.cn/post/6999687348120190983如有不对的或者遗漏的，欢迎指正，你的一赞一评都是我前行最大的动力，感谢Vue2.x组件通信12种方式写在后面了，先来 Vue3 的奥力给！Vue3 组件通信方式props$emitexpose / ref$attrsv-modelprovide / injectVuexVue3 通信使用写法props用 props 传数据给子组件有两种方法，如下方法一，混合写法// Pa

2021-10-21 10:55:50 387

原创 Vue3.2 响应式原理源码剖析，及与 Vue2 .x响应式的区别

本文源码版本 Vue3.2.11，Vue2 响应式源码剖析点这里深入浅出 Vue2 响应式原理源码剖析我们知道相较 Vue2.x 的响应式 Vue3 对整个响应式都做了重大升级；然后 Vue3.2 相较 3.0 版本源码又做了许多变更，一起来看看吧Vue3 和 Vue2 响应式区别响应式性能的提升根据8月10号尤大发布 Vue3.2 说明原文得知：更高效的 ref 实现，读取提升约 260%，写入提升约 50%依赖收集速度提升约 40%减少内存消耗约 17%使用上的区别Vue2 中

2021-10-20 15:27:20 478

原创 12 个 Vue 开发中的性能优化小技巧，看你用过几个

性能优化，是每一个开发者都会遇到的问题，特别是现在越来越重视体验，以及竞争越来越激烈的环境下，对于我们开发者来说，只完成迭代，把功能做好是远远不够的，最重要的是把产品做好，让更多人愿意使用，让用户用得更爽，这不也是我们开发者价值与能力的体现吗。重视性能问题，优化产品的体验，比起改几个无关痛痒的 bug 要有价值得多本文记录了我在 Vue 项目日常开发中的一些小技巧，废话不多说，我们开始吧1. 长列表性能优化1. 不做响应式比如会员列表、商品列表之类的，只是纯粹的数据展示，不会有任何动态改变的场景下，

2021-10-20 13:49:51 685

原创深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别

因为 Diff 算法，计算的就是虚拟 DOM 的差异，所以先铺垫一点点虚拟 DOM，了解一下其结构，再来一层层揭开 Diff 算法的面纱，深入浅出，助你彻底弄懂 Diff 算法原理认识虚拟 DOM虚拟 DOM 简单说就是用JS对象来模拟 DOM 结构那它是怎么用 JS 对象模拟 DOM 结构的呢？看个例子<template> <div id="app" class="container"> <h1>沐华</h1> &l

2021-10-13 23:32:47 1014 2

原创 render 函数是怎么来的？深入浅出 Vue 中的模板编译

new Vue({ render: h => h(App)})这个大家都熟悉，调用 render 就会得到传入的模板(.vue文件)对应的虚拟 DOM，那么这个 render 是哪来的呢？它是怎么把 .vue 文件转成浏览器可识别的代码的呢？render 函数是怎么来的有两种方式第一种就是经过模板编译生成 render 函数第二种是我们自己在组件里定义了 render 函数，这种会跳过模板编译的过程本文将为大家分别介绍这两种，以及详细的编译过程原理认识模板编译我们知道 &lt

2021-10-12 21:28:03 796

原创 Vue 的完整生命周期源码流程详解

请说一下 Vue 的生命周期？这种烂大街的问题为什么还在问？考察你的熟练度考察你的深度考察你的知识面你说是吗，关于 Vue 生命周期有些能说出下面的钩子函数名，有些甚至这些钩子函数名都说不上来，那是真的需要补充一下了，因为这些钩子函数也只是 Vue 完整生命周期中的冰山一角源码地址：src/shared/constants.js - 9行export const LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount

2021-10-11 16:15:44 454

原创深入浅出 Vue 响应式原理源码剖析

先看张图，了解一下大体流程和要做的事初始化在 new Vue 初始化的时候，会对我们组件的数据 props 和 data 进行初始化，由于本文主要就是介绍响应式，所以其他的不做过多说明来，看一下源码源码地址：src/core/instance/init.js - 15行export function initMixin (Vue: Class<Component>) { // 在原型上添加 _init 方法 Vue.prototype._init = function (opt

2021-10-10 15:01:30 503

原创为什么第二次打开页面快？五步吃透前端缓存，让页面飞起

如何使首屏加载更快？为什么第二次打开页面会快很多？怎么让刷新或关闭浏览器之后数据依然不被清空？主要是因为第一次加载页面过程中，缓存了一些数据，之后再加载就直接从缓存中获取而不用请求服务器，所以速度更快，也减轻了服务器的压力无论是面试还是性能优化，缓存对于前端来说都是非常重要的且必不可少的内容。本文主要内容就是针对这这一块进行详细梳理总结，如果对你有帮助，就点赞支持一波吧这个过程主要有两方面网络方面的缓存分为三块：DNS缓存、HTTP缓存、CDN缓存，也有人把这里的 HTTP 缓存称为浏览器缓存，

2021-10-07 21:51:45 857

原创看完还不懂JavaScript执行机制(EventLoop)，你来捶我

上一篇文章介绍了进程与线程，知道渲染进程都有一个主线程，并且主线程工作很多，要处理DOM、计算样式、布局、还有鼠标、键盘等各种JS任务我们都知道JS是单线程，任务只能一件一件地执行，那么浏览器是怎么让这么多类型的任务在主线程上有条紊地执行的呢？这就需要任务队列和事件循环了任务队列(消息队列)什么是任务队列呢？它是一种数据结构，存放要执行的任务。然后事件循环系统再以先进先出原则按顺序执行队列中的任务。产生新任务时IO线程就将任务添加在队列尾部，要执行任务渲染主线程就会循环地从队列头部取出执行，如图

2021-10-05 22:59:18 128

原创 V8引擎的JavaScript内存机制

对于前端攻城师来说，JS的内存机制不容忽视。如果想成为行业专家，或者打造高性能前端应用，那就必须要弄清楚JavaScript的内存机制了先看栗子 function foo (){ let a = 1 let b = a a = 2 console.log(a) // 2 console.log(b) // 1 let c = { name: '掘金' } let d =

2021-10-04 22:33:39 181

原创前端跨域整理总结

跨域，一个老生常谈的问题，也是前后端交互必定也经常会碰到的问题，相信大家都不陌生，虽然不是什么高深的东西，但是脚手架的层层封装，各种 API 的层出不穷，未免有些应接不暇，所以这种情况，就只有自己总结一下了，如果你对它并不是那么熟悉，相信对肯定会对你有帮助的说跨域之前，首先需要了解的一个概念是同源策略因为浏览器有安全策略限制，不同源的地址之间不能互相访问资源或者操作DOM关于同源策略不了解的可以看我另一篇文章有详细介绍：吃透浏览器安全（同源限制/XSS/CSRF/中间人攻击）跨域有哪些方案？这里

2021-10-03 23:46:50 125

原创吃透浏览器安全（同源限制/XSS/CSRF/中间人攻击）

前言随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。在移动互联网时代，特别是前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然，浏览器自身也在不断在进化和发展，不断引入 CSP、SameSite、HttpOnly、Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要我们不断进行“查漏补缺”浏览器安全可以分为三大块：Web页面安全、浏览器网络安全、浏览器系统

2021-10-02 07:30:06 2250

原创深入理解浏览器中的进程与线程

进程和线程的联系和区别当我们启动某个程序时，操作系统会给该程序创建一块内存(当程序关闭时，该内存空间就会被回收)，用来存放代码、运行中的数据和一个执行任务的主线程，这样的一个运行环境就叫进程而线程是依附于进程的，在进程中使用多线程并行处理能提升运算效率，进程将任务分成很多细小的任务，再创建多个线程，在里面并行分别执行进程和线程的关系特点是这样的：进程与进程之间完全隔离，互不干扰，一个进程崩溃不会影响其他进程，避免一个进程出错影响整个程序进程与进程之间需要传递某些数据的话，就需要通过进程通信管道I

2021-10-01 21:44:01 527

原创如何使用 Web Worker 为 JS 创造多线程环境？

Web Worker是什么我们都知道JS是单线程的，所有任务在一个线程上，一次只能做一件事。虽然可以通过AJAX、定时器等可以实现"并行"，但还是没有改变JS单线程的本质，把一些复杂的运算放在页面上执行，还是会导致很卡，甚至卡死而HTML5标准中的Web Worker为JS创造多线程环境，允许主线程创建Worker线程并给它分配任务，而且在主线程执行任务的时候，worker线程可以同时在后台执行它的任务，互不干扰这让我们可以将一些复杂运算、高频输入的响应处理、大文件分片上传等放在worker线程处理，

2021-09-30 11:19:33 328

原创进阶知识体系之你不能不知道的CDN

CDN的基本概念CDN(Content Delivery Network)就是内容分发网络，是构建在现有网络基础之上的智能虚拟网络。依靠部署在各个地方的边缘服务器，通过分布式存储、负载均衡、网络请求的重定向和内容管理等功能模块，以就近性和服务器负载的判断，确保内容以一种极为高效的方式为用户请求提供所需要的资源。先看图：没有CDN有CDNCDN的作用/好处/优缺点1. 加速访问提高用户体验CDN可以使用户就近获取所需资源，降低网络堵塞，提高用户访问响应速度和命中率2. 有利搜索排名和转化网

2021-09-29 08:25:55 440

原创几个HTML+CSS知识点

说一下边距重叠(BFC)BFC就是块级元素格式化上下文，相当于一个容器，里面的布局不会影响到外面的元素。IFC就是内联元素格式化上下文BFC渲染规则：BFC元素垂直方向的边距会发生重叠BFC的区域不会与浮动元素的区域重叠BFC是一个独立的容器计算BFC高度的时候，浮动元素也会参与计算怎么创建BFC或触发BFC：float值不为none,也就是说设置了浮动即可position的值为absolute或者fixeddisplay值为table相关的几个属性overflow为auto或h

2021-09-28 00:25:48 89

沐华的博客

原创 React Fiber技术解读：你需要知道面试官最关心的话题！

原创揭秘你的缺点和优点，让你更懂自己！

原创【5年以上前端】Vue 和 React 的区别看这里

原创前端安全13条，除了XSS/CSRF你还知道哪些？

原创面试官：方便说下离职原因吗？

原创 [保姆级] Vue3 开发文档

原创 TS泛型进阶

原创工作中如何使用 Git

原创 Window / Mac 系统 nvm 安装使用指南

原创 Vue3 版消消乐小游戏(pc/手机皆可线上体验，附源码)