沐华的博客

快速上手 Vue3 项目开发

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

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

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

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

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

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

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

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

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

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

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