高山景行，一尘不染

1、你了解diff算法吗？如果oldVnode有子节点而VNode没有，则删除el子节点如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el如果两者都有子节点，则执行updateChildren函数比较子节点

Loader 是webpack中提供了一种处理多种文件格式的机制，因为webpack只认识JS和JSON，所以Loader相当于翻译官，将其他类型资源进行预处理。Plugin功能更强大，主要目的就是解决loader 无法实现的事情，比如打包优化和代码压缩等。Plugin加载后，在webpack构建的某个时间节点就会触发plugin定义的功能，帮助webpack做一些事情。实现对webpack的功能扩展。常见的Plugin有哪些html-webpack-plugin 处理html资源，默认会创建一个空的H

http2通过gzip与compress对头部进行压缩，并且在客户端与服务端各维护了一份头部索引表，只需要根据索引id就可以进行头部信息的传输，缩小了头部容量，间接提升了传输效率。：http1一个连接只能提交一个请求，而http2可以同时处理无数个请求，可以降低连接的占用数量，进一步提升网络的吞吐量。降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。http 传输的数据都是未加密的，也就是明文的，设置了 SSL 协议来对 http 协议。

②：如果没有的话，它就在该对象的__proto__下查找，因为__proto__这个属性是指向对应的构造函数身上的protytpe，把它查找的时候找的就是构造函数的原型。③：如果原型身上也没有的话，那它会继续往外面找，直到找到最顶层的Object身上的prototype，如果都没有，则返回undefined。当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。当我们调用一个对象身上的属性或者方法的时候，他就会有一个查找规则。

【代码】vue 封装组件时v-model的实现。

setup函数，vue3入门知识点整理，ref, reactive, toRef, toRefs, watch, watchEffect等使用案例

首先a标签这几个伪类是有顺序的，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的a:link{color:yellow;} /* 未访问的链接 */a:visited {color:black;} /* 已访问的链接 */a:hover{color:red;} /* 鼠标划过链接 */a:active{color:green;} /* 已选中的链接 */四个状态 同时存在，是有先后顺序的：a:.

“nofollow” 标签是Google、Yahoo和微软公司前几年一起提出的一个标签，链接加上这个标签后就不会被计算权值，搜索引擎支持nofollow属性，在很大程度上抑制博客或论坛的垃圾留言。对站长来说是一件大好事。nofollow是HTML元标签(meta)的content属性和链接标签(a)的rel属性的一个值，告诉机器(爬虫)无需追踪目标页，为了对抗blogspam(博客垃圾留言信息)，Google推荐使用nofollow，告诉搜索引擎爬虫无需抓取目标页，同时告诉搜索引擎无需将的当前页的Pag

目录meta标签的使用一、是什么？二、两个属性 name、http-equiv三、name 属性四、http-equiv属性五、viewport兼容性问题：meta标签常用属性值的写法和作用charsetcharset有两种写法百度禁止转码SEO 优化部分viewportviewport主要是影响移动端页面布局的，例如：各浏览器平台Google Chrome360浏览器UC手机浏览器QQ手机浏览器Apple iOSGoo..

1、文字超出显示为省略号//单行：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;//多行：display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;2、水平垂直居中// 第一种 .parent { display: flex; justify-conte

1、src\core\instance\index.jsfunction Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options) // 初始化 调

目录cache-control强缓存：协商缓存：http1.0http1.1cache-controlprivate：客户端可以缓存public：客户端和代理服务器均可缓存；max-age=xxx：缓存的资源将在 xxx 秒后过期；no-cache：需要使用协商缓存来验证是否过期；no-store：不可缓存must-revalidate:使用 must-revalidate 指令，代理会向源服务器再次验证即将返回的响应缓存目前是否仍有效。另外，使用 mu.

目录服务器的缓存控制客户端的缓存控制条件请求小结缓存（Cache）是计算机领域里的一个重要概念，是优化系统性能的利器。由于链路漫长，网络时延不可控，浏览器使用 HTTP 获取资源的成本较高。所以，非常有必要把“来之不易”的数据缓存起来，下次再请求的时候尽可能地复用。这样，就可以避免多次请求 - 应答的通信成本，节约网络带宽，也可以加快响应速度。试想一下，如果有几十 K 甚至几十 M 的数据，不是从网络而是从本地磁盘获取，那将是多么大的一笔节省，免去多少等待的时间。实际上，HT

