金华市住房和城乡建设局网站,wordpress即时,胶州企业网站设计,沈阳网站建设三好街目录
什么是三次握手#xff1f;
什么是四次挥手#xff1f;#xff08;close触发#xff09; 什么是VUEX#xff1f;
什么是同源----跨域#xff1f;
什么是Promise#xff1f;
什么是fexl布局#xff1f;
数据类型
什么是深浅拷贝#xff1f;
什么是懒加载
什么是四次挥手close触发 什么是VUEX
什么是同源----跨域
什么是Promise
什么是fexl布局
数据类型
什么是深浅拷贝
什么是懒加载
什么是守卫
DOM
Diff算法并非Vue专用但凡涉及到虚拟DOM都有
Vue2与Vue3的区别
Vue中data为什么是函数Vue根实例为什么没有这个限制
Vue设计原理
Web时代的演变
Vue优化性能方法 什么是三次握手
是TCP连接时服务器和客户端的相互发送报文是为了确认双方接受、接受能力是否正常指定自己的初始化序列号为后面的可靠性传递做准备。
刚开始客户端处于Closed关闭状态服务器处于Listen监听状态。
第一次客户端给服务器发送一个SYN报文建立连接并指明客户端的初始化序列号ISN此时客户端处于SYN-END请求连接状态首部的同步位SYN1初始序列号seqxSYN的报文不能携带数据但是会消耗一个序列号。
第二次服务器收到后会返回一个SYN报文指定自己的初始化序列号ISN同时会把客户端的ISN1做为自己的ACK确认字符值表示已经收到此时处于SYN_RCVD表示已接受到半列队状态。在确认报文段中SYN1ACK1确认号ackx1seqy。
第三次客户端收到SYN报文后会发送ACK报文将服务器的ISN1作为ACK的值此时客户端处于ESTABLISHED已连接状态。在确认报文中ACK1acky1seqx1ACK报文可以携带数据了不携带不消耗序列号。 为什么要三次
是要确定发送、接收发送、发送接收是否可靠。
什么是四次挥手close触发
是由TCP半关闭造成的就是结束塔的发送后还能接受来自另一端数据的能力。刚开始都处于ESTANLISHED状态。
如果是客户端发送
第一次发送FIN报文报文中会指定序列号客户端处于FIN_WAIT1终止等待1状态。
第二次服务器收到后发送ACK报文接受得序列号1作为ACK的值处于CLOSE_WAIT半关闭状态。
第三次服务器收到后发送FIN报文指定序列号处于LAST_ACK最后确认状态
第四次客户端收到后发送ACK报文进入TIME_WAIT状态等一会进入CLOSED关闭连接状态客户端收到关闭连接。
在socket编程中任何一方执行close()操作就可以产生挥手操作。 什么是VUEX
是一个为Vue设计的状态管理库以利用Vue.js的细粒数据响应机制进行高效的状态更新。 state存放公用数据/状态的地方 getter:类似于vue中的计算属性。 mutation:修改state的地方$store.commit([xxx,name]) actions:是mutation的上一级提交到mutation执行可调用异步方法。 $store.dispach([xxx,name])
什么是同源----跨域
同源是一种约定DOM同源/XMLHTTP同源要求域名、端口号、协议相同。
CROE解决跨域croe的书写方法和axios一样通常不需要进行修改常用。
Jsonp是一种利用动态 创建script利用src进行跨域虽然无兼容性问题但是只能get请求从别的域加载执行可能会携带恶意代码不易确定失败。
Nginx反向代理在vue.confing中proxy
/api:{target :https://www.easy-mock.com,//设置代理target :http://10.10.29.26:8882, //代理的接口域名以及端口号ws:true,//支持ws协议,websocket的缩写changeOrigin: true,// 是否跨域,pathRewrite:{ //路径替换^/api:}
}
什么是Promise
是异步编程的一种解决方案是一个容器存放着未来结束的事件结果语法上说是对象可以获取异步消息。
三个状态padding等待、fulfiled成功、reject失败
三个方法.then(resolve成功、reject失败 .catch(获取异常信息 .funally()都会执行
解决异步无法返回值new时自身同步调用方法的时候异步。
什么是fexl布局
弹性布局由父容器、子容器构成通常设置主轴和交叉轴来控制子元素的排序方式。
定义子元素的排列方向
felx-direction:row|row-reverse|column|column-reverse//row :默认值主轴水平方向 左往右对齐//row-reverse:主轴水方向 右往左对齐//column:主轴垂直方向 上往下对齐//column-reverse:主轴垂直方向 下往上对齐
轴线属性
flex-warp:nowrap|warp|warp-reverse//nowarp:(默认)不换行//warp:换行在第一行上方//warp-reverse:换行在第一行下方
主轴对齐
justify-content:flex-start|felx-end|center|space-between|space-around//flex-start:(默认值)左对齐//flex-end:右对齐//center:居中//space-between:两端对齐间隔相等//space-around:每个项两侧间隔相等
交叉轴对齐
align-items:flex-start|flex-end|center|baseline|staretch//flex-start:交叉轴的起点对齐//flex-end:交叉轴的终点对齐//center:交叉轴的中点对齐//baseline:项目的第一行文字的基线对齐//stretch:默认值如果项未设置高度或设为auto将沾满整个容器的高度多根轴线对齐
align-content:flex-start|flex-end|center|space-between|space-around|strctch//flex-start:与交叉轴的起点对齐//flex-end:与交叉轴的终点对齐//center:与交叉轴的中点对齐//space-between:与交叉轴两端对齐轴线之间的间隔平均分布//space-around:每根轴线两侧的间隔相等//stretch:默认值 轴线沾满整个交叉轴
数据类型
基本数据类型undefined、null、Boolean、String、Number、Symbol等等类型在内存中占据固定大小保存在内存栈中。
引用数据类型Object、Array、Date、Function、RegExp等等。引用数据类型的值是对象保存在堆内存中。
在内存栈存储的是对象的变量标识符一级对象在堆内存中储存的存储地址。
什么是深浅拷贝
浅拷贝仅仅是复制了引用彼此之间的操作相互影响。Array》slice和concat方法
深拷贝在堆中重新分配内存不同地址相同的值互不影响复制实例。
JSON.parse();把JSON字符串反序列化为一个js对象
JSON.stringify()把js对象序列化为一个JSON字符串
递归对属性中所有的应用类型的值进行遍历知道是基本类型为止
什么是懒加载
懒加载也叫延迟加载指在页面中延迟加载页面内容能够提升用户体验、减少无效的资源加载、防止并发加载的资源过多会阻塞js的加载。
图片懒加载将地址储存在自定义属性上当页面滚动时内容马上要在视口内呈现将地址赋值给src。
1、document.documentElement.clientHeight//获取屏幕可视窗口高度
2、element.offsetTop//获取元素相对文档顶部的距离
3、document.doceumentElement.scroliTop//获取浏览器窗口顶部与文档顶部之间的距离也就是滚动条的距离
可以通过这个三个方法判断 3-21 ,从而判断元素是否在可视范围内。
数据懒加载将地址储存在自定义属性上当页面滚动时内容马上要在视口内数据赋值。
1、scrollHeight//指元素的总高度
2、scrollTop//当滚动条滚动时向下拖动滚动条内容想上滚动的距离。
3、clientHeight//元素可视区的大小指的是元素内容及其边框所占的空间大小------可视区域的大小
通过 1-2-30 判断滚动条是否到达底部
路由懒加载 通过import()实现 将路由对应的组件加载成一个个对应的js包再路由被访问时才将对应的组件加载。 原理将路由组件改写成一部组件只有当函数被调用的时候采取加载对应的组件内容。
什么是守卫 全局前置守卫路由即将改变前一般项目中进行判断是否登录、是否有路由权限。。。。 reouter.beforeEach((to,from,next){...})
//to到哪个页面去
//from从哪个页面来
//next{回调函数,如果是false终端导航如果浏览器URL改变地址蛔虫知道from路由对
//应的地址如果next是路径会中断当前导航去新的导航可以传任意位置的对象
//允许设置选项 replacetruename’home以及任何再router-link的to/prop/router.push} 全局后置守卫reouter.afterEach(同上) 组件路由守卫是写在每个单独的Vue文件里面的路由守卫 beforeRouteEnter(to,from,next){...})
//在进入路由之前调用组件实例还没有被渲染无法获取this实例可以通过传
//一个回调给next来访问再确认导航的时候执行回调把组件实例做为回调方法的参数beforeRouteUpdate((to,from,next){...})
//当前路由发生改变但是组件被复用时调用。beforeRouteLeave((to,from,next){...})
//离开当前路由页面时调用 路由独享守卫是再路由配置页面单独给路由配置一个守卫。 export default new VueRouter({routes:[{path:/,name:xxx,component:Xxx,beforeEnter:(to,from,next){...}}]})
DOM 真实DOM渲染顺序 1、解析HTML构建DOM树并请求css/image/js 2、CSS文件下载完成开始构建css树 3、构建完成后和DOM 一起生成渲染树 4、布局 5、显示 虚拟DOM就是一个用来表示真实DOM的对象最终会映射到真是环境上并且它的不依赖真实平台的能力。 页面的更新可以先完全反映在虚拟DOM上操作内存中的js对象块将最终的js对象映射成真实DOM交给浏览器去绘制减少对真实DOM的操作。
所以说虚拟DOM算法(虚拟DOMdiff算法)操作真实DOM性能高于直接操作真实DOM。
Diff算法并非Vue专用但凡涉及到虚拟DOM都有 能精确比较新旧虚拟DOM中的key变化提高更新效率。 是一种对比算法对比两者谁是新旧虚拟DOM对比哪个虚拟节点改变并只更新这个虚拟节点所对应的真实节点。 使用虚拟DOM损耗计算总损耗 虚拟DOM增删改 真实DOM差异增删改 排版与重绘 使用真实DOM 损耗计算总损 真实DOM完全增删改可能多个节点排版重绘
原理新旧虚拟DOM只会再同级对比是深度优先算法在patchVnode发生。
对比流程数据改变触发setter通过Dep.netify去通知所有订阅者订阅者会调用patch方法对比当前同层的虚拟节点是否为同一类型标签给真实DOM更新相应试图。
总结 1、diff算法是虚拟DOM技术的必然产物通过新旧虚拟DOM做对比将变化的地方更新 在真实DOM上另外也需要diff高效率执行对比过程从而降低时间复杂度On---通过updateChildern()高效执行。 2、Vue2中为了降低watcher粒度每个组织只有一个watcher与之对应这样才能精确找到发生变化的地方。 3、vue中的diff执行的时候是组件实例执行更新函数时它会对比上一次渲染结果oldVnde和新的渲染结果此过程称为patch。 4、diff过程整体遵循深度优先同层级比较策略会从头部节点开始对比尝试如果没有找到相同节点才会遍历查找查找结束再处理剩下的节点借助key可以精确找到相同节点因此patch非常高效。 Vue2与Vue3的区别 1、Vue3中webpack被隐藏vue.config.js需要自己创建。 2、setup函数时Vue3的属性和方法的入口它可以接受两个参数props接收父组件传值context上下文有三个使用参数attrs、emits、slots他必须有返回值async可以省略。 3、响应式原理区别 Vue2中使用Object.defineProperty进行数据劫持用obsever进行递归监听但是如果监听的数组对于数组的删除、新增属性、通过下标修改不会更新视图需要调用 set/delete/splice方法。 Vue3中用的时Proxy(原型对象、原型方法)方法用proxy代理对象而不是某个属性。
4、v-fi和v-for的比较 Vue2: v-for优先于v-if每次渲染都先执行循坏在执行判断浪费性能。 在外层嵌套template在这进行判断再内部循环。 Vue3v-if优先于v-for Vue中data为什么是函数Vue根实例为什么没有这个限制
Vue是单页面框架可能会有很多组件实例如果形象式定义data会导致他们共用一个data造成实例之间的数据污染。
Vue根实例全局只有一个。
Vue设计原理 官网上写了定义和特点vue是一个渐进式的javscript框架易用高效且灵活。 渐进式根其他大型框架不同的是Vue被设计为可以自底向上逐层应用核心只关注视图图层不仅易于上手还便于第三方库的项目整合vue完全能为复杂的单页面应用提供驱动核心就是一些声明式渲染组件系统只关注注释图层可以作为库再其他项目中取用也能作为一个大型的框架去搭建项目这就是渐进式。
Web时代的演变
web1.0的时代没有前端概念项目通常由多个单文件组成每个文件都有HTML、CSS、JS或者java代码难以维护于是便出现了MVC开发模式和框架。在MVC模式中前端只完成后端中的view层前端页面开发效率并不高、前后端职责不清晰。
web2.0时代自从Ajax技术开始出现前后端职责分明前端可以通过Ajax与后端进行整体数据交互前端只需要开发页面内容并且ajax技术可以实现部分刷新减少服务器负载和流量消耗比如 jQuery但是缺乏可行的开发模式 承载更复杂的业务需求页面都挤在一起难以维护。
前后端分离的架构演变MVC--MVP--MVVM
MVC与后端的类似Model负责应用数据保存与后端数据同步Contoller负责业务逻辑View负责视图。 理论上是可行但是很不方便然后演变成另一种结构的MVC加入了User 这样的模式也会造成数据流混乱的问题
MVP与MVC很接近P指的是中间人它负责view和model之间的数据流防止直接交互但是这样view变成了被动试图而且本身变得很小但是应用变得很大导致P体积增大难以维护。
MVVM Angular早就把MVVM模式带入前端跳过了MVP。核心是中间VM层ViewModel通过数据响应式机制自动响应Model中的数据变化同时VM会实现更新自动将数据转化试图更新通过监听V中用户交互更改M中的数据减少大量操作DOM代码兼顾开发效率和可维护性。
总结
1、这三者都是框架模式他们的目标都是为了解决Model和View的耦合问题。
2、MVC模式出现较早主要应用在后端分层清晰但是数据流混乱。
3、MVP式MVC的进化中间人负责MV通讯解决两者耦合问题但是会臃肿可维护性不高。
4、 MVVM在前端广泛应用不仅解决MV耦合问题还解决了维护两者映射关系的大量代码和DOM操作提高了开发效率和可读性同时保持了优越的性能表现。 Vue优化性能方法 1、路由懒加载 2、keep-alive缓存页面 3、区分v-show、v-if使用场景 4、v-for遍历避免同时使用v-if 5、vue组件销毁时会自动解绑他的全部指令和时间监听仅限组件本身事件 6、图片懒加载、数据懒加载 7、按需导入
