卡门726-CSDN博客

原创 Vue Router简单理解

Vue Router简单理解Vue Router是Vue.js 官方的路由管理器，它和Vue.js的核心深度集成，让构建单页面变得更加的简单主要有三个模块<router-link><router-view><router-alive>导航守卫导航守卫主要是通过跳转或取消的方式守卫导航简单点说。导航守卫就是路由跳转过程中的一些钩子函数，路由跳转分为很多小的过程，每一个过程中都有一个函数，这些函数能够让你在某个过程操作一些其他的事情，这就是导航守卫。路由导航

2022-03-26 21:14:26 1415

原创 Vuex简单理解

Vuex简单理解Vuex是什么Vuex是专门为Vue.js应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化Vuex会将全局组件的共享状态抽取出来为一个store，以一个单例模式存在，应用中的任何一个组件都可以使用，Vuex更改的唯一途径就是mutation,mutation需要commit来触发，action实际触发是mutation,其中，mutation处理的是同步任务，action处理的是异步任务。Vuex的属性是干嘛的Vu

2022-03-26 21:13:48 1291

原创 Vuex简单理解

Vuex简单理解Vuex是一个专门为应用程序开发的状态管理模式+库Vuex里面有几个核心概念store是一个大容器，包含以下所有内容State用来读取状态，带有一个mapState函数Getter用来读取派生状态，带有一个mapGetter函数Mutation用来同步提交状态变更，附有一个maoMutations函数Action用来异步变更状态，但是它提交的是mutation，而不是直接变更状态Module用来给Store划分模块，方便维护代码。...

2022-03-12 15:07:52 174

原创 vue2组件间的通信方式

vue2组件间的通信方式父子组件：使用[props和事件]进行通信爷孙组件：a. 使用两次父子间通信来事件b.使用 [ provide + inject] 来通信任意组件：使用eventBus = new Vue()来通信a. 主要API是eventBus.&on和 eventBus.&emitb. 这个方法当事件多了就会比较乱，不利于维护任意组件：使用Vuex通信（vue3 可用Pinia代替Vuex）...

2022-03-10 13:44:12 1117

原创 Vue2生命周期钩子有哪些，数据请求放在哪个钩子

Vue2生命周期钩子有哪些，数据请求放在哪个钩子初始化阶段beforeCreate()created()beforeMount()Mounted()更新阶段bebforeUpdate()updated()销毁阶段beforeDestroy()destoryed()不常用的的activated()deactivated()errorCaptured数据请求一般来说我们会将数据请求放在mount阶段，如果放在created阶段那么SSR（Server-side

2022-03-10 13:32:23 1592 1

原创 TS中type和interface的区别

TS中type和interface的区别看看官方的说明组合方式：interface使用extends来实现继承，type使用&来实现联合类型typy A = { a:string}type B = { b:string }&Aconst a: B = { a:'hi' b:'hi'}interface A = { aa:string}interface B extends A = { bb:string}const

2022-03-07 22:04:40 640

原创 ts中any 、unKnown的区别

ts中any 、unKnown的区别any和unknown两者都是顶级类型（top type)，任何类型的值都可以赋值给顶级类型变量const a:any = '字符串'//不报错const b:unknown = '字符串'//不报错但是unknown比any的检查更加严格，any什么检查都不做，unknown要求先收窄类型const a: unknown = '字符串'const b: string = a //这里会报错const a: unknown = '字符串'const

2022-03-07 21:38:54 1456

原创 Session、Cookie、LocalStorage、SessionStorage的区别

Session、Cookie、LocalStorage、SessionStorage的区别Cookie和Local Storage主要区别是Cookie会被发送到服务器，而LocalStorage不会Cookie一般最大4K，local Storage可以用5MB到10MB（各浏览器不同）LocalStorage和 SessionStorageLocalStorage一般不会自动过期SessionStorage在会话结束时过期Cookie和SessionCookie存在浏览器

2022-03-07 19:19:10 173

原创同源和跨域