目录数据压缩分块传输范围请求多段数据小结HTTP 可以传输很多种类的数据，不仅是文本，也能传输图片、音频和视频。早期互联网上传输的基本上都是只有几 K 大小的文本和小图片，现在的情况则大有不同。网页里包含的信息实在是太多了，随随便便一个主页 HTML 就有可能上百 K，高质量的图片都以 M 论，更不要说那些电影、电视剧了，几 G、几十 G 都有可能。相比之下，100M 的光纤固网或者 4G 移动网络在这些大文件的压力下都变成了“小水管”，无论是上传还是下载，都会把...

1、网址的组成是？下面的这张图显示了 URI 最常用的形式，由 scheme、host:port、path 和 query 四个部分组成，但有的部分可以视情况省略。HTTP 的默认端口号是 80，HTTPS 的默认端口号是 443。2、...

目录一、属性的简写二、属性名表达式三、super关键字四、扩展运算符的应用五、属性的遍历六、对象新增的方法Object.is()Object.assign()Object.getOwnPropertyDescriptors()Object.setPrototypeOf()Object.getPrototypeOf()Object.keys()Object.values()Object.entries()Object.fromEntries()一

目录一、参数二、属性函数的length属性name属性三、作用域四、严格模式五、箭头函数一、参数ES6允许为函数的参数设置默认值functionlog(x,y='World'){console.log(x,y);}console.log('Hello')//HelloWorldconsole.log('Hello','China')//HelloChinaconsole.log('Hello','')//Hell...

目录一、扩展运算符的应用二、构造函数新增的方法Array.from()Array.of()三、实例对象新增的方法copyWithin()find()、findIndex()fill()entries()，keys()，values()includes()flat()，flatMap()四、数组的空位五、排序稳定性一、扩展运算符的应用ES6通过扩展元素符...，好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列console...

