虚拟Dom
就是根据template这个标签来生成的 template是咱们想要真实Dom什么样子就写成什么样子 template里边的数据可不是真实dom,是虚拟dom就是对真实dom的一个描述。 虚拟Dom你优化渲染性能的,能够有效的比较和更新真实Dom的内容 从而减少真实Dom的操作和提高应用性能、能够用diff算法 精确的找到哪里发生了变化 然后直接更新真实dom。
MVVM的理解
Model:模型层,负责处理业务逻辑以及和服务器进行交互。
View:视图层,负责将数据模型转化成UI显示出来,可以简单的理解为HTML页面
ViewModel:试图模型层,用来连接Model和View,是Model和View之间的桥梁,每当V层获取或者保存数据的时候,都要由VM层做中间的处理,从而交给M层。
总结:MVVM模式简化了界面和业务的依赖,解决了数据频繁更新。MVVM在使用当中,利用了双向绑定技术,使得Model在变化时,ViewModel会自动更新,而ViewModel变化时,View也会自动变化。
MVC的理解
MVC是Model-View-Controler的简称。即模型-视图-控制器
事件循环机制
事件循环机制的基本原理是,当用户与页面交互或数据发生变化时候 Vue.js 会将这些事件加入到一个事件队列中,并在适当的时机执行这些事件。Vue.js 使用了一种称为“虚拟 DOM”的技术,它能够在内存中维护一个虚拟的 DOM 树,当数据发生变化时,Vue.js 会比较新旧虚拟 DOM,然后只更新需要更新的部分,以提高性能和效率。
原型原型链
原型Prototype
原型链_proto_在谷歌浏览器他可能表现成[ [ prototype ] ]
原型是一个对象 是函数的一个属性 prototype
原型链是当通过对象访问一个属性或者方法时 js会现在自身找
找不到就通过_proto_ 去对象的原型中查找对应的属性方法 还没找到就继续在原型的原型上找 直到找到该属性方法最终找到链条的末端
闭包
闭包就是有权访问另一个函数作用域中内部变量或数据的函数,因为在JS中,只要内部函数能能够读取外部函数的变量或数据,反之就不行,所有可以将闭包简单理解成,定义在一个函数内部的函数。
箭头函数和普通函数的区别
深拷贝和浅拷贝
浅拷贝只是复制了对象的引用(地址),而深拷贝则是复制了对象本身(新建对象)
深拷贝方法 copy.deepcopy()
浅拷贝方法 copy()
浅拷贝是指创建一个新的对象,然后将原始对象中的所有非引用类型属性复制到新对象中。对于引用类型的属性,浅拷贝只复制它们的引用而不是实际的对象。因此,新对象和原始对象中的引用类型属性仍然指向同一个对象。 1.对象展开运算符 {...obj} 2.Object.assign() 3.数组的 slice()、concat() 方法等
深拷贝是指创建一个新的对象,并且递归地复制原始对象中的所有属性,包括引用类型的属性,直到所有嵌套对象都被复制。这样,新对象和原始对象完全独立,修改新对象不会影响到原始对象,反之亦然。
在 JavaScript 中,由于对象的嵌套结构可能很复杂,因此实现深拷贝可能会比较复杂。一种简单的实现方式是使用 JSON 序列化和反序列化,例如 JSON.parse(JSON.stringify(obj))。但是这种方法有一些局限性,比如不能序列化函数、循环引用等情况。
settimeout和setinterval的区别?
-
setTimeout 函数用于在指定的时间后执行一次特定的函数,只执行一次。
-
setInterval 函数用于每隔指定的时间重复执行特定的函数,即重复执行。
总结来说,setTimeout 是执行一次性任务,而 setInterval 是执行重复性任务。
对于异步理解
总结: 理解异步编程的关键在于理解事件循环(Event Loop)。JavaScript 是单线程执行的,意味着同一时间只能执行一个任务。当遇到异步操作时,JavaScript 将其放入任务队列中,并继续执行后续代码。当主线程空闲时,事件循环会从任务队列中取出任务执行。
Promise: 一个异步操作可以处于以下三种状态之一
1.Pending(进行中):初始状态,表示异步操作尚未完成,仍在进行中,
2.Fulfilled(已成功):表示异步操作已经成功完成,并返回了一个值,此时会调用 Promie的then()方法来处理异步操作的结果。
3.Rehected(已失败):表示异步操作失败,无法返回预期的值,此时会调用 Promise的Catch()方法来处理异步操作的错误。
总结:通过 new Promise() 创建了一个 Promise 对象,并传入了一个执行器函数,该函数接受两个参数:resolve 和 reject。在异步操作完成时,通过调用 resolve() 或 reject() 来改变 Promise 的状态。
然后通过 then() 方法处理异步操作成功的情况,通过 catch() 方法处理异步操作失败的情况。
v-if和v-for和v-show的区别
1. v-if:
- v-if 是用于条件性地渲染元素的指令。它会根据表达式的真假值来决定是否渲染 DOM 元素。当条件为真时,被 v-if 控制的元素会被渲染到 DOM 中;当条件为假时,元素将不被渲染到 DOM 中。
-
如果在 v-if 条件为假时,元素有相关的事件监听器或子组件,它们将被销毁并清理。
-
2.v-for:
- 如果在 v-if 条件为假时,元素有相关的事件监听器或子组件,它们将被销毁并清理。
-
通过 v-for 可以遍历数组或对象,并为每个元素或属性执行相同的模板渲染。
-
v-for 的语法是 v-for="(item, index) in items",其中 items 是源数据数组或对象, item 是当前遍历的元素, index 是当前元素的索引(仅在遍历数组时可用)。
-
3.v-show:
- v-show 是用于根据表达式的真假值来动态切换元素的显示与隐藏状态的指令。
-
当表达式为真时,被 v-show 控制的元素会显示在页面上;当表达式为假时,元素会被隐藏,但仍然保留在 DOM 中
-
v-show 的切换是通过 CSS 的 display 属性来实现的,所以在切换过程中元素的显示与隐藏不会触发重新渲染和销毁重建的操作,对性能影响较小。
-
总的来说 , v-if 适用于条件性地渲染单个元素或组件, v-for 用于循环渲染列表中的多个元素或组件,而 v-show 用于动态切换元素的显示与隐藏状态。在选择使用时,可以根据具体的需求和场景来决定。
Rem适配理解和实现
REM 适配的核心思想是根据设备的屏幕宽度来动态调整根元素的字体大小,从而影响整个页面的布局和元素大小
通过设置根元素的字体大小为屏幕宽度的某个比例值,然后在样式中使用 REM 单位来定义元素的尺寸和间距,以实现页面的自适应布局。
VW/VH适配理解和实现:
理解:
1. Viewport:
视口是指浏览器用来显示网页内容的区域,它的大小可以通过浏览器窗口大小来确定。
2. Viewport width (vw):
2.1:vw 单位表示相对于视口宽度的百分比,1vw 等于视口宽度的 1%。
2.2:例如,如果视口宽度为 1000px,则 1vw 等于 10px。
3. Viewport height (vh):
3.1:vh 单位表示相对于视口高度的百分比,1vh 等于视口高度的 1%。
3.2:例如,如果视口高度为 800px,则 1vh 等于 8px。
实现操作:
1.使用Vw和Vh单位定义样式:
1.1:在样式中,可以使用 vw 和 vh 单位来定义元素的尺寸、间距等属性,以实现基于视口大小的适配。
1.2:例如,定义一个宽度为视口宽度的一半,高度为视口高度的三分之一的盒子,可以这样写: .box { width: 50vw; height: 33.33vh; }
2.响应式布局:
2.1:使用 vw 和 vh 单位可以轻松实现响应式布局,使元素的大小和位置随着视口大小的变化而自动调整。
2.2:例如,可以通过设置元素的宽度为 100vw,使其始终占据整个视口的宽度,从而实现全屏布局。
3.配合媒体查询:
3.1:可以配合媒体查询(media queries)使用 vw 和 vh 单位,根据不同的视口大小应用不同的样式,以实现更精细的响应式布局
3.2:例如,针对不同的视口宽度设置不同的元素大小和布局方式。
Websocke的理解和相关Api
理解:
1.建立链接:客户端通过向服务器发起特殊的websocket握手请求来建立链接
2.通信协议:一旦链接建立成功,客户端和服务器之间就可以通过websocket进行双向通信
3.数据传输:客户端和服务器可以通过发送帧来进行数据传输,
4.保持链接:一旦建立了websocket链接,它可以保持持久性链接,允许客户端和服务器之间保持通信
5.关闭链接:当客户端或服务器想要关闭链接是,它们可以发送一个关闭帧来终止链接,/一旦双方都发送了关闭帧,连接就会呗正式关闭,并且不再接受任何数据传输
Api:
API 包括 WebSocket 对象,可以通过构造函数 new WebSocket(url) 来创建 WebSocket 实例。
WebSocket 对象提供了一系列方法用于发送数据、关闭连接以及处理事件,如 send(data)、close(code, reason)、addEventListener(eventType, handler) 等。
一些常见的事件包括 open(连接建立)、message(接收到消息)、error(发生错误)、close(连接关闭)等。