- 博客(40)
- 收藏
- 关注
RSS订阅原创 watch监听组件中的任何东西
watch监听监听计算属性监听props传入的值监听对象属性 深度监听监听路由参数的变化vue-router导航切换时,如果两个路由渲染同一个组件,组件会重用,组件的生命周期钩子(created)不会在被调用,使组件的部分数据无法根据path的改变而更新因此我们可以在watch中监听路由的变化,当路由改变时,重新调用created中的内容...
2022-06-16 21:26:12
256
2
原创 同步和异步
同步即sync，形象的说就是代码一行行执行，前面代码和请求没有执行完，后面的代码和请求就不会被执行，缺点：容易导致代码阻塞优点：容易理解（因为代码从上往下一行行执行，强调顺序）异步：即async,形象的说就是代码可以在当前程序没有执行完，也可以执行后面的代码缺点：不易理解（因为不是按顺序执行的）优点：可以解决代码阻塞问题，提升代码执行效率和性能异步解决方案主要有三个：1.promise2.generator3.async和await...
2022-06-16 00:24:06
228
2
原创 如何解决跨域问题
跨域是什么跨域的本质是浏览器基于同源策略的一种安全手段同源策略: 是一种约定,它是浏览器的核心也是最基本的安全功能同源:协议相同,域名相同,端口相同跨域错误:不同源的ajax请求注意:错误是发生在浏览器端的。请求是可以正常从浏览器发到服务器端，服务器也可以处理请求，只是返回到浏览器端时出错了如何解决跨域错误JSONP CORS ProxyJSONP是借助于script标签发送跨域请求的技巧.本质不是ajax请求,所以没有跨域问题原理:script的src属性可以
2022-05-27 23:25:47
233
原创 URL 的各个部分，分别是什么意思
例如：scheme://host:port/path?query#fragment.scheme:通信协议，常用的 HTTP,ftp,maito 等 .host:主机，服务器(计算机)域名系统 (DNS) 主机名或 IP 地址 .port:端口号，整数，可选，省略时使用方案的默认端口，如 HTTP 的默认端口为 80 .path:路径，由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录 或文件地址 .query:查询，可选，用于给动态网页传递参数，可有多个参数，用"&"符号隔
2022-05-25 21:35:36
740
原创 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么
1、浏览器查找域名对应的 IP 地址(DNS 查询：浏览器缓存->系统缓存->路由器缓存->ISP DNS 缓存->根域名服务器)2、浏览器向 Web 服务器发送一个 HTTP 请求（TCP 三次握手）3、服务器 301 重定向（从 HTTP://example.com 重定向到 HTTP://www.example.com）4、浏览器跟踪重定向地址，请求另一个带 www 的网址5、服务器处理请求（通过路由读取资源）6、服务器返回一个 HTTP 响应（报头中把 C
2022-05-24 22:04:29
211
原创 基于 FileReader 把文件读取为 base64 的字符串
请求体 必选 类型 说明 格式 avatar 是 string 新头像 base64格式的字符串 onChangeImg (e) { // 判断文件上传的长度,为0则没有选择图片 if (e.target.files.length === 0) { // 没有选择图片 } else { // 创建FileReader对象 const reader = new FileRe
2022-05-22 21:44:37
723
原创 call 和 apply bind 的区别
相同点：1、都是用来改变函数的 this 对象的指向的2、第一个参数都是 this 要指向的对象3、都可以利用后续参数传参不同点:
2022-05-18 23:07:34
87
原创 浏览器的渲染过程，DOM 树和渲染树的区别
1、浏览器的渲染过程：解析 HTML 构建 DOM(DOM 树),并行请求 css/image/jsCSS 文件下载完成,开始构建CSSOM(CSS 树)CSSOM 构建结束后,和 DOM 一起生成 Render Tree(渲染树)布局(Layout)：计算出每个节点在屏幕中的位置 显示(Painting)：通过显卡把页面画到屏幕上2、DOM 树和渲染树的区别DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素渲染树不包括 head 和隐藏元素,大段文本的每一个行都是
2022-05-17 22:01:05
520
原创 Vue 组件 data 为什么必须是函数
1.每个组件都是 Vue 的实例2、组件共享data属性,当data的值是同一个引用类型的值时,改变 其中一个会影响其他3、组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据.而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果...
2022-05-16 15:15:21
1108
原创 vue2响应式缺陷
响应式 : 数据改变 ==> 视图跟着改变vue2响应式缺陷1.对象新增的属性没有响应式对象,新增属性b,修改b的值,值改变但视图并未更新解决方案 : 使用vue提供的 api $set(对象,属性名,值) 效果如属性c2.数组的部分操作没有响应式数组中有7种操作有响应式array.pop() array.push() array.shift() array.unshift() array.sort() arry.reverse() array.spl.
2022-05-15 22:22:57
4118
2
原创 如何最小化重绘(repaint)和回流(reflow)
什么是重绘 Repaint 和重排 （回流 reflow）重绘 : 当元素的一部分属性发生改变,如外观,背景,颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制,是元素呈现心得外观叫做重绘回流 : 当 render 树中得一部分或者全部因为大小边距等问题发生该案而需要DOM树重新计算得过程具体浏览器解析渲染机制如下所示 :解析HTML,生成DOM树,解析CSS,生成CSSOM树 将DOM树和CSSOM树结合,生成渲染(Render Tree) Layout(回流) : 根.
2022-05-14 21:20:36
409
原创 什么是事件冒泡
事件冒泡:在一个元素上触发事件的时候,这个事件会从里到外向传播,这个元素的所有父级元素的"同名事件"会被依次触发,直到它背处理,或者它达到了对象层次的最顶层,即document(有些浏览器时window)阻止事件...
2022-05-13 23:54:29
509
原创 hash路由和history路由的区别
vue-router（前端路由）有两种模式，hash模式和history模式history和hash模式对比相同点:都能实现页面的跳转功能不同点:(1)路径格式 : history模式的path路径不带#号,hash模式的path带#号(2)实现原理 : history模式使用pushState. hash模式使用onhashchange hash模式兼容性好,history的兼容性比hash模式差一点(底层使用的API是HTML5的API,对浏览器有一定的要求)(3)项目上线之后由
2022-05-12 22:31:03
307
原创 Date 对象获取时间
创建 Date 对象的方法const d = new Date()console.log(d)//Wed May 11 2022 21:52:10 GMT+0800 (中国标准时间)1.转换日期格式console.log(d.toLocaleString())//2022/5/11 21:53:30console.log(d.toLocaleDateString())//2022/5/11console.log(d.toLocaleTimeString())//21:55:572.
2022-05-11 22:05:30
2783
原创 浅拷贝与深拷贝 如何实现一个深拷贝?
1.数据类型存储基本数据类型保存在栈内存中引用数据类型保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中2.浅拷贝浅拷贝,指的是创建新的数据,这个数据有着原始数据属性值的一份精确拷贝如果属性是基本数据类型,拷贝的就说基本类型的值,如果属性是引用类型,拷贝的就是内存地址//封装一个函数进行浅拷贝function shallowClone(obj) { //声明一个新的空对象存储拷贝后的数据 const newObj = {} //遍
2022-05-10 20:10:58
1070
原创 == 和 === 的区别
等值操作符 ==当等号两边的值为相同类型时比较值是否相同,如果操作相等,则会返回true当等好两边的类型不同时,会先进行类型转换后再作比较遵循以下规则:如果任一操作数是布尔值,则将其转换为数值再比较是否相等const res = (true == 1) // true如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否相等const res = ('30' == 30)//true如果一个操作数是对象,另一个操作数不是,则调用valueOf()
2022-05-09 23:14:45
210
原创 VUE生命周期
一个组件从 创建 到 销毁 的整个过程就是生命周期生命周期函数(钩子函数)vue 框架内置函数，随着组件的生命周期，自动 按次序 执行作用:特定的时间点,执行某些特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据四个阶段:初始化 => 创建组件 => beforeCreate created 挂载 => 渲染显示组件 => beforeMount mouted 更新 => 修改了..
2022-05-08 22:45:52
203
原创 H5 input元素 type 常见属性值
值 描述 button 定义可以点击的按钮(大多与JavaScript使用) checkbox 定义复选框 cloor 定义拾色器 date 定义日期字段(带有 calendar 控件) month 定义日期字段的月(带有 calendar 控件) time 定义日期字段的时、分、秒(带有 time 控件) email 定义用于e-mail 地址的文本字段 file 定义输入字段和"浏览..."按钮,供文件上传 hid
2022-05-08 20:40:55
1532
原创 常见的HTTP状态码以及代表的意义
5种常见的HTTP状态码以及代表的意义200（ OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回400（ Bad Request）：请求格式错误1) 语义有误，当前请求无法被服务器理解。除非进行 修改，否则客户端不应该重 复提交这个请求2) 请求参数有误404（ Not Found）：请求失败，请求所希望得到的资源未被在服务器上发现500（ Internal Server Error）：服务器遇到了一个未曾预料的状况，导致了它无法完成对 请...
2022-05-07 21:32:29
1614
原创 Vue常用的指令都有哪些?
1. v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)<标签 v-model.修饰符="vue数据变量"> </标签>2.v-for 格式 : 循环数组<标签 v-for"(值, 索引或者属性名) in (目标结构)" :key="唯一值"> </标签>3.v-show 显示内容(同angular中的ng-show 如果vue变量的值为true，就可见，否则就不可见) <标签 v-sho
2022-05-06 21:07:47
1167
原创 JavaScript数组reduce方法
1.reduce数组方法的作用为每一个元素执行一次回调,并最终返回最后一次结果2.语法:array.reduce( function ( total,item, index,arr) {} ,initialValue)function : 必须,数组中的每个元素都会执行这个函数第一个参数:total,必须,初始值,或计算结束后的返回值第二个参数: item,必须,当前元素的值第三个参数 : index,可选,当前元素在数组中的索引值...
2022-05-05 19:53:03
667
原创 var let 和 const命令
es5声明变量关键字 varvar 基本用法//声明一个变量,变量名为 var a//如果变量声明未指定值，其默认值为 undefineda = 1 //赋值//也可以在声明变量时直接赋值var b = 10es6声明变量 let constlet 基本用法与var类似,但是所声明的变量只在let所在的代码块有效{ let a = 1 var b = 2}a//这里不能使用b//这里可以使用const 基本用法声明一个只读的常量,一旦声..
2022-05-04 15:50:59
316
原创 常见JavaScript String 对象
String 对象用于处理文本（字符串）String 对象创建方法： new String()const str = new String('string')//或者更简单方式：const str = 'string'str.length : 长度(包含标点符号)const str = '一二三四五,上山打老虎'conso.log(str.length)//11str[index] : 获取某个字符const str = '一二三四五,上山打老虎'console.log
2022-05-03 21:47:32
505
原创 git 工作流程
git的作用(1)在工作目录中需改某些文件(2)对修改后的文件进行快照,然后保存到暂存区域(3)提交更新,将保存内在暂存区域的文件快照永久转储到git目录中git的工作中使用场景两个分支master和dev项目开始执行流程git branch -a (查看所有分支)0.克隆代码 git clone 地址1.拉取线上 master 最新代码 : git pull origin master2.切换到开发分支 git checkout dev3.合并 master 本
2022-05-02 20:20:55
306
1
原创 JavaScript数组forEach方法
1.forEach数组方法的作用遍历数组2.语法:array.forEach( function ( item, index,arr) {} )第一个参数: item,必须,当前元素的值第二个参数 : index,可选,当前元素在数组中的索引值第三个参数 : arr,当前元素所处的数组对象3.forEach方法特点(1)循环次数 === 数组长度(2)函数内部的return没有返回值(3)forEach方法的返回值没有返回值4.注意点:(1)forEach
2022-05-01 22:00:17
12640
1
原创 JavaScript数组every方法
1.every数组方法的作用判断数组中是否所有元素都满足条件2.语法:array.every( function ( item, index,arr) {} )第一个参数: item,必须,当前元素的值第二个参数 : index,可选,当前元素在数组中的索引值第三个参数 : arr,当前元素所处的数组对象3.every方法特点(1)循环次数 !== 数组长度(2)函数内部的returnreturn true : 循环继续 当前元素满足条件,继续判断,如果循环执行完毕还是t
2022-04-30 21:56:06
19906
1
原创 如何用express写接口
什么是experss ?express是一个基于node.js平台,极简高效开发的web开发框架对于nodejs来说,express是一个第三方模块,支持丰富的api,强大而灵活的中间件特性第一步 创建项目并初始化创建一个新文件夹,在此目录下运行 npm init --yes命令来生成package.json文件第二步 下载express包本地安装 运行 npm i express第三步 快速创建web服务器//导入expressconst express = requi
2022-04-29 22:08:57
3447
原创 JavaScript数组filter方法
1.数组filter方法作用筛选数组,将满足条件的元素放入新数组中2.语法 : array.filter( function ( item, index,arr) {} )第一个参数: item,必须,当前元素的值第二个参数 : index,可选,当前元素在数组中的索引值第三个参数 : arr,当前元素所处的数组对象3.filter方法特点(1)函数执行次数 === 数组长度(2)函数内部的returnreturn true : 满足筛选条件,放入新数组中return
2022-04-28 20:32:18
15199
4
原创 JavaScript数组some方法
1.数组some方法作用判断数组中是否有满足条件的元素2.语法:array.some( function ( item, index, arr) {} ,thisValue)function : 必须,数组中的每个元素都会执行这个函数第一个参数:item,必须,当前元素的值第二个参数:index,可选,当前元素在数组中的索引值第三个参数:arr,当前元素属于的数组对象thisValue : 可选,对象作为该执行回调时使用，传递给函数...
2022-04-27 12:00:08
45968
原创 JavaScript数组map方法
1.数组map方法的作用 : 映射数组按照某种映射关系,把数组的每一个元素给修改了2.语法: array.map( function ( item, index, arr) {} )第一个参数:item,必须,当前元素的值第二个参数:index,可选,当前元素在数组中的索引值第三个参数:arr,当前元素属于的数组对象3.map方法特点(1)函数执行次数 == 数组长度(2)函数内部的returnreturn 新的元素如果没有return...
2022-04-26 20:26:27
27361
原创 核心模块fs模块的文件 存入与读取
理解核心模块核心模块是Node内置的模块,需要通过唯一的标识名来进行获取每一个核心模块基本上都是暴露了一个对象,里面包含一些方法供我们使用一般在加载核心模块的时候,变量(或常量名)的起名最好和核心模块的标识名同名例如:const fs = require('fs')console.log(fs)const path = require('path')console.log(path)fs模块(fs是FileSystem文件系统的简写)是Node.js核心模块中用来进行文件操作
2022-04-25 20:23:16
1138
1
原创 如何检测数据类型
JavaScript中的数据类型分为两类基本数据类型 : String Number Boolean Undefined Null引用数据类型 : Array Function Object如何判断1.typeof 运算符const str = 'abc'const num = 123const bol = trueconst und = undefinedconst nul = nullconst arr = [10,20,30]const fn = function (
2022-04-24 11:21:36
310
1
原创 JavaScript函数开关思想
应用场景:可以用来判断数组中是否左右元素满足条件主要分为三个流程:1.声明一个变量开关(一般默认值为true)2.遍历数组,判断数组中的每一个元素是否满足条件,如果条件不满足,则修改属性值为false;如果条件满足,则无需修改属性值.因为默认值就是true3.返回开关变量值案例一:需求:判断数组是不是所有元素都是正数， 是则返回true 否则返回false案例二:需求:找出数组中 元素为10的下标，有则返回该下标，没有则返回-1案例..
2022-03-26 15:48:21
2038
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人