目录一、是什么二、流程三、手写new操作符一、是什么在JavaScript中，new操作符用于创建一个给定构造函数的实例对象例子functionPerson(name,age){this.name=name;this.age=age;}Person.prototype.sayName=function(){console.log(this.name)}constperson1=newPerson('Tom'...

目录内存回收垃圾回收算法引用计数标记清除（常用）内存泄漏内存泄漏识别方法1、浏览器方法2、命令行方法JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量，堆存放复杂对象，池存放常量，所以也叫常量池。昨天文章介绍了堆和栈，小结一下：基本类型：-->栈内存（不包含闭包中的变量） 引用类型：-->堆内存内存回收JavaScript有自动垃圾收集机制，垃圾收集器会每隔一段时间就执行一次释放操作，找出那些不再继..

官网：https://www.npmjs.com/package/vue-pdf其实是对pdf.js进行了再次封装<div class="pdf" v-show="fileType === 'pdf'"> <p class="arrow"> <!-- // 上一页 --> <span @click=&

一、是什么事件代理，俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素前面讲到，事件流的都会经过三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段，而事件委托就是在冒泡阶段完成事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数二、应用场景如果我们有一个列表，列表之中有

什么是继承？继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码在子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能一、class 类继承class Car{ constructor(color,speed){ this.color = color this.speed = speed // ... }}在继承color、spe...

call、apply、bind作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向例子一：var name="lucy";const obj={ name:"martin", say:function () { console.log(this.name); }};obj.say(); //martin，this指向obj对象setTimeout(obj.say,0); //lucy，this指向window对象从上面可以看到，

1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。callback （执行数组中每个值的函数，包含四个参数） 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 2、currentValue （数组中

async/await 以前 Promise 串行执行还是比较麻烦的，这里可以理清楚串行 Promise 的思维脉络。最常用的队列操作就是Array.prototype.reduce()了；function runPromiseByQueue(myPromises) { myPromises.reduce( (previousPromise, nextPromise) => previousPromise.then(() => { console.log..

闭包：在一个内层函数中访问到其外层函数的作用域。在js中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥梁。例子：function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数，一个闭包 alert(name); // 使用了父函数中声明的变量 }

数组基本操作可以归纳为 增、删、改、查，需要留意的是哪些方法会对原数组产生影响，哪些方法不会下面对数组常用的操作方法做一个归纳增下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响 push() unshift() splice() concat() push()push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度letcolors=[];//创建一个数组letcount=colors....

高阶函数定义很简单，就是至少满足下列一个条件的函数：接受一个或多个函数作为输入 输出一个函数简单来说，高阶函数是一个接收函数作为参数传递或者将函数作为返回值输出的函数。函数作为参数传递JavaScript 语言中内置了一些高阶函数，比如 Array.prototype.map，Array.prototype.filter 和 Array.prototype.reduce，它们接受一个函数作为参数，并应用这个函数到列表的每一个元素。我们来看看使用它们与不使用高阶函数的方案对比。Array.

柯里化#定义函数柯里化又叫部分求值，维基百科中对柯里化 (Currying) 的定义为：在数学和计算机科学中，柯里化是一种将使用多个参数的函数转换成一系列使用一个参数的函数，并且返回接受余下的参数而且返回结果的新函数的技术。用大白话来说就是只传递给函数一部分参数来调用它，让它返回一个新函数去处理剩下的参数。使用一个简单的例子来介绍下，最常用的就是 add 函数了。// 木易杨const add = (...args) => args.reduce((a, b) =>

目录节流函数防抖函数有一种思想是将「节流」和「防抖」合二为一，变成加强版的节流函数，关键点在于「 wait 时间内，可以重新生成定时器，但只要 wait 的时间到了，必须给用户一个响应」。这种合体思路恰好可以解决上面提出的问题。节流函数函数节流指的是某个函数在一定时间间隔内（例如每3秒）只执行一次，在这3秒内无视后来产生的函数调用请求，也不会延长时间间隔。3 秒间隔结束后第一次遇到新的函数调用会触发执行，然后在这新的 3 秒内依旧无视后来产生的函数调用请求，以此类推。实现方案有.

JS中有六种简单数据类型：undefined、null、boolean、string、number、symbol，以及引用类型：object常见的类型转换有： 强制转换（显示转换） 自动转换（隐式转换） 显示转换显示转换，即我们很清楚可以看到这里发生了类型的转变，常见的方法有： Number() parseInt() String() Boolean() Number()将任意类型的值转化为数值先给出类型转换规则：Numb

http://m.liulibin.com:8001/ 本地代理http://10.252.62.109:8001接口：例子http://m.liulibin.com:8001/sydc/home/detail?data=disjdsj这时接口也是基于域名的，相当一个域名 配置多个代理首先：配置：...

nodemon 全局的安装：npm install -g nodemon安装完 nodemon 后，就可以用 nodemon 来代替 node 来启动应用odemon 比较流行的原因之一就是它的可配置性比较高，下面是官网给出的配置文件 nodemon.json 的例子，加上我自己了解到的有用的一些配置，开发环境建议可以把每个参数都写上备用，生产环境就把没有必要的参数去掉，有些字段是可以在命令行模式以参数形式给出的，可以通过 -h 查看，下面逐个解释： { "restartabl

1、官方文档：https://hanziwriter.org/cn/docs.html/2、获取汉子的数据的接口https://cdn.jsdelivr.net/npm/hanzi-writer-data@2.0/牛.json3、文档的apiinit() { const { canvasWidth, canvasShowCharacter, canvasShowHintAfterMisses, ca.

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。　　为什么要学习this？如果你学过面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这篇文章，当然

懒加载(Lazy-Load)。它是针对图片加载时机的优化：在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象，因为图片真的太多了，一口气处理这么多任务，浏览器做不到啊！目的懒加载 的目的是当页面的图片进入到用户的可视范围之内在加载图片的一种优化方式。可以增加首屏加载的速度，毕竟，用户点开页面的瞬间，呈现给他的只是首屏，我们只要把首屏的资源图片加载处理就可以了，至于下面的图片，当用

<template> <div> <div class="bubble" id="bubble"> <div id="topBub"> <div class="item">11111</div> <div class="item">22222</div> <div class="item">33333</div> .

直接上代码：<template> <div> {{ data }} </div></template><script>import config from "./config";export default { data: () => { return { data: "", timer: {}, }; }, props: config, mounted(

一、初始化package.json文件npm init 二、安装webpacknpm install webpack webpack-cli -g //全局安装npm install webpack webpack-cli -D //本地安装三、简单demo实现1、创建src/js/app.js 简单代码输入2、创建webpack.config.jsconst { resolve } = require('path'); //node内置核心模块，用来设置路径。mo..