同源和跨域什么是同源当两个url的协议，域名，端口完全一致是，那么这两个url就是同源的，其中任何一个不一致都是不同源的同源策略如果js运行在源A里面，那么它就只能获取源A的数据，不能获取其他源的数据，这是浏览器为了保护用户隐私故意这样设计的。怎么跨域使用CORS对于简单请求我们只需要在后端设置一个响应头：Access -Control-Allow-Origin:xxx.com(允许的网站)对于复杂请求如PATCH我们需要在在响应中添加如下的响应头Access-Control-Or

2022-03-07 00:37:58 328

原创三次握手与四次挥手

三次握手与四次挥手建立TCP连接时，会经历三次握手浏览器向服务器发送TCP数据：SYN(seg = x)服务器向浏览器发送TCP数据：ACK(seg = x+1)SYN(y)浏览器向服务器发送TCP数据：ACK(seg = y+1)关闭TCP连接时，会经历四次挥手浏览器向服务器发送TCP数据：FIN(seg = x)服务器向浏览器发送TCP数据：ACK(seg = x+1)服务器向浏览器发送TCP数据：FIN(seg = y)浏览器向服务器发送TCP数据：ACK(seg = y+1)

2022-03-06 14:06:01 989

原创 HTTP和HTTPS的区别

HTTP和HTTPS的区别http是明文传输的，不安全，https是加密传输的，是安全的（http传输数据到时是裸奔的）http使用的是80端口，https使用的是443端口（一个端口只能使用一个协议）http要比https快（少了一个加密的过程）https的证书需要购买，http不用证书...

2022-03-06 00:07:45 124

原创 HTTP缓存方案

HTTP缓存方案强缓存在 HTTP 1.1 中，当我们发起GET请求的时候，我们的响应头里面会有两个东西，Cache-Control:max-age = 3600 (这里是一个时间) 意思是表示我们的缓存保留3600时间，如果缓存的的时间没有达到3600秒，当我们再次浏览这个网站是我们不会再发起GET请求。同时还会发给我们Etag：ABC，这个ABC是我们请求到的这个文件的标识。这就是强缓存，时间不到我们就不会发起GET请求，这就是强缓存；HTTP1.0使用的是Expires，设置一个过期时间，超过这

2022-03-05 23:53:29 149

原创 GET和POST的区别

GET和POST的区别区别一：幂等性由于GET是读，POST是写，所以前者是幂等的，后者是不幂等的浏览器打开网页会发送GET请求，想要用POST打开网页需要用form标签GET打开的页面刷新是无害的，POST打开的页面刷刷新需要确认GET的结果会被缓存，POST的结果不会被缓存GET打开的页面可以被书签收藏，POST打开的不行区别二：请求参数通常，GET请求的参数在url中，POST请求数据放在 body （消息体）中GET比POST更不安全，因为GET的参数直接暴露在url上，所以

2022-03-05 22:51:23 320

原创手写可拖曳的DIV

