学习

Vue3系统学习

# 清除浮动 盒子塌陷

  • 父元素没有设置高度时候, 内容是由子元素撑开的 , 如果子元素此时设置float , 则父元素高度为0了

  • 使用:after伪元素来清除浮动

    .parent:after {
  content: "";
  display: block;
  clear: both;
}

  • overflow :hidden , 或者auto

  • 使用flex布局处理浮动

  • 设置父元素高度

# TCP三次握手

# 第一次握手（SYN）：

  • 客户端发送一个SYN（同步序列编号）报文到服务器，并进入SYN_SENT状态，开始一个TCP连接。
  • 在这个SYN报文中，客户端将指定自己的初始序列号（ISN），这是后续传送数据时的参考点。

# 第二次握手（SYN-ACK）：

  • 服务器收到客户端的SYN报文后，会发送一个SYN-ACK（同步确认应答）报文作为应答。
  • 服务器同样在应答中包含自己的初始序列号。
  • 同时，服务器将确认序号（ACK）设置为客户端的初始序列号加1，表示服务器已经收到了客户端的SYN。
  • 服务器此时进入SYN_RCVD状态。

# 第三次握手（ACK）：

  • 客户端收到服务器的SYN-ACK报文后，会向服务器发送一个ACK报文。
  • 客户端的确认序号设置为服务器的初始序列号加1。
  • 客户端发送完这个ACK报文后，进入ESTABLISHED状态，表示客户端到服务器的连接已经建立。
  • 服务器在收到这个ACK报文之后，也进入ESTABLISHED状态，表示服务器到客户端的连接也已经建立。

# flex布局

  • flex-direction: 定义了主轴的方向（row, row-reverse, column, column-reverse）。
  • flex-wrap: 定义了容器是单行还是多行，以及新行的方向（nowrap, wrap, wrap-reverse）。
  • justify-content: 定义了flex项在主轴上的对齐方式（flex-start, flex-end, center, space-between, space-around, space-evenly）。
  • align-items: 定义了flex项在交叉轴上如何对齐（stretch, flex-start, flex-end, center, baseline）。
  • align-content: 定义了多行flex容器在交叉轴上的对齐方式（与justify-content类似，但适用于多行）。
  • flex-grow: 定义了flex项的增长因子。
  • flex-shrink: 定义了flex项的收缩因子。
  • flex-basis: 定义了flex项在主轴上的初始大小

css权重

# 原型和原型链

  • 在JavaScript中，每当创建一个函数时，这个函数就会自动拥有一个特殊的属性叫做prototype，这是一个原型对象。原型对象包含所有实例共享的属性和方法
  • 原型链是JavaScript实现继承的一种机制。当访问一个对象的属性或方法时，如果这个对象本身没有这个属性或方法，解释器就会去该对象的原型对象中查找。如果原型对象中也没有，就会继续查找原型对象的原型，这样一直回溯到 object.prototype 。这就是所谓的“原型链”。

小程序生命周期 , uniapp生命周期

# new 干了什么

操作符用于创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型的新实例

  1. 创建一个全新的对象：new操作符首先会创建一个空的对象。
  2. 设置原型链：这个新对象的原型（__proto__属性）会被设置为构造函数的prototype属性。这样，新创建的对象就可以访问构造函数原型上的属性和方法。
  3. 绑定this：new操作符会绑定this到新创建的对象上。这意味着在构造函数内部，this指向的是新创建的对象。
  4. 执行构造函数：构造函数会以新创建的对象作为其上下文来执行。如果构造函数返回了一个对象，那么这个对象会被返回；如果没有返回对象，则返回新创建的对象

自定义hooks

# 设计模式

mvm mvvm

单例模式: 返回一个实力

工厂模式: 输入类型不同返回不同实例

装饰器: 不改变对象的基础上额外增加属性

观察者: 对象自己维护依赖 , 自动通知改变

代理:使用代理对象代替真实对象, 控制真实对象的访问

策略模式: 设计一些列算法 , 达到相互替换

# webpack和vite的差异

