是阿瑶的博客呀~

原创 刚去公司，发现node版本过高，如何将node版本降低？

我们可以安装nvm，node版本管理器来实现。1、nvm是什么？nvm（node.js version management），是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。2、nvm下载可点击下面的链接：githubhttps://github.com/coreybutler/nvm-windows/releases下载最新版本,我下载的是windows版本。打开网址

原创 解决this.$set()不更新问题

解决this.$set()不更新问题

原创 git修改远程跟踪分支

git修改远程跟踪分支

原创 如何获取URL参数

1、使用URLSearchParams 方法// 创建URLSearchParams实例const urlSearchParams = new URLSearchParams(window.location.search)// 把键值对列表转换为一个对象const params = Object.fromEntries(urlSearchParams.entries())2、使用split 方法function getParams(url) { const res = {} i

原创 Vue3组件通讯（父子组件通讯）详解

原创 Vue3.0 新特性以及使用总结

1、Vue3带来的新变化 性能提升（零成本：从vue2切到vue3就享受到） 首次渲染更快，diff算法更快，内存占用更少，打包体积更小，.... 更好的Typescript支持（在vue下写TS更方便了） 提供新的写代码的方式：Composition API 2、这些Vue2.0的语法不能用了vue3.0对于2.0版本的大部分语法都是可以兼容的（之前是怎么写的，现在也正常写），但是也有一些破坏性的语法更新，这个要格外注意:1、移除了vue实例上的$on方法 （..

转载 vue中的watch数据监听以及watch中各属性详解

