- 博客(24)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 【React】（二） React15和React16生命周期的区别比较
众所周知，生命周期的作用对于React组件来说是举足轻重的。特别是React组件内部的生命周期render方法，更可以说是React组件的灵魂。不管是虚拟Dom还是渲染工作流都离不开render。而其他的生命周期方法更像是react组件的躯干，躯干每做一件事都会直接影响到灵魂render。一、React15 生命周期介绍React 15生命周期方法汇总constructor() // 构造函数componentWillReceiveProps() // 父组件状态属性更新触发shouldC.
2021-01-30 17:08:25
1068
2
原创 手写Promise（个人笔记）
手写Promise第一步：先声明一个类，以及一些需要用到的属性；说明：首先我们最常用promise的几个方法resolve，reject，then我们需要先定义出来，另外我们要知道promise是异步操作，而异步操作都是有最基本的三种状态的（等待，成功，失败），所以状态我们也需要定义。另外，声明一个promise实例时，我们会向它的构造函数中传入一个函数，这个函数是会立即执行的，并且会将resolve，reject两个方法当作参数传递进去。第二步：resolve和reject方法中需要做哪些事情
2020-10-29 22:32:23
313
原创 【Vue3】customRef及其应用场景
在阅读Vue3文档响应式基础时，看到了这个 API。觉得可能在某些场景下确实还是比较好用的，所以拿来记录一下。概念按照文档中的说明：customRef 可以用来创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。其实大致意思就是，我们可以按照自己的业务需求去自定义封装一个 ref 对象，在其内部可以使用 get 和 set去跟踪或更新数据，有点计算属性内味.
2021-12-17 16:24:33
2372
1
原创 【Vue3】defineComponent、defineAsyncComponent、defineCustomElement 介绍
Vue3 的官方文档中大致介绍了这三种全局API。但是我看完过后，对于一些点还是处于一个比较懵逼的状态，于是自己去查阅了一些资料以及手写代码去尝试，才渐渐领悟了过来。在看官方文档期间，我把自己在脑海中疑惑的问题整理了一下，然后写在了这篇文章中，并从网上和实践中去找寻到了一些答案。咱们先来看文档中对于这三个全局API的介绍：先来看下 defineComponent文档中第一句话很容易看懂，说白了就是从实现上看，用了或者跟不用这个api没多大区别~~但是呢，第二句话说的好像又有一些区别，不过我没太.
2021-12-06 17:37:56
16888
1
原创 【Vue3】利用watchEffect的清除副作用实现一个防抖函数
今天在Vue3官方文档上看了下 watchEffect 的介绍。以前用的时候都用得比较简单，所以以为这 api 也没啥值得特别掌握的地方，今天看了文档才发现，这个 api 并没有想象中那么简单~特别是看到清除副作用的时候比较懵逼，最后结合CSDN上一些大佬的博客解释才慢慢明白这其中的精髓。正好昨天刚写了一个关于Vue2如何实现防抖函数的文章，那么接下来，我就再次用一个防抖函数的实现过程来给大家分析一下这个api以及可能遇到的坑。我模拟输入框搜索功能来演示，直接上代码：<template&g.
2021-12-02 17:36:41
2740
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
1949
原创 【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
11135
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
1590
1
原创 坑！chrome内核浏览器下iframe与父页面加载相同css资源引起的问题
最近工作做工单时，突然遇到了两个chrome浏览器的问题，当时排查问题的时候非常棘手，其中一个问题查阅了很多资料都没有找到合理的解释，最后通过自己写demo去尝试，发现了问题所在，这个文章就说一下这个问题及它的解决方案——chrome内核浏览器下iframe与父页面加载相同css资源引起的问题。注：这个问题目前我测试时发现只在chrome上重现过，其他浏览器例如firefox和safari、ie等都没有重现到。一、问题描述首先，详细的描述一下这个问题。我们直接用demo来演示，现在我一共创建了2个.
2021-01-10 16:40:24
1231
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
3992
1
原创 同构渲染（客户端渲染 + 服务端渲染）
> 什么是同构渲染1.基于React、Vue等框架，客户端渲染和服务器端渲染的结合.在服务端执行一次，用于实现服务器渲染（首屏直出）.在客户端执行一次，用于接管页面交互2.核心解决了SEO和首屏渲染慢的问题3.拥有传统服务端渲染的优点，也有客户端渲染的优点同构渲染的流程1.客户端请求一个地址走到服务端；2.服务端通过接口服务查询页面所需数据，并返回到服务端；3.服务端渲染页面以及生成客户端SPA脚本；4.返回渲染好的页面内容和客户端的SPA脚本给客户端，也就是html；5.
2020-12-03 23:02:09
1053
原创 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
1762
原创 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
1282
1
Vue3的JSX语法中怎么使用插槽？
2021-04-30
TA创建的收藏夹 TA关注的收藏夹
TA关注的人