# 构建理念

  • Webpack：它是一个模块打包器，它将所有资源（如JavaScript、CSS、图片等）视为模块，并通过loader和plugin系统处理它们，最终打包成一个或多个bundle文件。

  • Vite：它是一个现代化的构建工具，旨在利用原生ES模块的优势，通过原生ESM提供快速的冷启动和热更新。Vite在开发模式下不需要打包，而是在构建生产版本时才进行模块打包。

  • # 配置

    • Webpack：Webpack的配置相对复杂，需要配置入口、出口、loader、plugin等。
    • Vite：Vite的配置更为简洁，许多情况下，它可以通过默认配置快速启动项目，而无需复杂的配置。

    # 热更新

    • Webpack：Webpack通过其插件系统提供热更新（HMR）功能，但这个过程可能相对较慢。
    • Vite：Vite利用原生ES模块的优势，提供了非常快速的热更新体验。

    # 社区和支持

    • Webpack：作为一个成熟且广泛使用的工具，Webpack有着庞大的社区和丰富的插件生态系统。
    • Vite：虽然Vite是一个相对较新的工具，但它的社区正在快速增长，并且已经有一系列插件和预设来支持各种用例。

# ts的好处

  • 编译时期检查, 减少bug
  • 团队协作 , 代码重构
  • 适合大型项目

# 请求拦截

  • 修改请求配置（如添加认证令牌、设置请求头等）
  • 检查请求参数是否符合要求
  • 根据请求的类型或内容决定是否继续发送请求或取消请求
  • 显示加载状态或动画

# 上传文件

  • formData对象
  • append file

responsetype

application/json

性能优化

# 无限滚动原理

  • 监听滚动事件 , 计算滚动位置到页面底部位置

# 路由hash和history区别 ,

  • vue2指定mode 为hash , vue3是creathashHistoyr

  • hash实现: #号后面的部分, 作为描点在页面进行导航, 改变hash部分不会引起刷新

    通过addEventListioner('hashChange')事件监听变化 , 改变url可以通过浏览器前进后退 2.a标签 3window.location改变

  • history: 对象提供了pushState和replaceState改变path部分不会引起刷新

    popState:通过addEventListioner('popState')事件监听变化 1浏览器前进后退会触发 2.a标签和pushState和replaceState不会触发

    3.js调用history的back go forward触发

}

路由导航守卫{

  • routerBeforeEach(to,from,next){

​ to: 去 from :当前 ,next('/') 跳转到一个不同的地址就,中断当前导航

​ }

  • routerAfterEach(to,from)

}

websocket相关

处理跨域: cors , 服务端配置access-controll-allow-origin 2 . 代理 3 修改本地hosts

# 常见的网络攻击和应对方式

  • xss(跨站脚本攻击)

    攻击者通过在网页中注入恶意脚本，当用户浏览该网页时，脚本在用户浏览器上执行，从而窃取用户信息或进行恶意操作

    使用HTTP响应头中的Content-Security-Policy（内容安全策略）来限制资源的加载和脚本的执行

  • csrf(跨站请求伪造)

    攻击者诱导用户在已登录的状态下访问一个带有恶意请求的网站，从而在用户不知情的情况下执行一些操作

    每次请求都验证token

    多次验证

  • sql注入

  • 点击劫持

    攻击者通过诱使用户点击隐藏的元素，从而在用户不知情的情况下执行某些操作

    使用X-Frame-Options响应头，限制页面在frame中的显示

  • 中间人攻击

    攻击者在用户与服务器之间拦截并篡改通信数据

    使用HTTPS来加密通信数据

  • ddos

    攻击者通过大量的请求占用目标服务器的资源，导致正常用户无法访问

    通过云服务提供商的DDoS保护服务

# react生命周期: 和组件式子变成

# 一些记录

  • vite: 入口文件index.html

  • webpack: js作为入口文件

  • vue3 组合api对treeshaking支持友好

  • npm run dev 执行过程是node_modules里面去找到bin文件里面有关于vite的启动软连接,连接到vite包bin的vite.js启动文件 ,

# 指令

v-text展示文字

v-html 可以展示标签 , 组件不支持

v-show 性能更高 ,v-if v-else

v-on v-for

v-once只会渲染一次 , v-memo接受数组配合v-for节省一小部分性能

  • 自定义指令 生命周期和vue2一样

    <div v-move.trim=='xxx'>
<script>
const vMove:directive = (el,binding)=>{
    
}

