高山景行，一尘不染

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

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

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

一、是什么Tree shaking是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫Dead code elimination简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去而treeshaking则是一开始就把有用的蛋白蛋黄（import）放入搅拌，最后直接作出蛋糕也就是说 ，tree shaking其实是找出使用的代码在Vue2...

目录开始之前正文一、Options Api二、Composition Api三、对比小结开始之前Composition API可以说是Vue3最大的特点，那么为什么要推出Composition Api，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题： 代码的可读性随着组件变大而变差 每一种代码复用的方式，都存在缺点 TypeScript支持有限 以上通过使用Composition Api都能迎刃而解正文一、Optio.

一、编译阶段回顾Vue2，我们知道每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter，则会通知watcher，从而使关联的组件重新渲染试想一下，一个组件结构如下图<template><divid="content"><pclass="text">静态文本</p><pclass="text">...

一、设计目标不以解决实际业务痛点的更新都是耍流氓，下面我们来列举一下Vue3之前我们或许会面临的问题 随着功能的增长，复杂组件的代码变得越来越难以维护 缺少一种比较「干净」的在多个组件之间提取和复用逻辑的机制 类型推断不够友好 bundle的时间太久了 而Vue3经过长达两三年时间的筹备，做了哪些事情？我们从结果反推 更小 更快 TypeScript支持 API设计一致性 提高自身可维护性 开放更多底..

目录一、Object.defineProperty小结二、proxy三、总结一、Object.defineProperty定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象为什么能实现响应式通过defineProperty两个属性，get及set get 属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的t..

目录一、组件间通信的概念二、组件间通信解决了什么二、组件间通信的分类三、组件间通信的方案props传递数据$emit 触发自定义事件refEventBus或root与listenersprovide 与 injectvuex小结一、组件间通信的概念开始之前，我们把组件间通信这个词进行拆分 组件 通信 都知道组件是vue最强大的功能之一，vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体...

一、什么是首屏加载首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节关于计算首屏时间利用performance.timing提供的数据：通过DOMContentLoad或者performance来计算出首屏时间//方案一：document.addEventListener('DOMContentLoaded.

一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM什么意思呢？我们可以理解成，Vue在更新DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举例一下Html结构<divid="app">{{message}}</div>构建一个vue实例constvm=new...

一、mixin是什么Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂Vue中的mixin先来看一下官方定义mixin（混入），提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等..

一、Key是什么开始之前，我们先还原两个实际工作场景 当我们在使用v-for时，需要给单元加上key <ul><liv-for="iteminitems":key="item.id">...</li></ul> 用+new Date()生成的时间戳作为key，手动强制触发重新渲染 <Comp:key="+newDate()"/>那么这背后的逻辑是什么，key的作用又是什么？一句话来讲...

一、什么是指令开始之前我们先学习一下指令系统这个词指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能除了核心功能默认内置的指令 (v-model和v-show)，Vue也允许注册自定义指令指令使用的几种方式：//会实例化一个指令，但这个指令...

一、修饰符是什么在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理vue中修饰符分为以下五种： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 二、修饰符的作用表单修饰符在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model关于表单的修饰符有如下：

目录一、是什么二、比较方式三、原理分析小结一、是什么diff算法是一种通过同层的树节点进行比较的高效算法其有两个特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff算法的在很多场景下都有应用，在vue中，作用于虚拟dom渲染成真实dom的新旧VNode节点比较二、比较方式diff整体策略为：深度优先，同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中，循......

理解：鼠标按下的时候，创建对应的元素，然后把原元素的布局属性给他，然后鼠标移动的尺寸给新建的元素富裕移动直接上代码：&lt;template&gt; &lt;div class="main" id="main"&gt; &lt;div class="tuo tuo1" @mousedown="move"&gt; 1 &lt;/div

