- 博客(348)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 前端测试指南：Vue3 测试工具介绍与使用
在现代前端开发中，测试已经成为了必不可少的一环。测试可以保证代码的质量、可维护性和可靠性，防止代码的潜在错误和漏洞。同时，测试可以让开发者更加自信地提交代码和合并代码，以及更快地解决问题。因此，测试已经成为了前端开发中不可或缺的一部分。Vue3 是一种流行的前端框架，它提供了很多测试工具和库，帮助开发者测试 Vue3 应用的各个方面。本文将介绍两种主要的 Vue3 测试工具：Jest 和 Vue Test Utils。
2023-04-12 22:38:16
2099
原创 2023年了，来试试前端格式化工具
在大前端时代，前端的各种工具链穷出不断，有eslintprettierhuskycommitlint等, 东西太多有的时候也是trouble😂😂😂,怎么正确的使用这个是每一个前端开发者都需要掌握的内容，请上车🚗🚗🚗。
2023-02-10 23:07:36
1731
原创 unplugin-vue-components 不能识别组件的自动导入的类型 (pnpm)
是一款能帮助组件自动导入的库，简单点的说，你不需要使用这行语句也能实现导入的效果。等同于以下效果。
2023-01-18 10:23:46
1861
1
原创 qgis 将县区的数据转成市区的边界数据
本期和大家分享了如何使用qgis来将一个县区的线转成一个市区的线。其实主要就是把线转成面，然后面在进行融合操作即可。
2022-10-31 13:10:46
1231
1
原创 cypress初探
本期主要使用cypress 来测试ui界面使用cypress来编写e2e测试使用cypress来编写组件测试,但是在使用组件的时候，可千万要看自己的node环境的版本哦，不然测试组件一直处于loading只写文章不放源码有点谈恋爱不结婚耍流氓的感觉😶🌫️😶🌫️😶🌫️。
2022-08-21 21:52:42
550
原创 vue3源码分析——ast生成代码 - 掘金
本期主要实现了如何将ast生成代码,在生成代码的过程，需要使用transform来转换代码，里面可以使用插件系统来对某个节点的个性化操作。在codegen模块中，创建上下文，来逐步增加对于的字符串。httpshttpshttps。...
2022-07-14 19:53:56
1115
原创 vue3源码分析——看看complier是怎么来解析的
vue3源码分析——手写diff算法vue3源码分析——实现组件更新vue3源码分析——解密nextTick的实现想知道是怎么实现的吗？🤔🤔🤔，本期就来实现的基础，看看·是如果来处理模板的，所有的源码请查看仓库在astexplorer.net/ 这个网站上可以写上vue的模板，然后选择vue3-complier,就可以得到vue3编译模板后的ast了。 最终效果如下：但是对于一开始肯定是没有那么多属性的，所以可以小步走。先来实现个最简单的形式。分步走在中这可以可以分成三种类型的节...
2022-07-07 12:08:30
502
原创 vue3源码分析——解密nextTick的实现
本期主要实现了`nextTick()`，通过`nextTick`看到了`vue`更新`dom`的方式是异步的。并且在这种方式的基础之上，需要使用到**js的事件循环**，在事件循环中**微任务比宏任务的优先级更高**。所以**nextTick使用的是微任务方式来更新dom** 。 看似不到20行的代码，里面却包含着这么多知识点，只能说大佬就是大佬，灵活运用👍👍👍...
2022-07-04 17:30:52
557
原创 一名外包仔的2022年中总结
大家好，我是, 目前是中科软的一名外包员工。现在年已经过去一半了，而我还是这个样子，现在借用当前的平台，来总结下今年上半年的工作情况和自己的一个情况吧😉😉😉在过去的半年中，自己除了做自己分内之事外，也在掘金，csdn，头条等平台发表自己的文章，也算是给自己的一个交代吧!😊😊😊2022年上半年的文章写的并不是很多，有的时候会质疑自己，写那么多干啥，又没有人看😟😟😟。后来想通了，上半年主要是vue3源码系列的文章,在写这个文章还需要重点感谢cuixiaorui/mini-vue 这个仓库，里面......
2022-07-02 16:17:15
2146
6
原创 vue3源码分析——实现组件更新
前面的两期主要是实现,的更新除了的更新外,还有的更新哦,本期就带大家一起来看看,本期所有的源码请查看vue3在更新element的时候,除了需要分情况讨论更新children外,还需要来看vue3的属性有没有变化;那么同样的道理,对于组件的更新,也是需要来更新属性,插槽等根据上面的流程图,可以写出这样的测试用例分析根据上面的流程图,可以分析出下面的需求问题解决:方法的调用肯定是在中的存在的时候来调用,里面需要进行新老节点的对比,判断是否需要进行更新.更新则调用去更新vnode的props...
2022-07-01 17:04:18
746
原创 vue3源码分析——手写diff算法
本期来实现，上一期中还差了children与children的对比😉😉😉 vue3更新流程中的children与children的对比，也就是diff算法，所有的源码请查看既然采用的是双端对比，那么肯定是需要3个指针的，请看下图： 总共有3个指针既然有了指针，那是否需要锁定范围呢！指针做对应的移动。移动的方式如下：根据上面的需求，我相信都能得出一个条件并且写出以下代码分情况讨论总共有7中情况，分别是：会发现，i不动， e1和 e2两个指针往左边移动 最终 ,所以可以得出一个条件是...
2022-06-30 20:53:02
756
原创 vue3源码分析——实现element属性更新，child更新
本期来实现， vue3更新流程，更新元素的props,以及更新元素的child，所有的源码请查看在上面流程图中，如果在中有一个对象,并且赋值为 ，然后通过某种方式重新赋值为2，就会触发更新流程；effect收集依赖肯定是在里面，但是具体在哪里呢？在中，里面有三个函数看到上面三个函数，想必大家都知道是在哪个函数进行effect了吧！😊😊😊属性更新属性更新，毫无疑问的是，元素中的属性进行更新，新增，修改和删除等！分析通过上面的需求，分析以下内容：问题解决：更新children...
2022-06-28 23:15:00
747
原创 vue3源码分析——实现createRenderer，增加runtime-test
本期主要实现了`createRenderer函数`，`改造createApp`等函数，通过这些函数，可以看到vu3在设计方面的用心良苦，尽量让vue3满足更多的人。增加了`runtime-test`，方便用于测试dom环境下面的情况！
2022-06-23 22:45:00
854
原创 vue3源码分析——实现组件通信provide,inject
本期来实现， vue3组件通信的provide，inject，所有的源码请查看getCurrentInstance 是获取当前组件的实列，并且只能在setup函数中使用分析在上面的测试拥立中，可以得到以下内容：问题解决：对于上面两个问题，只需要导出一个函数，并且在全局定义一个变量，在setup执行的时候，赋值全局变量即可拿到当前组件的实例，然后setup执行之后，清空即可getCurrentInstance 有没有想到实现方式这么简单哇！😀😀😀父子组件传值可以使用来实现，还记得是...
2022-06-21 21:24:06
458
原创 vue3源码分析——实现slots
本期来实现， slot——插槽，分为普通插槽，具名插槽，作用域插槽，所有的源码请查看在 模板中使用插槽的方式如下：在中的内容最终会被成render函数，render函数里面会调用h函数转化成vnode，在vnode的使用方法如下：看完slots的基本用法，一起来实现个slots,方便自己理解slots的原理哦！😀😀😀使用slots的地方是this.slots，并且调用的属性是default,那么slots，并且调用的属性是default,那么slots则是一个对象，对象里面有插槽的...
2022-06-20 20:00:00
2584
原创 vue3源码分析——实现props,emit，事件处理等
本期来实现，setup里面使用props,父子组件通信props和emit等，所有的源码请查看在render函数中，可以通过this,来访问setup返回的内容，还可以访问this.$el等由于是测试dom,jest需要提前注入下面的内容，让document里面有app节点，下面测试用例类似在html中定义一个app节点哦本功能的测试用例正式开始分析上面的测试用例解决这两个需求:针对上面的分析，需要在setupStatefulComponent中来创建proxy并且绑定到instanc...
2022-06-17 17:13:07
1438
原创 vue3源码分析——实现组件的挂载流程
接下来一起学习下，runtime-core里面的方法，本期主要实现的内容是，通过createApp方法，到mount最后把咋们的dom给挂载成功!，所有的源码请查看咋们需要使这个测试用例跑成功！,在图中可以发现，调用app传入了一个render函数，然后挂载，对比期望结果！思考再三，先把这一节先说了，jest是怎么来测试dom的？默认的环境是，在中可以看到npm有在node中实现了浏览器环境的api的库，jsdom、happy-dom 等，咋们这里就使用比较轻的happy-dom，但是hap...
2022-06-14 23:15:00
1142
原创 vue3源码分析——rollup打包monorepo
本期咋们就先放一放源码，咋们如何打包monorepo应用，主要是源码看累了🤣🤣🤣，打包工具也是一门必须课，所有的源码请查看为了提供大家的学习兴趣，咋们先来看看效果，准备发车，请系好安全带🚗🚗🚗使用的是来打包的，咋们也用来打包咋们的应用，有不了解的请查看官网，monorepo是多个单体仓库合并得到的，那么咋们就先来打包单个仓库，然后再来想办法怎么一键打包全部在我项目中，shared仓库是相当与函数的集合，用于对外导出一些工具函数,那么咋们可以在本目录下的中安装。 正当我就想在sha...
2022-06-12 20:17:02
2306
原创 手写vue3源码——ref, computed 等
手写vue3源码——创建项目手写vue3源码——reactive, effect ,scheduler, stop手写vue3源码——readonly, isReactive,isReadonly, shallowReadonly本期主要实现的api有，ref, isRef, unRef, proxyRefs, computed，本次所有的源码请查看在代码中，这个api也是用的很频繁的,所以今天咋们就一起来实现下既然都需要使用 .value，是不是意味着，传入的数据都会被一个对象所包裹，基于...
2022-06-09 21:30:45
535
1
原创 手写vue3源码——readonly, isReactive,isReadonly, shallowReadonly
手写vue3源码——readonly, isReactive,isReadonly, shallowReadonl
2022-06-08 10:25:10
424
原创 手写vue3源码——reactive, effect ,scheduler, stop 等
, 大家都清除 ,但是对于, 等方法是需要看源码咋们才能明白的😃😃😃，在上一节中，咋们用 pnpm 搭建了一个和vue3一样的monorepo，这一节中，就使用这个方式在里面填充的源码吧！本节的源码请查看本次目标主要是实现，reactive，effect stop, onstop, scheduler 等为了方便大家的理解，这一次咋们就从 测试用例的角度，来写出源码，vue3的响应式相信大家都用过，那么用测试用例来描述则是这样的。reactive看到 想必都不陌生，传入一个对象，返回一个代理对...
2022-06-07 11:23:51
495
2
原创 手写vue3源码——创建项目
在前面的文章中，分析了vue3的响应式数据原理、vue组件初始化流程、vue组件更新流程等文章，有人说学习源码的最好方式，就是把别人的思路理解到来，自己手动敲一遍。那咋们就来手动敲一敲，并且把整个过程记录下来，给有需要的有缘人😃😃😃vue3源码采用的是pnpm + monorepo的方式来创建仓库的。那咋也学习下，用pnpm + monorepo的方式来创建一个自己的源码库使用 来初始化项目然后改动下的内容如下：增加 来使项目是一个monorope的项目，并且里面增加内容如下：packages
2022-06-02 16:27:40
835
原创 vue3组件更新流程
先写一个组件，, 然后咋们来执行更新的流程mountupdate还记得组件挂载阶段中的 么？ 在这里的时候会进行依赖收集，会在实例instance上挂载一个方法当数据发送变化的时候，就会触发 函数， 不清楚响应式系统的可以查看这里整体的流程图如下：咋们来分析下 vue3 中属性变化的情况对于这种情况，咋们怎么才能找出属性的变化，是不是就是应该遍历 如果里面的 在 中不存在，则标记为新增的属性 代码应该这么写：第二种情况 属性减少对于这种情况，咋们要找出属性的变化，直接遍历 oldPro
2022-06-01 17:31:33
921
原创 vue3 组件初始化流程（vue3 源码系列）
学习完成响应式系统后，咋们来看看vue3组件的初始化流程既然是看vue组件的初始化流程，咋们先来创建基本的代码，跑跑流程（在app.vue中写入以下内容，来跑流程）import { h, ref } from "vue";export default { name: 'App', setup() { const count = ref(0); return { count }; }, render() { return h('div.
2022-05-30 23:00:00
3140
2
原创 vue3 响应式数据库—— reactive
请仔细阅读下面代码，思考vue3是如何做响应式数据的?let temp// reactive 是使对象变成一个代理 const counter = reactive({ num: 0 }); // effect主要职责是开启依赖收集，等待get的调用完成正常的依赖存储 effect(() => (temp = counter.num)); // 触发更新 counter.num = 1;在这里是不是有的人要说，咋们在日常开发中，直接在 vue 模板上里面写一个ref 自动帮我.
2022-05-27 09:12:42
963
原创 大文件处理（上传，下载）思考
文件处理一直都是前端人的心头病，如何控制好文件大小，文件太大上传不了，文件下载时间太长，tcp直接给断开了😱😱😱等效果为了方便大家有意义的学习，这里就先放效果图，如果不满足直接返回就行，不浪费大家的时间。文件上传文件上传实现，分片上传，暂停上传，恢复上传，文件合并等文件下载为了方便测试，我上传了1个1g的大文件拿来下载，前端用的是流的方式来保存文件的，具体的可以看这个api TransformStream正文本项目的地址是： github.com/cll123456/d….
2022-05-21 23:00:00
1788
5
原创 unocss + vite + varlet 搭建移动端
unocss 是什么，不清楚的可以看这边 重新构想原子化 CSS，整体的架构vue3 + setup + ts， vw + rem等来搭建的移动端项目tslint, prettier来控制代码的格式simple-git-hook来控制代码提交的规范deploy.sh 来实现自动部署unocss 及其生态来实现css和icon图标的按需加载，不需要使用js就能引入图标记录滚动条位置，监听物理键返回，路由动画等都是hooks的形式存在项目效果图代码地址： github.com/cll123
2022-04-10 11:05:18
3733
1
原创 vue3-ssr-webpack-vuex-vue-router 项目搭建过程分享
引言2022年都过去两月了，是时候开始学起来了。从哪里开始呢？那就从未来的趋势 ssr来动手吧，现在vue3也出来这么久了，ssr怎么搭建呢？那咋就一起来康康吧????。项目源码：github.com/cll123456/v… 项目演示地址：chenliangliang.top:9022/ （这个地址不能保证长期有效，但是上面的源码地址一般不会删除，有兴趣的可以直接clone源码跑起来）;正文流程ssr的流程，有一张经典的图，如下：从上面的这张图咋们可以得出以下结论：图中包含
2022-02-22 15:44:12
1878
原创 vue2，vue3移动端实现表格固定和首列固定
好久都没有写文章了，上个月业务繁忙，事情比较多，最近在做移动端中发现了一个好玩的事情，那就是移动端中实现表格，固定列有哪些方法：1. position: sticky粘性布局，这个属性也可以实现行和列的固定，在pc端上没有啥问题，但是在手机端上会抖动。使用注意事项：要求父级不能够使用overflow：auto,否则不生效。牛刀小试<!DOCTYPE html><html><head> <meta charset="UTF-8">.
2022-01-07 15:06:55
7434
11
原创 腾讯云安装mysql数据库
数据库迁移，记录下如何在新的服务器上安装mysql,方便自己的同时也来方便他人????????????1、卸载MariaDB1、查看rpm -qa|grep mariadb复制代码2、卸载yum remove mariadb复制代码3、删除数据目录 rm -rf /var/lib/mysql/* 复制代码4、删除配置文件rm -f /etc/my.cnf复制代码2.下载对应的包1. 下载并安装MySQL官方的 Yum Repository wget -i -c
2021-11-25 23:00:00
956
原创 vue2 响应式原理保姆级别
面试题：请阐述vue2响应式原理vue官方阐述：cn.vuejs.org/v2/guide/re…响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函数。在具体实现上，vue用到了几个核心部件：Observer：DepWatcherSchedulerObserverObserver要实现的目标非常简单，就是把一个普通的对象转换为响应式的对象为了实现这一点，Observer把对象的每个属性通过Object.defineProp..
2021-11-24 23:00:00
701
原创 vue2 Vue3 v-model 原理
面试题：请阐述一下 v-model 的原理v-model即可以作用于表单元素，又可作用于自定义组件，无论是哪一种情况（vue2, vue3），它都是一个语法糖，最终会生成一个属性和一个事件。当其作用于表单元素时，vue会根据作用的表单元素类型而生成合适的属性和事件。例如:text 和 textarea 元素使用 value property 和 input 事件；checkbox 和 radio 使用 checked pro..
2021-11-19 08:56:45
3220
原创 保姆级别Vue2组件通信(面试常问)
在面试过程中，经常会被面试官问的鸦雀无言，但是如果我们日常积累些知识点，等到被面试的时候，就可以和面试官来交流技术。父子组件通信绝大部分vue本身提供的通信方式，都是父子组件通信prop最常见的组件通信方式之一，由父组件传递到子组件父组件<template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App" /> </div><..
2021-11-15 17:19:56
266
原创 请你阐述一下对vue虚拟dom的理解
面试题：请你阐述一下对vue虚拟dom的理解1. 什么是虚拟dom？虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构 如下：{tag: 'div',props: { id: 'app'},chidren: [ { tag: 'p', props: { className: 'text' }, chidren: [], text: 'hello world!!!' }]}复制代码生成的...
2021-11-15 17:17:36
304
原创 你知道mongoose中的 __v么
mongoose 在添加数据的时候，会默认给你加上一个属性__v,这个属性的全称是__version,顾名思义是版本的意思，作用是给每一个文档加上版本控制，防止并发来修改数据库的数据。mongoose中的并发管理在mongoose中，我们可以会有以下操作：当多个异步函数同时操作数据库时，就可能发生这样的情况，具体的场景往往发生在并发请求中面对这种情况，mongoose作出以下假设：当修改一个文档时，如果某些字段已经不再和数据库对应，说明这个字段的数据是脏数据（dirty data），对..
2021-11-10 22:33:10
1284
Desktop.zip
2020-07-28
Promise.js
2020-06-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人