前端基础知识_vue3-cookies 有效期限-CSDN博客

本文链接：https://blog.csdn.net/m0_61604012/article/details/129117983

vue双向数据绑定如何实现？vue2和vue3实现区别？

vue.js是才用数据劫持介个发布-订阅者模式的方法，通过object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

请描述一下cookies，sessionStorage和localStorage的区别？

一、存储的时间有效期不同

1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效

2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效

3、localStorage的有效期是在不进行手动删除的情况下是一直有效的

二、存储的大小不同

1、cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息

2、localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)

三、与服务端的通信

1、cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。

2、localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

四、读写操作的便捷程度

1、cookie的相关操作，cookie操作起来较为繁琐，并且部分数据不可以读取操作

闭包是什么，它有什么特点？

在js中，变量到的作用域属于函数作用域，在函数执行后作用域会被清除、内存也会随之被回收，但是由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数---也就是闭包，也就形成了闭包，便拥有了访问上级作用域中的变量权限，即使上级函数执行完后，作用域内的值也不会被销毁。

闭包的作用：

1.形成不被销毁的执行空间，延长变量声明周期，容易引起内存泄露

2.外部可以访问内部函数的变量，变量作用域扩展，内部函数访问外部函数

3.形成块作用域定义私有变量

数组和对象有哪些原生的方法？

数组：map，push，pop，splice，slice，

route和router的区别？

$route 是“路由信息对象”，而$router 是“路由实例”对象

模块化开发的优点？

解决⽂件之间的依赖关系

避免命名冲突、解决全局变量级全局函数泛⽤的现象

解决代码的复杂性

按需加载

(1)开发效率高：方便代码重用，对于别人开发好的模块功能可以直接拿过来使用，不需要重复开发类似的功能。

(2)维护成本低：软件开发周期中，由于需求经常发生变化，最长的阶段并不是开发阶段，而是维护阶段，使用模块化开发的方式更容易维护。

浏览器的内核有哪些？举例说明哪种浏览器在用哪种内核。

trident ie

gecko 火狐

webkit 谷歌

怎么理解事件循环（事件轮询）？

什么是单页应用（SPA）？

描述一下this指向

请描述CSS里面display：none与visibility：hidden的区别是什么？

http协议是什么？它为什么叫超文本传输协议？它的特点是什么？

get和post的区别？

怎么理解vue单向数据流？

vue组件之间传值，组件通信的方式有哪些？

v-if和v-for的优先级

在vue2中,v-for的优先级高于v-if;在vue3中,v-if的优先级高于v-for。在vue中,永远不要把v-if和v-for同时用在同一个元素上,会带来性能方面的浪费(每次渲染都会先循环再进行条件判断);

什么是虚拟dom

虚拟DOM(Virtua1DOM)本质上是JS和DOM之间的一个映射缓存，它在形

态上表现为一个能够描述D0M结构及其属性信息的JS对象。它主要存储在内存

中。主要来说：虚拟dom是一个s对象，存储在内存之中。虚拟dom能够描述真

实dom(存在一个对应关系)当数据变化的时候，生成新的DOM,对比新旧虚拟DOM

的差异，将差异更新到真实DOM上。

React受控组件和非受控组件

组件操作的时候，组件有一些内部数据，操作内部状态state的就是受控组件，非受控数据是获取dom节点改变控制的

useEffect和useLayoutEffect有什么区别

相同点：

处理副作用：函数组件内不允许操作副作用。比如：改变D0M、设置订阅、操

作定时器等。底层都是调用ountEffect1mpl方法，基本上可以替换使用

不同点：

useEffect在像素变化之后异步调用，改变屏幕内容可能会造成页面的闪烁

useLayoutEffect在像素变化之前同步调用，可能会造成页面延迟显示，但

是不会闪烁：主要用于处理D0M操作、调整样式、避免页面闪烁等。因为是同步

执行，所以要避免做大量计算，从而避免造成阻塞。

useLayoutEffect先于useEffect执行

什么是事件流？什么是事件冒泡？什么是事件捕获？

当⼀个HTML元素产⽣⼀个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫做DOM事件流

元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种

冒泡事件：微软提出的事件由⼦元素传递到⽗元素的过程，叫做冒泡

捕获事件：⽹景提出的事件由⽗元素到⼦元素传递的过程，叫做事件捕获

谈谈你对事件监听的理解

事件分为DOM 0级事件和Dom 2级事件，DOM2级事件也叫做事件监听。DOM 0级事件的缺点是如果事件相同后者的事件会覆盖前者的事件，DOM2级事件可以解决这个问题

2、DOM2级事件的⽅法是

addEventListener()

参数1：事件类型不需要加on

参数2：回调函数

参数3：布尔值 true代表捕获 false代表冒泡

解绑事件⽅法：removeEventListener()

IE浏览器下⽤：attachEvent()

参数1：事件类型需要加on

参数2：回调函数

解绑事件⽅法：detachEvent()

请说出call、apply、bind的区别

bind:bind绑定完this的指向后会返回⼀个新的函数体，不会被⽴即调⽤

call&apply:绑定完this的指向后会⽴即调⽤

call与apply的区别：

call:第⼀个参数是this的指向，第⼆个以及后⾯的所有参数需要⼀个个进⾏传递

apply:第⼀个参数是this的指向，第⼆个参数是⼀个数组

js里面的垃圾回收机制

什么是重绘和回流

1.重绘

简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。

2.回流

当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。

总结

重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流。

回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘。

不管怎么说都是会影响性能。

怎么进行优化或减少？

1.多个属性尽量使用简写，例如：boder可以代替boder-width、boder-color、boder-style

2.创建多个dom节点时，使用documentfragment创建

3.避免使用table布局

4.避免设置多层内联样式，避免节点层级过多

5.避免使用css表达式

6.将频繁重绘或回流的节点设置为图层，图层能够阻止该节点的渲染行为影响到别的节点（例：will-change\video\iframe等标签），浏览器会自动将该节点变为图层

浏览器渲染页面的主要步骤

浏览器渲染页面主要是以下几个步骤：

1. 解析html代码，生成DOM tree

2. 解析css代码，生成CSSOM tree

3. 通过DOM tree 和 CSSOM tree 生成 Render tree

4. Layout（布局），计算Render tree中各个节点的位置及精确大小

5. Painting（绘制），将render tree渲染到页面上

https是如何加密的

https 的加密手段是以安全为目标的 http 通道，简单讲是 http 的安全版，即 http 下加入 SSL 层，https 的安全基础是 SSL，因此加密的详细内容就需要 SSL。https 协议的主要作用可以分为两种：一种是简历一个信息安全通道，来保证数据传输的安全；另一种是确认网站的真实性。

加密方式

对称加密：

对称密钥加密，又称为对称加密、私钥加密、共享秘钥加密，是密码学中的一类加密算法。这类算法在加密和解密时使用相同的密钥，或是使用两个可以简单地相互推算的密钥。

非对称加密：

公开秘钥加密，也称为非对称加密，一种密码学算法类型，在这种密码学方法中，需要一对密钥，一个是私人密钥，另一个则是公开密钥。这两个密钥是数学相关，是某用户密钥加密后所得的信息，只能用该用户的解密密钥才能解密。如果知道了其中一个，并不能计算出另外一个。因此如果公开了一对密钥中的一个，并不会危害到另外一个的秘密性质。称公开的密钥为公钥，不公开的密钥为私钥。

1. href

href：是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

2. src

src：是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

3. src和href的区别：

1. 当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)

2. 当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)