LizequaNNN的博客

这万字长文希望对你有帮助，希望你的未来一片光明。

今天就暂时先讲这么多，为了我们的打工生涯更加顺利，为了能让我们社畜在如此乐观的心态下更加巩固自己的地位、夯实自己前进的步伐，我们需要不断学习前进。关注我，我会持续为你带来全面的 Vue3、Typescript 和更多其他技术知识！下一篇 —— 《 ref 是怎么实现的？

起初，我也不知道benchmark这个文件是做什么的。抱着求知的心态打开翻译软件，翻译过来是 “基准”、“检测” 的意思。这时候我有了点思路，结合文件内的程序，大概能猜出来这是一个存放测试标准和性能程序的文件夹。

可能你还没有注意到，`Vue` 在更新 DOM 时是异步执行的。只要侦听到数据变化，`Vue` 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 `watcher` 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

之前在学习[《Vue2.0 —— 由设计模式切入，实现响应式原理》](https://blog.csdn.net/LizequaNNN/article/details/124988514)一文中有提及到，2版本的响应式是依靠 `Object.defineProperty` 实现的。但考虑到当时的用户群体和时代背景，将这个API与 `Proxy` 权衡利弊之后，最终采用了这个。为此开发者们不得不手动的来适配它。诸如：`Vue.set`、`Vue.del` 和 `arrayMthods` 等等手段来完善。

要了解Vue为什么会应用虚拟节点这门技术，以及，diff算法，就要先了解一些前置的储备知识。本文我会大部分以图片的形式讲解，我们可以结合图解，更好的理解Vue的源码。

发布订阅模式，听起来好像很陌生？Vue 中的 EventBus， $on 以及 $emit 和 $off；Nodejs 中的 EventEmitter，其中 on 和 emit。

AST，全称 Abstract Syntax Trees，中文名称为抽象语法树。它是源代码语法结构的一种抽象表示，以树状的形式表现编程语言的语法结构，树上的每一个节点都表示源代码中的一种结构。诸如，编辑器（IDE）和 模板语法的模板编译，又或是 Babel 的源代码编译，都应用到抽象语法树的思想。

Mustache是基于JavaScript实现的模版引擎，类似于，但是这个模版更加的轻量级，语法更加的简单易用，很容易上手。

Vue2.0 —— 由设计模式切入，实现响应式原理所谓MVVM框架，即是数据驱动视图模型，分为 Model、View 和 ViewModel。目前市场上三大框架，Vue，React 和 Angular 都是数据驱动视图模型框架。

Vue —— 关于富文本渲染内容图片溢出的问题一、描述问题场景前提：最近做的一个项目，包含了PC端和手机端，共用同一组数据库的数据。导致了，有些富文本内容在PC端录入的图片，在PC端显示正常，而在移动端的显示的图片则会溢出屏幕。PC端：移动端：二、解决方法使用深度选择器/deep/ .content img { width: 100% !important;}/* 或者 */.content >>> img { width: 100% !importan

Vite ---- 创建Vue3.0+TS项目写在前面：npm和yarn以及其他的包管理工具都可以创建项目，例如pnpm，具体创建方法自行查阅Vite官网，这里不再赘述。本文以npm创建项目，用yarn管理项目的依赖模块。一、创建项目没有安装vitejs模块的会提示安装，选择yes即可。npm init @vitejs/app命名项目名称Project name: ... vue3bingdwendwen选择模板Select a framework >> v

VUE ---- 自定义指令的理解和应用前段时间在项目当中有一个需求要操作到DOM层面。尽管Vue框架推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。考虑到上面提到的业务场景，Vue官方提供了自定义指令。因为指令的颗粒度比较细能够直击要害（DOM），而且具备有高度的灵活性，运用起来非常的方便。一、概念Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为底层元素（DOM）附加一些特别的功能，这时候，我们就需要用到vue中一个

VUE ---- 利用vue-print-nb实现打印功能一、安装vue-print-nb二、引入Vue项目三、使用说明

VUE ---- Windows7环境下安装一、检查Nodejs版本最新的Nodejs版本需要系统环境为Windows8以上，所以我们安装的时候需要选择相对较低的版本。Windows7支持最高版本的Nodejs为Nodejs@13.14.0以下，此版本以上就要求Windows8以上的系统。由于脚手架工具Vue-cli官方对于Nodejs的版本要求为v8.9 或更高版本 (推荐 v10 以上)，所以我们先自查一下系统上的Nodejs版本。node -v这里安装的版本是@13.9.0 。这里也

[vue-router] Duplicate named routes definition: { name: “XXX”, path: “XXX” }一、分析原因翻译过来就是：定义重复命名的路由。言外之意就是，与之前命名过该路由名称的路由发生了冲突，所以Vue发出警告。那为什么是警告？有部分开发人员又或是新手小白觉得，只要不是报bug，那我就不管了，不想浪费自己时间。当你有这种想法的时候你该庆幸你不是在我的团队里，不然我就梆梆给你来两下。首先查看警告详情：点进去看看。找到报warnin

还记得自己第一次敲出Hello World的那份兴奋吗 ？跨域问题相信大家遇到很多，一般这种问题都是出现在开发阶段调试代码的时候，这种时候前端的我们只有一种方法可以解决，那就是设置proxy。网上说的什么CORS，设置浏览器选项什么的也可以，但是归根到底如果上线之后还存在跨域问题，那就百分之一万是要后端处理的，前端不用研究太多，都是无用功（这篇文是从我身边的一件真实事件衍生出来的，前端和后端争执跨域谁处理，最后打起来了，双双把家还。。离谱。。。）前面说这么多，目的就是为了让大家分辨好，什么时候需要前.

进来踩坑吧