网页ui设计模板代码,网站优化成都哪里好,免费网站app,平度建设局网站目录
vue
1.vue2 和 vue3 的区别
2.vue2 和 vue3的原理
3.组合式api 和 选项式api
3. Proxy和object.defineproperty 4..v-show 与 v-if 的区别
5.计算属性和 watcher
6.虚拟DOM
7.key的作用是什么#xff1f;
8.v-if 和 v-for 的优先级是什么#xff1f;
9.vuex
…目录
vue
1.vue2 和 vue3 的区别
2.vue2 和 vue3的原理
3.组合式api 和 选项式api
3. Proxy和object.defineproperty 4..v-show 与 v-if 的区别
5.计算属性和 watcher
6.虚拟DOM
7.key的作用是什么
8.v-if 和 v-for 的优先级是什么
9.vuex
JS
1.原型 原型链
2.你对闭包的理解
3.内存泄漏
4.数组的常用方法有哪些
5.Promise
6.什么是防抖和节流有什么区别如何实现?
7.谈谈 this 对象的理解
8.深拷贝与浅拷贝
9.箭头函数
10.reduce
css
1.css 新特性
2.BFC
3.说说你对盒子模型的理解?
4.块级元素和行内元素和行内块的区别
网络相关
1.什么是 HTTP? HTTP 和 HTTPS 的区别?
2.三次握手和四次挥手
3.Vue 项目中你是如何解决跨域的呢 vue
1.vue2 和 vue3 的区别
1.更容易维护
更好的组合式api , vue2是选项式 更好的的ts支持
Vue 3引入了组合式API使得代码组织更加灵活和可维护。Vue 2中使用的Options API虽然简单易用但对于大型项目来说组织和复用代码变得困难。组合式API允许我们根据逻辑相关性组织代码提供了更好的封装性和代码复用性。
2.更快的速度
重写diff算法
3.更小的提交 按需引入
Vue 3在体积上进行了优化使得打包后的文件更小。通过移除了一些不常用的特性、使用了更好的树摇Tree Shaking和代码压缩算法Vue 3的体积相比Vue 2更小加载速度更快
4.更优的数据响应式
proxy , 相较于Vue 2的Object.defineProperty性能更好。 2.vue2 和 vue3的原理
1.vue2通过object.definedProperty()的get()和set()来做数据劫持、结合发布订阅者模式来实现Object.definedProperty()会遍历每一个属性。
2.vue3通过proxy代理的方式实现。
3.proxy的优势不需要像object,definedProperty()的那样遍历每一个属性有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦藏”外界对该对象的访问都必须通过这一层拦藏。这个拦藏可以对外界的访问进行过滤和改写。
4.当属性过多的时候利用Object.definedProperty(O要通过遍历的方式监听每一个属性。利用proxy则不需要遍历会自动监听所有属性有利于性能的提升
3.组合式api 和 选项式api
vue2 通过 data、methods、watch , 只能定义一个 是选项式API写法
组合式是 vue3 中的 所有逻辑在setup函数中 ,通过ref 定义
组合式的好处有可复用可维护
组合式api更加有利于 逻辑复用 v2中使用mixins来做 , 但是mixins会产生命名冲突和数据来源不明确等问题
在项目开发中有两个功能特别类似如果单独实现会有很多重复的代码
在v3中我们利用组合式api的特点他们抽象出来进行封装把得到函数写在一个单独的模块中导出以供复用
3. Proxy和object.defineproperty
Object.defineProperty只能遍历对象属性进行劫持
Proxy直接可以劫持整个对象并返回一个新对象我们可以只操作新的对象达到响应式目的
Proxy可以直接监听数组的变化push、shift、splice
Proxy有多达 13 种拦截方法,不限于apply、ownKeys、deleteProperty、has等等这是Object.defineProperty不具备的
正因为defineProperty自身的缺陷导致Vue2在实现响应式过程需要实现其他的方法辅助如重写数组方法、增加额外set、delete方法
Proxy 不兼容 IE也没有 polyfill, defineProperty 能支持到 IE9 4..v-show 与 v-if 的区别
控制手段不同编译过程不同编译条件不同
控制手段v-show隐藏则是为该元素添加css--display:none元素依旧还在。v-if显示隐藏是将元素整个添加或删除
编译过程v-if切换有一个局部编译/卸载的过程切换过程中合适地销毁和重建内部的事件监听和子组件v-show只是简单的基于 css 切换
编译条件v-if是真正的条件渲染它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时并不做操作直到为真才渲染 v-show 由false变为true的时候不会触发组件的生命周期 v-if由false变为true的时候触发组件的beforeCreate、create、beforeMount、mounted钩子由true变为false的时候触发组件的beforeDestory、destoryed方法
性能消耗v-if有更高的切换消耗v-show有更高的初始渲染消耗
5.计算属性和 watcher
答: 区别: watch 侦听某一数据的变化从而会触发函数,当数据为对象类型时,对象中的属性值变化时需要使用深度侦听 deep 属性,也可在页面第一次加载时使用立即侦听 immdiate 属性 computed 计算属性是触发函数内部任一依赖项的变化都会重新执行该函数,计算属性有缓存,多次重复使用计算属性时会从缓存中获取返回值,计算属性必须要有 return 关键词
vue 中的 watcher 有三类
render watchercomputed自定义 watcher
computed 是一种特殊的 watcher
watch 和 computed 都是以函数为基础的,它们都是通过监听自身依赖的数据在变化时触发相关的函数去实现自身数据的变动。
不同点
运行时机不同
1.computed 是在 HTML,DOM 加载后马上执行的如赋值属性将被混入到 Vue 实例
2.watch 它用于观察 Vue 实例上的数据变动一般情况下是依赖项的值变化之后再执行当然可以设置立刻执行
6.虚拟DOM
虚拟dom相对于真实DOM而言的在reactvue等技术出现之前我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构来达到更新 ui 的目的。
这种方式相当消耗计算资源因为每次查询 dom 几乎都需要遍历整颗 dom 树如果建立一个与 dom 树对应的虚拟 dom 对象 js 对象以对象嵌套的方式来表示 dom 树及其层级结构那么每次 dom 的更改就变成了对 js 对象的属性的增删改查这样一来查找 js 对象的属性变化要比查询 dom 树的性能开销小。
7.key的作用是什么
页面上的标签都对应具体的虚拟 dom 对象(虚拟 dom 就是 js 对象), 循环中 ,如果没有唯一 key , 页面上删除一条标签, 由于并不知道删除的是那一条! 所以要把全部虚拟 dom 重新渲染, 如果知道 key 为对应标签被删除掉, 只需要把渲染的 dom 为对应标签去掉即可!key 是给每一个 vnode 的唯一 id也是 diff 的一种优化策略可以根据 key更准确 更快的找到对应的 vnode 节。
作用更准确、更快速、提高效率
8.v-if 和 v-for 的优先级是什么
v-if 不能和 v-for 一起使用的原因是 v-for 的优先级比 v-if 高先循环再做分支判断,一起使用会造成性能浪费 解决方案有两种: 把 v-if 放在 v-for 的外层 把需要 v-for 的值先在计算属性中过滤一次
最终结论
v2 中v-for优先级比v-if高
v3 中v-if优先级比v-for高
使用过程中不要把它们同时用在一个元素上。
9.vuex vuex 是一个状态管理模式, vuex 是为了解决整个网站状态数据共享问题的,虽然有父向子,子向父等数据传递,但在网站开发过程中一些无直接关联关系的组件也需要共享相同的数据时,就需要使用 vuex 了
vuex 中有六个主要的成员:
state 是用来存储数据的mutations 是用来修改 state 中的数据的方法actions 是用来处理一些异步操作数据的行为方法getters 有点类似计算属性,是对 state 中的数据做了一些处理modules 是用来对复杂业务分模块的,每个模块也可以有 state,mutaions,actions,gettersplugins 插件。比较常用的有用来持久化的 vuex-persistedstate
JS
1.原型 原型链
原型是我们创建函数的时候系统帮我们自动生成的一个对象。 主要作用是解决构造函数内部方法内存资源浪费问题。在开发中我们一般把实例对象一些通用的方法放入原型中在 vue 里面有时候也会给 vue 的原型添加一些公共类方法来实现所有的组件中可以共享成员。像一些常见的$router和$store 都是挂载到 vue 的原型上的。原型链是 js 对象一种查找机制遵循就近原则。当我们访问一个对象中的成员的时候会优先访问自己的如果自己没有就访问原型的如果原型也没有就会访问原型的原型直到原型链的终点 null. 如果还没有此时属性就会获取 undefined方法就会报错 xxx is not a function。一般原型链主要是用来实现面向对象继承的。
2.你对闭包的理解
闭包是一个可以访问其他函数内部变量的函数主要作用是解决变量污染问题也可以用来延长局部变量的生命周期。闭包在 js 中使用比较多几乎是无处不在的。一般大多数情况下在回调函数中闭包用的是最多的。闭包可能会造成内存泄漏
3.内存泄漏 内存泄漏一般是指变量的内存没有及时的回收导致内存资源浪费。一般有三种情况出现内存泄露比较多。1常见的声明了一个全局变量但是又没有用上那么就有点浪费内存了2定时器没清除 3循环引用A 对象里面有一个属性指向 B 对象B 对象有一个属性指向 A 对象。互相引用 解决内存泄露我们编译器有一个自动的内存清理。常见的主要是引用记数 和 标记清除。 谷歌浏览器主要是用标记清除大概流程是给每一个变量添加一个标记通过内部算法计算引用情况当不使用的时候就会自动清除。如果遇到定时器的话我一般会在页面关闭的时候手动清除。如果遇到循环引用我一般会手动把变量赋值为 null 来清除
4.数组的常用方法有哪些
数组的方法有很多大概分为以下几类
遍历方法 map: 遍历数组并做一一映射得到一个新数组forEach遍历数组没有返回值filter:筛选数组保留符合要求的元素some:判断数组是否有元素满足条件相当于逻辑或一真则真全假为假every:判断数组是否所有满足都满足条件相当于逻辑与一假则假全真为真find:查找满足条件的第一个元素findIndex:查找满足条件的第一个元素的下标reduce:给数组每一个元素执行一次回调一般用于数组元素求和也可以求最大值、最小值增删改查方法 push() : 末尾新增元素返回值是新数组长度unshift():开头新增元素返回值是新数组长度pop() 末尾删除元素返回值是删除的那个末尾元素shift() 开头删除元素返回值是开头的那个末尾元素splice() : 删除指定下标元素第三个参数是一个剩余参数可以在删除的元素后面插入元素其他方法 reverse:翻转数组会修改数组自身sort: 数组排序会修改数组自身json: 拼接数组元素返回值是拼接之后的字符串slice: 根据下标范围查询数组元素返回值是查询后的新数组indexOf: 查询元素下标一般用于元素是值类型
5.Promise
Promise 是异步编程的一种解决方案它是一个对象可以获取异步操作的消息他的出现一定程度上解决了异步编程中回调地狱的问题它比传统的解决方案回调函数和事件更合理和更强大。
所谓 Promise简单说就是一个容器里面保存着某个未来才会结束的事件通常是一个异步操作的结果。从语法上说Promise 是一个对象从它可以获取异步操作的消息。Promise 提供统一的 API各种异步操作都可以用同样的方法进行处理。
三种状态
pending进行中fulfilled或者resolved, 已成功rejected已失败
promise 的状态改变是不可逆的
pending → resolvedpending → rejected只有这两种 且一个 promise 对象只能改变一次无论成功还是失败,都会有个结果
promise 的常见 API
构造函数 Promise( excutor ){ }
executor 函数: 执行器 ( resolve, reject ) { }resolve 函数: 内部定义成功时我们调用的函数 value { }reject 函数: 内部定义失败时我们调用的函数 reason { }说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行
Promise.prototype.then 方法: (onResolved, onRejected) {}
onResolved 函数: 成功的回调函数 (value) {}onRejected 函数: 失败的回调函数 (reason) {}指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调
返回一个新的 promise 对象
Promise.prototype.catch 方法: (onRejected) {}
onRejected 函数: 失败的回调函数 (reason) {}
Promise.resolve 方法: (value) {}
value: 成功的数据或 promise 对象说明: 返回一个成功/失败的 promise 对象
Promise.reject 方法: (reason) {}
reason: 失败的原因说明: 返回一个失败的 promise 对象
Promise.all 方法: (promises) {}
promises: 包含 n 个 promise 的数组说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败
Promise.allSettled 方法: (promises) {}
promises: 包含 n 个 promise 的数组说明: 返回一个新的 promise, 所有的 promise 都执行完成不论成功还是失败才成功
Promise.race 方法: (promises) {}
promises: 包含 n 个 promise 的数组说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态
为啥可以链式调用
链式调用就是用.语法持续去调用示例方法例如 Promise.then().then().catch().finally().catch().then() 之所以可以链式调用的原因是这些示例方法的返回值仍是一个promise对象所以可以持续的链式调用。值得注意的是finally()的返回值仍是一个Promise对象它也可以继续链式调用
6.什么是防抖和节流有什么区别如何实现?
防抖和节流是性能优化手段
什么是防抖 防抖单位时间内频繁触发事件只执行最后一次。 防抖的主要应用场景
搜索框搜索输入。只需用户最后一次输入完再发送请求手机号、邮箱验证输入检测
什么是节流 节流单位时间内频繁触发事件只执行一次。 节流的主要应用场景
高频事件 例如 resize 事件、scroll 事件手机号、邮箱验证输入检测
相同点
都可以通过使用 setTimeout 来实现降低回调执行频率。节省计算资源
不同点
函数防抖在一段连续操作结束后处理回调利用 clearTimeout 和 setTimeout 来实现。函数节流在一段连续操作中每一段时间只执行一次频率较高的事件中使用来提高性能函数防抖关注一定时间连续触发的事件只在最后执行一次而函数节流一段时间内只执行一次
7.谈谈 this 对象的理解
在绝大多数情况下函数的调用方式决定了 this 对象的指向
this 关键字是函数运行时自动生成的一个内部对象只能在函数内部使用总指向调用它的对象
根据不同的使用场合this 对象有不同的指向主要分为下面几种情况 默认绑定 全局环境中定义的函数函数内部的 this 指向 window 对象 隐式绑定 函数还可以作为某个对象的方法调用这时 this 就指这个上级对象 new 绑定 通过构建函数 new 关键字生成一个实例对象此时 this 指向这个实例对象 显示绑定 apply()、call()、bind()是函数的一个方法作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此这时 this 指的就是这第一个参数 箭头函数 箭头函数没有自己的 this 值箭头函数中所使用的 this 来自于函数作用域链 箭头函数没有自己的 this 值箭头函数中所使用的 this 都是来自函数作用域链它的取值遵循普通普通变量一样的规则在函数作用域链中一层一层往上找。
8.深拷贝与浅拷贝
浅拷贝是拷贝一层属性为对象时浅拷贝是复制两个对象指向同一个地址。实际开发常用的方法有:object.assgin,扩展运算符(...) ,Array.prototype.slice(), Array.prototype.concat()等等。
深拷贝是递归拷贝深层次属性为对象时深拷贝是新开栈两个对象指向不同的地址。开发中常用的方法有: (1) loadsh 中的_.cloneDeep()方法 (2)JSON.stringify() JSON.parse() 。缺点是会忽略undefined、symbol和函数
9.箭头函数
箭头函数是ES6提出了的新语法。它最大的意义是解放了Function的功能。 在js中Function是一等公民它不但承担了本质的函数的功能还可以做构造函数来使用现在有了箭头函数其实大大简化了Function的使用频率。
与普通函数相比他
写法更加简洁可以根据具体情况省略 小括号return 等。这一点在高阶函数的使用中特别方便。例如,数组的map, forEach等.箭头函数内部没有自己的 this ,它的this就是外层作用域的 this 。它不能通过call,apply,bind来修改。箭头函数内部没有arguments对象。但是es6配套提供了剩余参数可以用来替代argument.不能当前构造器来使用。
我现在在写v3的代码所以使用箭头函数还是比较多的。
10.reduce reduce 作用给每一个元素执行一次回调函数并且返回最终的结果 reduce 参数有两个第一个是回调函数第二个是初始值。 一般初始值都会设置为 0目的是避免空数组报错 回调函数内部常用的形参有三个依次是累加值、当前元素、当前下标回调函数内部的 return 返回值就是下一次回调的累加值 reduce 方法的返回值:就是执行完遍历之后最终的累加值
css
1.css 新特性
C3 的新特性有很多常见的如下:
border-radius:圆角边框box-shadow:盒子阴影background-size:背景图片大小transition:过渡transform:转换(位移 旋转 缩放)animation:动画linear-gradient:线性渐变box-sizing:css3 盒子模型
2.BFC
BFC 的中文意思是块级格式化上下文,是用于布局块级盒子的独立渲染区域一个创建了新的 BFC 的盒子是独立布局的盒子内元素的布局 不会影响盒子外面的元素。
简单来说就是 BFC 就是 css 的一个布局概念是一个独立的区域(容器)
满足下列条件之一就可以触发 BFC:
HTML 根元素position 为 absolute 或 fixedfloat 属性不为 none常用overflow 不为 visible常用display 为 inline-block table-cell table-caption flex
可以解决什么问题:margin 重叠,清除浮动,自适应布局.
参考文章:https://juejin.cn/post/6950082193632788493 3.说说你对盒子模型的理解? 盒子模型组成有 4 部分,分别为:内容 内边距 外边距(一般不计入盒子实际宽度) 边框 盒子模型有 2 种:标准盒子模型与怪异盒子模型 标准盒子模型content(内容)border(边框)padding(内边距) 怪异盒子模型content(内容)(已经包含了 padding 和 border) css3 种可以通过设置 box-sizing 属性来完成标准或许怪异盒子模型之间的切换,怪异盒子模型:box-sizing: border-box;标准盒子模型:box-sizing:content-box
4.块级元素和行内元素和行内块的区别
通过设置 display 属性可以改变元素的类型。
1.块级元素(block)的特点
占据一行高度行高以及外边距和内边距都可设置宽度默认为是它的容器的100%但可以设定一个宽度它可以容纳内联元素和其他块元素
常见的有div, h1, p
2.inline元素的特点
和其他元素共享一行上高行高及外边距和内边距不可改变宽度就是它的文字或图片的宽度不可改变
常见的有i span a
3.inline-block元素的特点
和其他元素都在一行上行高及外边距和内边距都可改变
常见的有buttton img, input
网络相关
1.什么是 HTTP? HTTP 和 HTTPS 的区别?
http 是无状态的超文本传输协议连接简单信息是明文传输端口为 80。
https 协议是由 httpss 协议构建的可进行加密传输、身份认证的具有安全性网络协议,端口是 443
优缺点
https 有加密认证相对于 http 安全一些
https 因为需要进行加密解密等过程因此速度会更慢
2.三次握手和四次挥手
三次握手是为了确认双方的接收与发送能力是否正常。
1、第一次握手客户端给服务器发送一个 SYN 报文。
2、第二次握手服务器收到 SYN 报文之后会应答一个 SYNACK 报文。
3、第三次握手客户端收到 SYNACK 报文之后会回应一个 ACK 报文。 服务器收到 ACK 报文之后三次握手建立完成。
当客户端和服务端通过三次握手建立 TCP 连接进行可靠数据传输后当数据传送完毕肯定是要断开 TCP 连接所以就有了四次挥手。
四次挥手是为了断开连接后「资源」正常释放双方都可以主动断开连接。
1、第一次挥手客户端发送一个 FIN 报文报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态。
2、第二次握手服务端收到 FIN 之后会发送 ACK 报文且把客户端的序列号值 1 作为 ACK 报文的序列号值表明已经收到客户端的报文了此时服务端处于 CLOSE_WAIT 状态。
3、第三次挥手如果服务端也想断开连接了和客户端的第一次挥手一样发给 FIN 报文且指定一个序列号。此时服务端处于 LAST_ACK 的状态。
4、第四次挥手客户端收到 FIN 之后一样发送一个 ACK 报文作为应答且把服务端的序列号值 1 作为自己 ACK 报文的序列号值此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态
5、服务端收到 ACK 报文之后就处于关闭连接了处于 CLOSED 状态
扩展
为什么只有三次握手才能确认双方的接受与发送能力是否正常而两次却不可以
第一次握手客户端发送网络包服务端收到了。这样服务端就能得出结论客户端的发送能力、服务端的接收能力是正常的。
第二次握手服务端发包客户端收到了。这样客户端就能得出结论服务端的接收、发送能力客户端的接收、发送能力是正常的。不过此时服务器并不能确认客户端的接收能力是否正常。
第三次握手客户端发包服务端收到了。这样服务端就能得出结论客户端的接收、发送能力正常服务器自己的发送、接收能力也正常。
因此需要三次握手才能确认双方的接收与发送能力是否正常。
3.Vue 项目中你是如何解决跨域的呢
跨域是指在浏览器中a页面去请求了b页面的资源更具体的来说是指a页面和b页面的协议主机端口这三个有一个不同就是跨域请求。
这种情况在网页开发中是非常常见的。但是对于特殊的ajax请求出于安全性的考虑浏览器对跨域的ajax请求做了限制。
跨域的请求不一定报错例如script, css等等, ajax请求才会报错。
常见的解决方案有 3 种
JSONP: 利用 script 标签不受跨域限制的特点缺点是只能支持 get 请求CORS: 后端设置响应头 Access-Control-Allow-Origin。代理。在开发阶段我们可以在 devServer中配置 proxy 项。在项目开发完成上线之后一般使用 nginx 配置代理转发。