# 虚拟dom

  • 虚拟dom就是通过js生成一个ast节点树
  • 为什么操作虚拟dom: 因为dom的属性比较多, 通过js可以节省性能
  • dIff算法是分成有key和无key的,通过patch方法 , 无key的时候patch只有三个操作, 替换, 新增和删除, 有key的渲染分成五部, 会先通过isSameVNodeType判断dom的类型 , 先进行前序算法进行头头比较, 碰到不一样的就跳出然后进行尾序算法进行尾尾比较,判断新增还是删除,如果是乱序就进行最后进行一个最长递增子序列算法

# ref

  • shallowRef 浅层的 , 如果是给.value赋值是可以 , ref是深层 , 如果同时使用的话 , shallowRef会生效 , 因为ref底层会调用triggerRef , 进行强制更新
  • 源码: 首先会通过createRef(value, false) 第二个参数用来创建shallowRef的, createRef函数内部进行判断, 通过isRef判断如果传入的value是ref的直接返回, 如果不是就返回一个RefImpl类, ref类会判断是否是引用类型, 如果是的话, 就会通过toReactive进行处理reactive调用,ref类通过get通过trackRefValue函数调用收集依赖 , 和set通过triggerRefValue进行更新

#

reactive因为是返回的proxy代理对象是不能直接赋值, 否则就破坏响应式了 , 可以使用浅拷贝的形式 , 或者对象的属性进行直接赋值

shallowReactive ,只监听到对象的第一层属性值

const reactive = (target)=>{
    return new Proxy(target,{
        get(target,key, reciver){
        	const res = Reflect(target,key, reciver)
            track(target,key)
            return res
        }
        set(target,key,value, reciver){
        	const res = Reflect(targe,key,vlaue, reciver)
            trigger()
            return res
        }
    })
}

# toRef toRaw toRefs

toRef(obj,'key') , 只针对obj是响应式对象的情况 , 响应式对象解构赋值会丢失响应式, 所以用这个

toRefs实现 , 适用于对象解构赋值

const toRefs = <T extends object >(object:T)=>{
    const map:any = {}
    for(let key in obj){
        map[key] = toRef(obj,key)
    }
    return map
}

toRaw, 将响应式数据变成非响应式

# keepAlive

onActived , onDeactived

内部判断子组件 , 超过一个就报错 ,

会定义一个cache ,

# 图片懒加载

判断元素是否在可视区 , intersectionObserver

# vue3插件

对象或者函数形式, 对象必须要install函数

引入通过app.use回传到install函数中

app.use(loading)
Loding.vue
difineExpose({
    onshow
    onhide
})
index.ts
import loading.vue
export {
    install(app){
        const vNode = CreactVNode(Loading)
        render(vNode,document.body)
        app.config.globalProperties.$loading ={
            show:Vnode.component.expose.show
        }
    }
}

# nextick

vue更新dom是异步的,为什么是异步的是考虑性能 , 如果dom,数据更新是同步的

当我们操作数据时,发现dom更新是上次的

可以async await 的写法 , 或者回调函数写法

原理就是把我们的代码放到promise里面执行,开启一个微任务,等同步任务执行完之后执行

  • 为什么是异步

    watch(cu,(n,o)=>{
    console.log(n)
})
for(let i = 0  ;i<999;i++){
    cu.value = i 
}

其中watch只会走一次

tick的含义: 浏览器一帧所做的事情 ,

  • 用户的操作事件
  • 执行定时器任务
  • 执行requeseAnimationFrame
  • 执行dom的回流和重绘
  • 计算更新图层的绘制指令
  • 会诊指令合并主线程 , 空余时间执行requesetidlecallback

# vue3开发h5适配

px

rpx 小程序规定宽度是750rpx

也可以引入flexible.js

rem

em

vw vh 相对于视口宽高

  • vite自带了postCss

全局变量 var(--size)

# unocss原子化

  • 减少css体积 , 提搞复用
  • 减少复杂度

# webpack

  • entry: 入口文件

  • output: filename path打包文件 clean:true //每次打包保证重新打包,

  • plugins

  • mode指定环境

  • module:{

// 解析vue文件

  • rules:[]

    loader: 解析 ,比如css , style, 如有less再配置一下lessloadir

    }

  • resolve : {

    alias配置别名

    extensions 补全后缀

    }

  • devServer{

    open:

    hot

    port:

    host:

    proxy:'/api'

    }

  • extenals:{

    vue: 'vue' // cdn引入模式

    }

​

vue2vue3