自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(24)
  • 资源 (1)
  • 问答 (1)
  • 收藏
  • 关注

原创 【React】(二) React15和React16生命周期的区别比较

众所周知,生命周期的作用对于React组件来说是举足轻重的。特别是React组件内部的生命周期render方法,更可以说是React组件的灵魂。不管是虚拟Dom还是渲染工作流都离不开render。而其他的生命周期方法更像是react组件的躯干,躯干每做一件事都会直接影响到灵魂render。一、React15 生命周期介绍React 15生命周期方法汇总constructor() // 构造函数componentWillReceiveProps() // 父组件状态属性更新触发shouldC.

2021-01-30 17:08:25 1066 2

原创 手写Promise(个人笔记)

手写Promise第一步:先声明一个类,以及一些需要用到的属性;说明:首先我们最常用promise的几个方法resolve,reject,then我们需要先定义出来,另外我们要知道promise是异步操作,而异步操作都是有最基本的三种状态的(等待,成功,失败),所以状态我们也需要定义。另外,声明一个promise实例时,我们会向它的构造函数中传入一个函数,这个函数是会立即执行的,并且会将resolve,reject两个方法当作参数传递进去。第二步:resolve和reject方法中需要做哪些事情

2020-10-29 22:32:23 313

原创 【Echarts】Vue2 引入中国地图及默认省份高亮显示

【Echarts】Vue2 引入中国地图及默认省份高亮显示。

2022-10-14 14:42:37 2250 1

转载 【VUE2】vue中render函数 渲染html代码的三种方式

vue render的三种输出方式

2022-10-08 10:53:07 3607

原创 【Vue3】customRef及其应用场景

在阅读Vue3文档响应式基础时,看到了这个 API。觉得可能在某些场景下确实还是比较好用的,所以拿来记录一下。概念按照文档中的说明:customRef 可以用来创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数,该函数接收 track 和 trigger 函数作为参数,并且应该返回一个带有 get 和 set 的对象。其实大致意思就是,我们可以按照自己的业务需求去自定义封装一个 ref 对象,在其内部可以使用 get 和 set去跟踪或更新数据,有点计算属性内味.

2021-12-17 16:24:33 2370 1

原创 【Vue3】defineComponent、defineAsyncComponent、defineCustomElement 介绍

Vue3 的官方文档中大致介绍了这三种全局API。但是我看完过后,对于一些点还是处于一个比较懵逼的状态,于是自己去查阅了一些资料以及手写代码去尝试,才渐渐领悟了过来。在看官方文档期间,我把自己在脑海中疑惑的问题整理了一下,然后写在了这篇文章中,并从网上和实践中去找寻到了一些答案。咱们先来看文档中对于这三个全局API的介绍:先来看下 defineComponent文档中第一句话很容易看懂,说白了就是从实现上看,用了或者跟不用这个api没多大区别~~但是呢,第二句话说的好像又有一些区别,不过我没太.

2021-12-06 17:37:56 16851 1

原创 【Vue3】利用watchEffect的清除副作用实现一个防抖函数

今天在Vue3官方文档上看了下 watchEffect 的介绍。以前用的时候都用得比较简单,所以以为这 api 也没啥值得特别掌握的地方,今天看了文档才发现,这个 api 并没有想象中那么简单~特别是看到清除副作用的时候比较懵逼,最后结合CSDN上一些大佬的博客解释才慢慢明白这其中的精髓。正好昨天刚写了一个关于Vue2如何实现防抖函数的文章,那么接下来,我就再次用一个防抖函数的实现过程来给大家分析一下这个api以及可能遇到的坑。我模拟输入框搜索功能来演示,直接上代码:<template&g.

2021-12-02 17:36:41 2726 2

原创 【VUE】在vue中实现防抖函数(解决Vue 2.x组件内this上下文问题)