手写可拖曳的DIVconst dragging = falseconst position = nullxxx.addEventListener('mousedown',function(e){ draging = true//正在移动 position = [e.clientX,e.clientY] })document.addEventListener('mousemove',function(e){ if(!dragging){return}//没有移动 co

2022-03-05 17:01:01 89

原创手写可拖曳的DIV

手写可拖曳的DIVconst dragging = falseconst position = nullxxx.addEventListener('mousedown',function(e){ draging = true//正在移动 position = [e.clientX,e.clientY] })document.addEventListener('mousemove',function(e){ if(!dragging){return}//没有移动 co

2022-03-05 16:56:20 67

原创手写事件委托

手写事件委托ul.addEventListener('click',function(e){ if(e.target.tagName.toLowerCase() === 'li') { fn() }})事件委托的好处1.节省监听器，当我们要同时监听一个父元素里面的多个子元素时，只需要监听这个父元素就可以2.实现动态监听，js中是不能给新添加的元素添加监听器，所以我们只需要监听它的父元素就可以触发事件...

2022-03-05 16:39:32 160

原创手写深拷贝

手写深拷贝方法一：用JSON：const b = JSON.parse(JSON.stringfy(a))值得注意的是这种方法不支持Date,正则，函数等数据，同时也不支持引用方法二：递归const deepClone = function (a,cache){ if(!cache){ cache = new Map() } if(a instanceof Object){ if(cache.get(a)){return cache.ge

2022-03-05 13:11:52 703

原创手写AJAX

手写AJAXconst ajax = (method,url,data,success,fail) = >{ var request = new XMLHttpRequest() request.open(method,url) request.onreadystatechange = function ()=>{ if(request.readyState === 4){ if(request.status >= 200 &am

2022-03-04 23:44:28 53

原创手写发布订阅

手写发布订阅const eventHub = { map:{}, on:(name,fn)=>{ eventHub.map[name] =eventHub.map[name]||[] eventHub.map[name].push(fn) }, emit:(name,data)=>{ const q = eventHub.map[name] if(!q)return q.map(f

2022-03-04 20:05:59 47

原创手写节流和防抖

手写节流和防抖节流const throttle = (f,time)=>{ let timer = null//计时器 return (...args)=>{ if(timer){return}//如果正在计时，则不能执行 f.call(undefined,...args) timer = setTimeout(()=>{ timer = null },time) }}

2022-03-04 17:17:35 40

原创 js如何实现继承

js如何实现继承方法一：使用原型function Animal(legsNumber){ this.legsNumber = legsNumber}Animal.prototype.kind = "动物"function Dog(name){ this.name = name Animal.call(this,4)}Dog.prototype.__proto__ = Animal.prototype//被ban了Dog.prototype.kind = "狗"Dog

2022-03-03 22:44:31 32

原创 js如何实现类

js如何实现类方法一：使用原型const Car = function (name,length){ this.name = name this.length = length}Car.prototype.run = function(){ console.log(`我是${this.name},我能跑${this.length}公里`)}car1 = new Car("奔驰","1000")car1.run()方法二：用classclass Car{ c

2022-03-03 22:11:33 581

原创什么是js的闭包

什么是js的闭包闭包是js的一种语法特性，注意它不是函数或者对象！！！简单的来说，当一个函数调用了函数外面的自由变量时，这里就形成了闭包也就是说闭包 = 函数+自由变量这里我们简单的说一下什么是自由变量对于一个函数来说，变量分为了全局变量、本地变量（局部变量）、自由变量。也就是说一个变量前两者，那它就是自由变量。好了，我们接着讲闭包如何实现一个闭包呢，举个例子const fn = function { let num const add = ()=>{ n

2022-03-03 21:30:53 61

原创什么是立即执行函数

什么是立即执行函数在ES6出来之前，js 是无法创建局部变量的，为了解决这个问题，就有了立即执行函数的诞生那么什么是立即执行函数呢，顾名思义立即执行函数就是我们声明一个匿名函数，然后立即执行它，这个过程就是立即执行函数。举个例子(function (){ console.log("我是立即执行函数")}())(function (){ console.log("我是立即执行函数")})()+function (){ console.log("我是立即执行函数")}(

2022-03-03 17:08:09 289

原创 javascript中的new做了什么

javascript中的new做了什么在这里简单的说一下当我们使用 new 时js都做了什么创建一个临时对象指定 this = 临时对象绑定对象的原型（也就是创建对象的共有属性）执行构造函数（创建对象的私有属性）返回临时对象。...

2022-03-02 23:12:00 300

原创浅谈对javascript中this的理解

浅谈对javascript中this的理解在JS中，函数调用有三种方式分别是fun(p1,p2)obj.method(p1,p1)fun.call(content,p1,p2)一般情况下我们都是使用前两种方式来调用函数，但其实第三种方式才是正常的调用方式，前两种是语法塘，都可以转化为第三种方式转化方式如下fun(p1,p2)//转化为fun.call(undefined,p1,p2)obj.child.method(p1,p2)//转化为obj.child.method.call(

2022-03-02 22:11:40 320

原创 js的原型链简单理解

js的原型链首先，在将js的原型链之前我们先来说一下什么是原型，当我们生成一个普通对象x的时候，这个x会有一个隐藏属性x._proto_，这个属性会指向Object.prototype也就是x.__proto__ === Object.prototype这个时候我们就说x的原型是Object.prototype，这个x.__proto__唯一的作用就是用来指向它的原型。那么什么是原型链呢，举个例子，当我们有一个数组对象a=[]时，这个时候a.__proto__就指向了Array.prototype

2022-02-25 23:29:57 957

空空如也

空空如也