pdf.js官网地址：https://mozilla.github.io/pdf.js/点击下载：然后把需要的文件拿出来，我这边用的是vue-cli3.0，其实就是路径的问题，直接上图这是效果：当然还有各种各样的展示功能，具体可以加微信1049665226...

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

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(

生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyedbeforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中mounted：此时，.

html部分代码：vue.config.js：module.exports = { pwa:{ iconPaths: { favicon32 : 'favicon.ico', favicon16 : 'favicon.ico', appleTouchIcon: 'favicon.ico', maskIcon : 'favicon.ico', msTileImage : 'favicon.ico

1、父子不互相关联的多选这个只需要改变check-strictly2、默认选中有一个属性是setCheckedNodesthis.$refs.treeOrg.setCheckedNodes([{id:1111}]);注意：这个时候和懒加载一块使用，需要再resolve之后使用demo:3、实现单选<el-tree ref="tree" node-key="id" :props="props" @check-change="orgCheckChange"...

经历流程：浏览器向DNS服务器请求解析该URL中的域名所对应的IP地址； 解析出IP地址后，根据IP地址和默认端口，和服务器建立TCP连接 浏览器发出读取文件（URL中域名后面部分对应的文件）的HTTP请求，该请求报文作为TCP三次握手的第三个报文的数据发给服务器； 服务器对浏览器请求作出响应，并把对应的html文本发送给浏览器 释放TCP连接，也就是断开TCP连接（四次挥手） 浏览器将该html文本并显示内容三次握手：第一次握手：客户端发送第一个包，其中SYN标志位为1, ACK.

注意：在拖拽事件中遇到目标元素ondrop事件没有效果，需要在目标元素上写ondragover事件，阻止ondragover的默认行为，然后ondrop事件才起作用拖拽的api:在拖动目标上触发事件(源元素): ondragstart- 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend- 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter- 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragove...

ECMA变量可能包含两种不同数据类型的值：基本类型值和引用类型值。基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。基本数据类型：Undefined、Null、Boolean、Number、String基本数据类型是按值访问的，因为可以操作保存在变量中实际的值。引用类型的值：保存在内存中的对象与其他语言不同，JavaScript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。...

一、什么是SPA单页面应用概念：整个WEB项目只有一个页面，使用路由机制进行组件之间的切换优点：客户端渲染、数据传输量小、减少服务器端压力、交互/响应快、前后端分离缺点：首屏加载慢，对SEO不友好，不利于百度，360等搜索引擎收录快照二、什么是服务端渲染SSR概念：将组件或页面通过服务器端生成HTML字符串，再发送到浏览器端渲染优点：对于SEO友好，首屏加载快缺点：页面重复加载次数高，开发效率低，数据传输量大，服务器压力大三、适合场景SPA：对项目性能要求高、页面加载速度

const path = require('path')const resolve = dir => path.join(__dirname, dir)module.exports = { devServer: { port: 8400, }, chainWebpack: config => { config.resolve.alias .set('assets', resolve('src/assets')) config.resolve.

axios的post请求，默认是application/json提交JSON格式的数据实际我们后端要求的 'Content-Type': 'application/x-www-form-urlencoded'这时需要配置content-type:axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';这里使用了qs插件：简单来说，qs 是一个增加了一些安全性的查询字符串解析和序.

在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复，在你引入VueRouter的时候再加上一句话：const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err =&

在工作过程中，经常碰见自己封装的组件需要监听父组件传过来的值，很有可能是在子组件需要对值进行处理，有不少同学不知道如何处理这个值，以下是简单demo，仅供参考。。。父组件：<template> <div> <el-button type="success" @click="handelClick">点击</el-button> <modalCom :isDisplay="isDisplay" @close="close" :

demo:实现流程：基于给页面最外侧标签设置class类名，来改变，通过函数参数的传递实现，多定义类名，赋值给需要的标签1、vue-cli安装 less2、新建common.less.theme(@background: #2789ff, @homebg: rgba(37, 37, 37, 1.00), @fontcolor: #fff, @hoverbg: #b9bec9, @activebg: #5193e2, @homeli1: rgba(47, 42, 65, 0...

效果：这里要借助vue-pdf插件去展示缩略图：安装方法npm install --save vue-pdfhtml片段： <div class="wrap"> <input type="file" @change="fileChange" multiple /> <div v-for="(item, index) of pdf" :key="index" @click=..

安装express1、安装node2、安装express:npm install -g express3、安装npm install -g express-generator4、创建一个express工程：express helloworld5、进入项目主目录：cd helloworld6、安装必备包：npm install7、启动express程序：npm start...