在vue中实现防抖函数是非常简单的事情,但是往往我们生成的防抖函数可能需要使用到组件内的this上下文,那么这个时候可能就需要灵活的变通一下了,这篇文章只是介绍我遇到这个问题时候的思路哈,各位大佬如有更好的方法,欢迎给小弟在评论区介绍一下哈~首先还是来说一下在vue中不需要考虑this上下文的防抖函数生成方法:在项目中的utils文件夹下的util.ts文件中声明一个防抖函数生成方法:export function debounceFromVue (fn: Function, time: nu.

2021-12-01 10:33:52 1947

原创 【Vue】vue-router 实现原理

History模式和Hash模式的区别1.url地址不一样。Hash 模式是把Url中#后边的内容作为路径地址,而 History 模式则和我们平常看到的地址几乎一样,相比之下, History 模式的地址更加简洁。2.实现原理不一样。(详细原理后面说)3.服务器配置不一样。History 模式下需要我们在服务器端去进行配置,防止其请求对应路径下的index.html或index.htm文件,而 Hash 模式则不需要在服务器端进行任何配置。(如果在nginx中进行配置,需要在nginx.conf

2021-09-18 18:24:38 125

原创 【vue3】 使用JSX实现普通、具名和作用域插槽

最近在vue3构建的项目中使用到了JSX(不得不说JSX用起来的感觉就是清爽)。但是前段时间遇到了一个问题,vue template中的slot插槽如何在JSX中实现呢?查了很久资料、文档都很难找到一个能够直接解决我的问题的方案,后来各个文档中找到的线索拼接起来后逐渐尝试才实现。...

2021-05-14 14:56:22 11075 7

原创 【Vue3】reactive,ref,toRef和toRefs初步认识

最近做一个公司项目开始用到了Vue3。因为刚刚开始使用,所以很多东西都需要查文档查资料去搞懂,而我遇到的第一个问题就是关于响应式数据。Vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,我自己也做了一个简单的使用上的总结,希望对大家有所帮助,如果有不对的地方,希望大家及时指正。关于它们的原理,以后再研究吧,毕竟做项目要紧~一、reactivereactive 接收一个对象参数,它可以把传入的对象包装成一个proxy对象,那么将来访问proxy对象中.

2021-04-14 14:35:18 865 1

原创 【React】(三) React 组件间通信的那些事儿

最近开始看到组件间通信了。组件间通信对于React组件来说相当于就是组件间的“沟通与表达”。React的核心特征是“数据驱动视图”,UI = render(data) 就是React的核心思想,也就是React的视图会随着数据的变化而变化。一、组件间通信方式基于 props 的单向数据流通信所谓单向数据流,意思就是当前组件的state以props的形式流动时,只能流向组件树中比自己层级更低的组件。也就是说,只能由父组件传props给子组件进行通信,而不能反过来。接下来我们来说一下在此通信方式下的几

2021-02-04 22:00:14 209

原创 【React】(一) JSX渲染成真实Dom的基本过程

最近在深入学习React的源码以及原理,这里将学到的知识记录下来。暂时只学到了基本过程,详细的内部函数原理后面有机会再记录下来。一、编译JSX首先,JSX本质其实是javascript的语法扩展,和模板语言非常接近,但是其充分具备javascript的能力。但是其要在javascript生效的话,需使用到 Babel 进行编译,JSX在被编译后,会变成一个针对 React.createElement 的调用。二、React.createElement 内部流程首先,React.createEle

2021-01-17 23:50:02 1588 1

原创 坑!chrome内核浏览器下iframe与父页面加载相同css资源引起的问题

最近工作做工单时,突然遇到了两个chrome浏览器的问题,当时排查问题的时候非常棘手,其中一个问题查阅了很多资料都没有找到合理的解释,最后通过自己写demo去尝试,发现了问题所在,这个文章就说一下这个问题及它的解决方案——chrome内核浏览器下iframe与父页面加载相同css资源引起的问题。注:这个问题目前我测试时发现只在chrome上重现过,其他浏览器例如firefox和safari、ie等都没有重现到。一、问题描述首先,详细的描述一下这个问题。我们直接用demo来演示,现在我一共创建了2个.

2021-01-10 16:40:24 1228 2

原创 NuxtJS 基本使用

一、初始化NuxtJS项目这里我们手动来初始化一个NuxtJS项目,方便理解。具体官方文档参照:nextJS官方文档首先先创建一个文件夹可以取名为 NuxtJS_demo,并在此文件夹下执行以下命令 :npm init -ynpm install nuxt此时我们的文件夹中会生成package.json文件,这时候我们可以把package.json文件中的scripts添加一个执行dev指令如:{ "name": "NuxtJS_demo", "version": "1.0.0

2020-12-14 21:29:29 3988 1

原创 同构渲染(客户端渲染 + 服务端渲染)

> 什么是同构渲染1.基于React、Vue等框架,客户端渲染和服务器端渲染的结合.在服务端执行一次,用于实现服务器渲染(首屏直出).在客户端执行一次,用于接管页面交互2.核心解决了SEO和首屏渲染慢的问题3.拥有传统服务端渲染的优点,也有客户端渲染的优点同构渲染的流程1.客户端请求一个地址走到服务端;2.服务端通过接口服务查询页面所需数据,并返回到服务端;3.服务端渲染页面以及生成客户端SPA脚本;4.返回渲染好的页面内容和客户端的SPA脚本给客户端,也就是html;5.

2020-12-03 23:02:09 1051

原创 Vuex中State、Getter、Mutation、Action、Module作用和用法

Vuex store的基本代码结构如下:一、Statestate是单一状态树,里面集中存储所有的数据,简单地说,也就是vuex用来存储数据状态的地方。用法也非常简单,将需要保存的数据添加在里面,然后外界可通过$store.state.[data]访问即可,当然也可以用vuex提供的mapState去简化,需要注意的是,需在computed中调用mapState方法拿到vuex state中的数据。具体如下:这里一共展示了三种拿到state数据的用法,第一种就是通过vue实例对象上的$s.

2020-11-27 00:15:11 1756

原创 Gulp案例优化(四)

一、自动加载插件当我们项目越来越复杂,那么我们使用到的插件也会越来越多,如果每一个插件都去使用一次require引入进来的话,会很麻烦,而且使代码量增加。所以,这里我们可以使用自动加载插件,也就是安装gulp-load-plugins,安装过后,我们可以将它引入进来,并且在它之上使用所有的已安装过的gulp插件。如下:const loadPlugins = require('gulp-load-plugins')const plugins = loadPlugins();// const sas

2020-11-17 22:06:17 324 2

原创 Gulp 案例(三)

一、样式编译首先调用gulp提供的api=>src来指定需要编译的文件,这里可以使用通配符的方式指定多个文件。然后在src后面可以传入一些options,大家有兴趣可以去看文档,这里就不做过多介绍了:https://www.gulpjs.com.cn/docs/api/src/。这里我们需要编译样式文件夹中的scss文件,所以需要用到gulp-sass这个包,所以需要先安装这个包(这里注意,gulp-sass里有一个node-sass模块依赖,这个依赖需要从国外库去下载,国内网络很可能下载不下来

2020-11-14 17:25:32 167

原创 Gulp 构建过程核心工作原理(二)

gulp在构建一个项目时通常需要处理很多文件,处理过程中会拿到文件的内容进行转化,压缩等操作,其实它们的核心流程就是在stream提供的Transform方法中进行的。如下:main.css中的内容:实现转换:转换后生成的main.min.css的内容:以上就是gulp 构建过程的核心工作原理。...

2020-11-12 23:11:06 148

原创 Gulp 使用(一)

一、基本使用先在gulpfile.js中简单使用一些方法。注意,在最新的gulp当中,取消了同步代码模式,约定我们每个任务都必须是一个异步的任务,所以在任务的结束必须有一个结束的标识,这里我们用了回调函数done来标识任务已结束,否则会报错。二、组合任务组合任务指的就是将几个任务组合起来去调用。当然,有不同的调用方式,比如可串行调用和并行调用。想要实现这两种调用方式我们需要用到gulp里的两个函数:series和parallel。其中series就是表示串行调用任务,而parallel则是并行

2020-11-12 22:55:12 143

转载 git命令大全(转载)

Git目前已经成为国内主流互联网公司通用的代码管理工具;大小企业也已随着潮流纷纷从CVS, Subversion向Git过度。可以说,Git已经成为一名合格程序员的必备技能。而对于我们来说,无论新手或老油条,都需要有一套Git命令字典,方便随时使用。本文基本上涵盖了常用到的所有...

2020-11-03 17:53:19 161

原创 TypeScript重点笔记

TypeScript(以下简称为ts)是一门给予JavaScript基础之上的语言,它是一个JavaScript的超集。所谓超集就是在JS的原有基础之上多了一些特性,多出来的就是一套更为强大的类型系统,最终再编译为能够在生产环境直接运行的JS代码。一、原始类型ts 原始类型一共可分为7种:string、number、boolean、void、null、undefined、symbol。二、...

2020-11-02 22:43:37 176

原创 Angular 关于ng-src不立即刷新的问题

Angular 关于ng-src不立即刷新的问题 首先,自我介绍,我是一个怕蜜蜂的人,over~ 本篇为个人笔记,勿喷最近用Angular写代码时候发现Angular的ng-src指令并不会立刻让图片更新,而是隔了一段时间后才更新,这个一段时间可能是3,4秒,也可能是1分钟。后来查阅资料才知道,这个指令与其他内部指令稍有不同。按照懒汉(我)的书写习惯,一般会在服务器下发图片的url过后直...

2019-04-29 16:49:06 1280 1

纯JS实现多级菜单组件

做项目时用纯JS写了一个简单的通过配置渲染多级菜单的组件,非常简单

2021-04-20

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除