谢小虫虫-CSDN博客

原创简单实现vue渲染系统、响应式系统

最终实现效果能够通过render函数创建vnode，并通过mount函数挂载到指定的html元素中响应式部分通过reactive函数对对象进行数据劫持，在数据get时添加依赖，在数据set时遍历依赖数组，执行数据中的函数html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content

2022-02-28 11:25:47 406

原创 npm、nvm、npx、nrm的区别

npm、nvm、npx、nrm的区别npm：npm是node自带的包管理工具，负责对依赖包进行下载，同时也可以发布自己的包nvm：nvm是node的版本管理工具，可以使用nvm动态切换node版本nrm：nrm是npm的源管理工具，可以使用该工具对npm进行换源，例如npm官方源的包下载速度较慢，可以切换成淘宝镜像npx：npx是npm5.2版本后发布的一个新的命令，使用npx命令时，会自动进入node_modules/.bin目录中查找其中的命令，例如 npx http-server，会进入nod

2021-10-05 20:37:47 829

原创 vue3的性能优化

尤大在开发者大会上说vue3相较于vue2性能提高了1.2-2倍，经测试实际能达到2-3倍。vue3的性能优化主要体现在如下几点：一、diff算法优化vue2中diff算法是整体全量比对，对整颗vdom树进行循环对比操作而在vue3中加入了静态标签（PatchFlag）的概念PatchFlag的意思是给元素上增加一个标记下图中的1就是一个PatchFlag标签vue3中对PatchFlag进行了划分，不同元素加上不同的标签类型TEXT = 1 // 动态文本节点CLASS=1<&

2021-08-24 19:01:19 3617

原创 js stream api流的一点笔记

js 中streamApi是个较少用到的api，该api用于解决如何消费有序的小信息块的问题，stream也就是流在使用中存在三种情况1、流出口处理数据速度大于流入口提供数据速度（流出口偶尔闲置，可以接受）2、流出口处理数据速度与流入口提供数据速度基本持平（理想状态）3、流出口处理数据速度小于流入口提供数据速度（数据积压）流中有一个内部队列用于解决数据积压的问题，然而数据积压有上限，当达到上限会使用反压通知流入口停止发送数据。stream中有三种流：可读流、可写流、转换流1、可读流const

2021-08-19 23:32:40 1299

原创了解vue3与vue2的差别

1、vue3提高了对typeScript的兼容性2、vue3中新增了defineAsyncComponent用于显示定义异步组件3、vue2中的attrs不包含class和style属性，vue3中包含4、vue3中移除了事件处理中对attrs不包含class和style属性，vue3中包含4、vue3中移除了事件处理中对attrs不包含class和style属性，vue3中包含4、vue3中移除了事件处理中对on、off、off、off、once的支持5、vue3中移除了children,父组件无

2021-08-11 22:16:53 714

原创 canvas笔记六---变形

1、状态的保存和恢复 Saving and restoring statesave()保存画布(canvas)的所有状态，状态指的是当前画面应用的所有样式和变形的一个快照restore()save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数每次调用save相当于保存当前状态并压入栈中，调用restore，状态栈中顶层的状态回弹出，并恢复所有状态save和restore的使用示例var ctx = document.getElementById(‘canvas’)

2021-05-28 09:16:02 167

原创 canvas笔记五---使用图片

1、引入图像到canvas需要两个步骤：（1）获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片（2）使用drawImage()函数将图片绘制到画布上drawImage(image, x, y)其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。获得需要绘制的图片canvas的API可以使用下面这些类型中的一种作为图片的源：HTMLImageElement

2021-05-28 09:14:53 420

转载 canvas笔记四---绘制文本

1、绘制文本canvas 提供了两种方法来渲染文本:fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.var ctx = document.getElementById(‘canvas’).getContext(‘2d’);ctx.font = “48px serif”;ctx.fill

2021-05-28 09:13:23 2158

转载 canvas笔记三---样式和颜色