1、watch使用的几种方法（1）通过watch监听data数据的变化，数据发生变化时，就会打印当前的值watch: { data(val, newval) { console.log(val) console.log(newval) }} （2）通过watch监听docData数据的变化，数据发生变化时，this.change_number++（使用深度监听）watch: { docData: { handl

原创 vue虚拟dom和react虚拟dom有什么不同？

react中数据发生变化（调用setstate时），render函数就会执行，重新生成一个新的虚拟dom，这个虚拟dom和旧的虚拟dom做比较，得出差异然后渲染。而vue组件中数据发生变化，由于数据变化会触发setter，由于vue组件中数据的getter的作用，收集了依赖，setter触发会根据这些依赖，生成新的虚拟dom，然后对比新旧虚拟dom进行渲染。react函数式组件思想 当你setstate就会遍历diff当前组件所有的子节点子组件, 这种方式开销是很大的, 所以reac...

转载 JavaScript高频面试题（43道JS进阶问题列表）

原文仓库地址：https://github.com/lydiahallie/From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview!从基础到高级：测试您对JavaScript的了解程度，刷新您的知识，或为您的编码面试做好准备！1. 下面代码的输出是什么？function sayHi() { .

原创 2021前端高频面试题（必会）持续更新中......

1. Vue的优点？Vue的缺点？优点：渐进式，组件式，轻量级，虚拟dom,响应式，单页面路由，数据与视图分开。缺点：单页面不利于SEO，不支持IE8一下，首屏加载时间长。2.Vue跟React的异同点？相同点： 都使用了虚拟dom 组件化开发 都是单项数据流（父子组件之间，不建议子组件直接修改父组件的数据） 都支持服务端渲染 不同点： React的JSX，Vue的 template 数据变化，React手动（setState）,Vue

原创 Vue 项目在打包上线时，去掉所有的console.log输出

1.安装插件yarn add babel-plugin-transform-remove-console -D2.修改 babel.config.js 配置// 项目在发布时需要用到的 babel 插件数组const proPlugins = [];// 如果当前是development开发环境或者是production生产环境，则使用去掉 console 的插件if (process.env.NODE_ENV === 'development' || process.env.NODE

原创 超全详解vue-router路由

1. 什么是路由?路由就是路径和组件的映射关系1.1 为什么使用路由?-->在一个页面里, 切换业务场景单页面应用(SPA): 所有功能在一个html页面上实现前端路由作用: 实现业务场景切换1.2 路由 - 组件分类.vue文件分2类, 一个是页面组件, 一个是复用组件.vue文件本质无区别, 方便学习和理解, 总结的一个经验src/views(或pages) 文件夹 和 src/components文件夹 页面组件 - 页面展示 - 配合路由用 ..

原创 ES6中Set和Map数据结构

ES6提供了新的数据结构set.它类似于数组,但是成员的值是唯一的,没有重复的值.set本身是一个构造函数,用来生成set数据结构. const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach((x) => s.add(x)) for (const i of s) { console.log(i) } //2,3,4,5...

原创 JavaScript数组Array常用方法汇总

一.JavaScript中创建数组的方式（1）使用 Array 构造函数：var arr1 = new Array(); //创建一个空数组var arr2 = new Array(20); // 创建一个包含20项的数组var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组（2）使用数组字面量表示法：var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建一个包含1项的数组va

原创 Vue必问面试题之Vue路由

1. 路由之间是怎么跳转的？有哪些方式1、<router-link to="需要跳转到页面的路径">2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数2. vue-router怎么配置路由在vue中配

转载 Microsoft Edge联动VsCode --将Edge浏览器开发者工具中代码的修改同步到Vscode中

1.先说一下背景我们在浏览器的开发者工具调试自己写的页面样式，调了半天终于调好了，于是打开你本地的代码找到对应的代码把你刚刚在浏览器调试修改的代码一个个在本地代码中再修改一遍。如下图所示：这样确实听麻烦的,我们如果改的代码少一点还好说，如果改的多了，又碰上项目热更新导致页面刷新，那我们刚才改的所有代码都找不到记录了,估计得当场吐血....基于这个痛点，Microsoft Edge团队提出了一个不错的点子，并且已经正在实验这个功能了，那就是"将Edge浏览器开发者工具中代码的修改同步到Vs..

原创 Vue生命周期与钩子函数(后附经典面试题)

1. vue生命周期一组件从 创建 到 销毁 的整个过程就是生命周期

原创 Vue 的 $nextTick 的使用和原理

$nextTick是Vue更新DOM-异步的例如:点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值,因为DOM更新是异步的<template> <div> <p ref="myP">{{ count }}</p> <button @click="btn">点击count+1, 马上提取p标签内容</button> </div></template>

原创 Vue中scope的作用

作用功能：style上加scoped, 组件内的样式只在当前vue组件生效,实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块.但是,虽然方便但是我们需要慎用，因为当我们使用公共组件时会造成很多困难，增加难度.实现原理：在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性,而且必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到...

原创 一篇让你读懂diff算法

Vue用diff算法,新虚拟DOM和旧虚拟DOM比较:情况1:根元素变了,删除重建旧虚拟DOM:<div id="box"> <p class="my_p">123</p></div>新虚拟DOM:<ul id="box"> <li class="my_p">123</li></ul>情况2: 根元素没变, 属性改变, --->元素复用, 更新属性旧虚拟.

原创 @vue/cli(vue脚手架)超详细教程

1.@vue/cli 脚手架介绍@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目1.1 @vue/cli的好处 开箱即用 0配置webpack babel支持 css, less支持 开发服务器支持 1.2 @vue/cli安装 全局安装命令 yarn global add @vue/cli# ORnpm install -g @vue/cli 查看vue脚手架版本 vue -V1.3@...

原创 promise

1、回调地狱多层回调函数相互嵌套就形成了回调地狱。缺点：代码耦合性太强，牵一发而动全身，难以维护 大量冗余的代码相互嵌套，代码的可读性变差1.1、如何解决回调地狱的问题为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念1.2、promise的基本概念1、promise是一个构造函数可创建promise的实例 const p = new Promise new出来的promise实例对象代表一个异步操作2、 promise.

原创 ES6模块化基础

1、node.js中的模块化node.js中遵循了CommonJS的模块化规范。其中：导入其它模块使用require()方法 模块化对外分享成员使用module.exports对象模块化的好处：降低了沟通的成本，极大的方便了各个模块之间的相互调用，利人利己。2、前端模块化规范的分类在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服.

原创 Git 常用命令大全

git init 初始化本地git仓库（创建新仓库） git config --global user.name "xxx" 配置用户名 git config --global user.email "[email protected]" 配置邮件 git config --global --unset http.proxy remove proxy configuration on git git clone git+ssh://[email protected]...

原创 Git基础概念与Git基本操作

1.什么是 GitGit是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点：项目越大越复杂，协同开发者越多，越能体现出 Git 的高性能和高可用性Git 的特性① 直接记录快照，而非差异比较② 近乎所有操作都是本地执行Git的记录快照Git 快照是在原有文件版本的基础上重新生成一份新的文件，类似于备份。为了效率，如果文件没有修改，Git不再重新存储该文件，而是只保留一个链接指向之前存储的文件。缺点：占

原创 怎么让一个没有宽高的div垂直水平居中

1.利用css3和定位的方法,让一个不定宽高的div在整个网页中水平垂直居中<body> <div> 我是没有宽高的div </div></body><style>div{ /* 1 设置定位 */ position: absolute; /* 2 x,y轴走网页的一半 */ left: 50%; top: 50%; /* 3 往回走自身x,y的一半 *

原创 MySQL 基础操作——增查改删

一、mysql 数据库/表的操作连接数据库 mysql -u root -p 退出数据库 quit/exit 查看当前使用的数据库 select database() 查看所有数据库 show databases 创建数据库 create database test 查看创建数据库的语句 show create database test 使用数据库（use 数据库名） us...

原创 创建 JSONP 接口

1.JSONP的实现原理。浏览器通过<script>标签的src属性，请求服务器的数据，同时，服务器返回一个函数的调用。特点：JSONP 不属于真正的 Ajax 请求，因为它没有使用 XMLHttpRequest 这个对象 JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求2.创建JSONP接口。注意事项：如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明JSONP的接口，否则JSONP接口会被处理成开.

原创 JavaScript 类 class

一.类在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象.类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个， 通过类实例化一个具体的对象.1.创建类class Star{//类的共有属性放到constructor里面constructor(name,age){this.name=name;this.age=age;}}//使用定义的类创建实例对象var pyy=new Star('彭于晏',18);console

原创 javascript 面向过程与面向对象

1.面向过程面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个个调用就可以了.2.面向对象面向对象就是把事务分解成一个个对象,然后由对象之间分工与合作.3.面向过程与面向对象对比 面向过程 面向对象 优点 性能比面向对象高,适合与硬件联系很紧密的东西 ...

原创 同源与跨域

一. 同源策略1.什么是同源如果两个页面,协议,域名,端口都一致,则为同源例如:2.什么是同源策略同源策略（Same origin policy）是浏览器提供的一个安全功能官方概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制.通俗理解就是浏览器规定,A网站的JavaScript,不允许和非同源的网站B之间进行资源的交互.例如:① 无法读取非同源网页的 Cookie、LocalStorage 和.

原创 简述防抖和节流的应用场景及区别

1.防抖策略防抖策略(debounce)是当事件被触发后,延迟n秒后再执行回调函数,如果在这n秒内事件被再次触发,则重新计时.好处是:它能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次.防抖的应用场景:用户在输入框连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源.2. 节流策略节流策略(throttle),可以减少一段时间内事件的触发频率.节流策略的应用场景:鼠标不断触发某事件时,如点击,只在

原创 session 认证机制

1.HTTP 协议的无状态性HTTP 协议的无状态性，指的是客户端的每次 HTTP 请求都是独立的，连续多个请求之间没有直接的关系，服务器不会主动保留每次 HTTP 请求的状态2. 如何突破 HTTP 无状态的限制对于超市来说，为了方便收银员在进行结算时给 VIP 用户打折，超市可以为每个 VIP 用户发放会员卡.注意：现实生活中的会员卡身份认证方式，在 Web 开发中的专业术语叫做 Cook3. 什么是 Cookei Cookie 是存储在用户浏览器中的一段不超过 ...

原创 基于 Express 写接口

1.创建基本的服务器创建一个index.js文件const express=require('express')const app=express()app.listen(3000,()=>{console.log('running......')})2.创建API路由模块新建一个router.js文件const express = require('express')const router=express.router()//在这里挂载路由module.e

原创 express 自定义中间件

1.如何自己动手定制中间件模拟一个类似于 express.urlencoded 这样的中间件，来解析 POST 提交到服务器的表单数据2.实现步骤： 定义中间件 监听 req 的 data 事件 监听 req 的 end 事件 使用 querystring 模块解析请求体数据 将解析出来的数据对象挂载为 req.body 将自定义中间件封装为模块 2.1 定义中间件使用 app.use() 来定义全局生效的中间件const ex.

原创 正则表达式

1.什么是正则表达式 正则表达式是用于匹配字符中字符组合的模式,在JS当中,正则表达式也是对象.2.正则表达式的创建 在 JavaScript 中，可以通过两种方式创建一个正则表达式。(1) 通过调用RegExp对象的构造函数创建var regexp=new RegExp(/123/)console.log(regexp);(2) 利用字面量创建var rg= /123/3.测试正则表达式 test()正则对象方法,用于检测字符串是否符合该规则,该对象会返...

原创 Javascript 递归

1.什么是递归 如果一个函数爱内部可以调用其本身,那么这个函数就是递归函数. (函数内部自己调用 自己)注: 递归函数的作用和循环效果一样,由于递归很容易发生'栈溢出' 错误(stark overflow) ,所以必须要加退出条件.2.利用递归求1~n的阶乘//利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..nfunction fn(n){if(n===1){return 1;}return n*fn(n-1)}console.log(fn(3)) //6

原创 Javascript 闭包

1.什么是闭包?闭包（closure）是指有权访问另一个函数作用域中的变量.简单理解: 一个作用域可以访问另一个函数内部的局部变量.function fn1(){ //fn1就是闭包函数var num=10;function fn2(){console.log(num); //10}fn2();}fn1()2.闭包的作用作用: 延伸变量的作用范围.function fn() { var num = 10; function fun() { consol.

原创 express的基本使用

1.什么是 express官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架 通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的 Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法对于前端程序员来说，最常见的两种服务器:web网站服务器:专门对外提供web网页资源的服务器API接口服务器:专门对外提供API接口的服务器2.Exp.

原创 token验证机制

1.什么是tokenToken是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。使用Token的目的：减少频繁的查询数据库，减轻服务器的压力。2.使用基于 Token 的身份验证方法流程客户端使用用户名跟密码请求登录 服务端收到请求，去验证用户名与密码 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端 客户端收.