1、色彩 Colors到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。fillStyle = color设置图形的填充颜色。strokeStyle = color设置图形轮廓的颜色。2、fillStyle下方案例使用for循环生成放个阵列，每个方格颜色不同for(let i = 0;i<6;i++){ for(let j=0;j<6;j++){ ctx.fillSty

2021-05-28 09:10:21 263

原创 canvas笔记二---图形绘制

二、Canvas的绘制功能1、填充矩形// 设置颜色注：先设置颜色后绘制ctx.fillStyle = ‘green’// 填充矩形参数含义：坐标x,坐标y,矩形width,矩形heightctx.fillRect(100,100,100,100)2、绘制矩形边框// 设置边框颜色ctx.strokeStyle = ‘red’// 绘制矩形边框参数含义：坐标x,坐标y,边框width,边框heightctx.strokeRect(300,100,100,100)绘制

2021-05-28 09:07:56 774

原创 canvas笔记一---概述

一、Canvas概述1、canvas简述Canvas是一种轻量级的画布（实际上就是H5的标签）使用canvas进行JavaScript编程无需增加额外插件，性能高当前浏览器版本不支持，请升级浏览器canvas只有两个标签属性，width、height，代表画布宽度和高度注意：canvas的width和height不要用css的样式来设置，如果用css的样式来设置，画布会失真、变形标签的文字是用来提示低版本浏览器的，高版本浏览器看不到我们绘制canvas图是在JavaScript中

2021-05-28 09:06:06 174

原创 ES6中iterator和Symbol.iterator的理解

Iterator遍历器是一种为各种不同数据结构提供同意访问机制的接口Iterator的作用：1、一是为各种数据结构，提供一个统一的、简便的访问接口2、是的数据结构的成员按照某种次序排列3、为ES6中新增了一种for…of循环Iterator 的遍历过程是这样的。（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。（3）第二次调用指针对象的next方法，指针就指向数据结构的

2021-05-07 16:09:16 605

原创 typescript高级类型笔记

交叉类型// 交叉类型交叉类型用&来定义，交叉类型相当于合并T对象和U对象，返回的对象要既包含T的属性也包含U的属性const mergeFunc = <T, U>(arg1: T, arg2: U): T & U => { let res = {} as T & U res = Object.assign(arg1, arg2) return res}console.log(mergeFunc({ a: '1' }, { b: '2' })

2021-05-07 11:14:09 209

原创关于事件循环及宏任务微任务的233事

关于事件循环及宏任务微任务的233事由于需要操作DOM，限制了javaScript只能是一种单线程的语言，然而如果执行所有任务都是从上到下同步式的执行，在发送请求后，未得到数据返回前整个浏览器会处于“卡死”的状态，这样的用户体验极差。为了解决这种情况，出现了异步的机制，而实现异步机制的方法就是事件循环（Event Loop）首先来看下下面的案例console.log('script start');setTimeout(function() { console.log('setTimeout

2021-04-29 11:26:13 126

原创对于闭包的理解及其容易内存泄漏的原因

对于闭包的理解及其容易内存泄漏的原因闭包这个知识点在javaScript中算是一个较难的点，之前看过很多关于闭包的文章，只知道闭包是在函数中创建函数，具体用来干嘛以及经常提到的闭包容易造成内存泄漏都不是很了解废话不多说首先看下闭包的作用作用：由于作用域链的存在，位于作用域链顶层可以轻易获取到位于作用域链底层的变量，而作用域链底层无法获取到作用域链顶层的变量，闭包就是用于解决这个问题所产生的上代码下方代码为一个典型的闭包，通过使用闭包在在外部获取到了函数作用域内部的变量，在person函数中定义了

2021-04-22 23:05:25 970

原创 Object.prototype.toString.call(obj)的理解

Object.prototype.toString.call(obj)的理解常用的确认变量类型的几种方法中用的较多的有typeof、instanceof、以及Object.prototype.toString.call(obj)，而其中适用性最强的是Object.prototype.toString.call(obj)，然而一直以来对于这个方法都没有深入的理解过，今天仔细研究了下，做个记录对于toString()方法以往的认知都是用于返回数组、对象等的字符串表示，突然能够用于确认变量数据类型了？一脸懵逼

2021-04-20 22:42:27 389

原创 websocket到底是个啥

websocket到底是个啥以前在学习时经常听到websocket，做项目的时候也接触过，但对其没有一个明确的认知，突发奇想研究了一下阮一峰老师的WebSocket 教程，做个记录阮一峰老师原文地址.websocket实际上和http一样是一种数据传输协议，出现这种协议的目的是为了解决http只能由客户端向服务端发送请求而服务端无法主动推送数据到客户端的问题websocket的几个特点：1、和http与https一样有非安全的ws和非安全的wss2、端口使用的也是80端口和443端口，并且握手阶

2021-04-14 23:13:51 1805 2

原创 Proxy和Reflect详解

Proxy和Reflect详解之前一直没有理解proxy代理是啥意思，只是感觉很深奥的样子，最近正好在研究vue3的响应式原理，发现vue3是使用proxy完成响应式的，因此仔细的研究了一下proxy和reflect到底是啥proxy是es6新增的一个新特性，可以通过代理对象完成对目标对象的拦截，并在拦截后进行骚操作Proxy是通过实例化来生成的，入参有两个，第一个target是要拦截的目标对象，handler处理程序对象是对拦截后要完成的操作let target = { foo: '谢小虫虫'

2021-04-08 23:36:45 2845

原创防抖与节流

防抖与节流最近在看面试题，发现对防抖与节流的概念一直有些模糊，今天研究了一下，弄懂了两者间的区别，记录一下防抖与节流的作用都是用于控制短时间内大量操作，让浏览器不会因为短时间太过频繁的执行导致页面卡顿防抖与节流都是通过定时器实现的防抖效果：1秒内，只要有新的任务触发，取消上一个任务，重新计时节流效果：1秒内，当前任务未执行完毕，新触发的任务无效防抖防抖指的是当短时间出现大量要执行的重复任务时，当A任务准备开始执行时，B任务出现了，这时取消A任务的执行，直接执行B任务用一个例子展示防抖效果：

2021-04-04 17:09:21 216

原创 js原型、原型链的深入

js原型、原型链的深入要理解原型，首先要了解构造函数、原型对象所有函数在创建的时候，都会产生一个prototype属性，prototype指向的是原型对象，而原型对象中包含了构造函数，构造函数又指向了函数本身简单的用图表示就是一个三角恋的情况function Person(){}let personOne = new Person()console.log(Person.prototype === personOne.__proto__) // trueconsole.log(Person

2021-04-03 18:41:43 202

原创 js变量提升心得

js变量提升心得旧版本变量提升：旧版本浏览器没有块级作用域这种说法，只有全局作用域与函数作用域在旧版本中变量提升变量提升定义：js在代码执行之前，会将变量声明提升到所属作用域的最顶端例如console.log(foo) // undefinedvar foo = 'bar';console.log(foo) // bar上述代码可以看作var foo // 经变量提升定义提升到所属作用域的最顶端console.log(foo) // undefinedvar foo = 'ba

2021-04-01 22:38:55 96

原创 react中refs的理解

react中refs的理解在react中refs的作用与vue中类似，都是用于对元素做标记以便于获取并修改DOM元素注意：ref在原生DOM元素上和自定义组件上是不同的，ref在原生DOM元素上获取到的是DOM元素本身，而在自定义组件当中，ref获取到的是组件的子组件目前较常用ref使用方式有两种方式一：使用回调函数的形式class RefExample extends React.Component{ constructor(props){ super(props); thi

2021-03-14 23:18:37 636

原创关于react Context的理解

关于react Context的理解react中Contex设计的目的是为了创建在组件树中能够共享的数据，子组件获取父组件数据无需通过props的层层传递// react创建Context,通过createContext方法创建context对象，方法中参数为context对象的默认值context MyContext = React.createContext(defauleValue)// 下方为顶层组件App，在顶层组件使用Provider将数据放出function App() { /

2021-03-12 14:59:17 191

原创 react学习中关于事件绑定this的理解

**react学习中关于事件绑定this的理解官方原文"为了在回调中使用 this，这个绑定是必不可少的"class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 为了在回调中使用 `this`，这个绑定是必不可少的 this.handleClick = this.handleClick.bind(thi

2021-03-02 14:45:17 210

原创简单描述vue3中ref、reactive、toRef、toRefs区别

简单描述vue3中ref、reactive、toRef、toRefs区别ref:ref用于创建基础数据类型的响应式变量（采用复制的方式，修改响应式数据不会影响原始数据，数据发生改变，界面就会自动更新）setup(){ const refA = ref(0)}reactive:reactive用于创建引用类型的响应式对象setup(){ const refA = reactive({ name: "LISA", age: "36" })}toRef: toRef接收两个参数ta

2021-03-01 13:53:43 2889 2

原创 vue的无缝滚动插件vue-seamless-scroll的使用

vue的无缝滚动插件vue-seamless-scroll的使用安装三部曲1、npm install vue-seamless-scroll --save2、import scroll from ‘vue-seamless-scroll’;3、vue.use(scroll)使用<template> <vue-seamless-scroll :data="data" :class-option="classOption" class="seamless-warp">

2020-10-20 14:48:02 1004 2

原创 mysql5.7版本安全模式修改密码安装

mysql5.7版本安装选择next，选择默认项，点击安装，最后finish完成安装但这时我们无法设置用户名密码，某些机器在安装后甚至无法通过mysql -u root -p 命令无密码登录这时我们可以进入安全启动模式修改密码进入mysql的bin目录下,输入如下代码输入下面代码之前要使用net stop mysql命令停止mysql服务再使用mysql -u root -p便可...

2019-11-04 19:57:41 581 1

qq_40434213的博客