2023高频前端面试题(含答案)

一、简单页面
1、CSS选择器样式优先级
2、CSS实现三列布局(左右固定宽度,中间自适应)
(1)CSS浮动
第一个float:left,第二个float:right,第三个设置margin-left和margin-right
(2)绝对定位法
第一个定位到left,第二个定位到right,第三个设置margin-left和margin-right
(3)flex布局

.left{width:200px;或者flex:0 0 200px;
}
.right{width:200px;或者flex:0 0 200px;
}
.center{flex:1;
}

3、如果要做优化,CSS提高性能的方法有哪些?
内联首屏关键CSS
异步加载CSS
资源压缩
合理使用选择器
减少使用昂贵的属性(`box-shadow 属性是向元素添加阴影,background-image,border-radius,transform,filter
不要使用@import

二、js
1、防抖和节流,应用场景

防抖和节流都是防止某一时间频繁触发,但是原理却不一样。
防抖是将多次执行变为只执行一次,节流是将多次执行变为每隔一段时间执行。
防抖(debounce):
search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
节流(throttle):
鼠标不断点击触发,mousedown(单位时间内只触发一次)
监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
2、什么是闭包
「函数」和「函数内部能访问到的变量」(也叫环境)的总和,就是一个闭包。
3、继承有哪些方法
原型链继承
借用构造函数继承(伪造对象、经典继承)
实例继承(原型式继承)
组合式继承
寄生组合继承
es6继承 extends
4、什么是深/浅拷贝,有哪些实现方式
基本数据类型:string、number、boolean、undefined、null、Symbol(ES6,符号类型)
引用数据类型:object、array、function
JS数据类型分为基本数据类型和引用数据类型,基本数据类型保存的是值,引用类型保存的是引用地址(this指针)。浅拷贝共用一个引用地址,深拷贝会创建新的内存地址。
JSON字符串转换为JSON对象:

var obj = str.parseJSON();//将JSON字符串转换为JSON对象
var obj = JSON.parse(str);// 将字符串转换为JSON对象

将JSON对象转化为JSON字符串:

var str = JSON.stringify(obj);
var str = obj.toJSONString();

Object.assign:对象的合并 (第一级属性深拷贝,第一级以下的级别属性浅拷贝。)
ES6中的 Object.assign(),第一个参数必须是个空对象。
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。

let obj1 = {a: { b: 1},c: 2
}
let obj2 = Object.assign({},obj1)
obj2.a.b = 3;  //第二层,obj1变了,是浅拷贝
obj2.c = 3;  //第一层,obj1不变,是深拷贝
console.log(obj1);  
console.log(obj2); 

5、数组有哪些常用方法,引出下一个问题,slice和splice区别:

1.splice改变原数组,slice不改变原数组。

2.splice除了可以删除之外,还可以插入。

3.splice可传入3个参数,slice接受2个参数。

6、Promise.all和Promise.race的区别,应用场景
Promise.all()可以将多个实例组装个成一个新实例,成功的时候返回一个成功的数组;失败的时候则返回最先被reject失败状态的值。
适用场景:比如当一个页面需要在很多个模块的数据都返回回来时才正常显示,否则loading。
promise.all中的子任务是并发执行的,适用于前后没有依赖关系的。Promise.race()意为赛跑的意思,也就是数组中的任务哪个获取的块,就返回哪个,不管结果本身是成功还是失败。一般用于和定时器绑定,比如将一个请求和三秒的定时器包装成Promise实例,加入到Promise队列中,请求三秒中还没有回应时,给用户一些提示或相应的操作。

7、微任务和宏任务的区别
1.宏任务:当前调用栈中执行的代码成为宏任务。(主代码快,定时器等等)。
2.微任务: 当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。(promise.then,proness.nextTick等等)。
3. 宏任务中的事件放在callback queue中,由事件触发线程维护;微任务的事件放在微任务队列中,由js引擎线程维护。
微任务:process.nextTick、MutationObserver、Promise.then catch finally
宏任务:I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame

1、Vue中的的通信方式有几种?隔代组件的通信你用那种方式解决?
props/$emit 适用父子组件通信
ref与parent/children适用父子组件通信
attrs/listeners,provide/inject 适用于隔代组件通信
vuex,EventBus(事件总线) 适用于父子、隔代、兄弟组件通信
slot插槽方式

2、v-show 和 v-if指令的共同点和不同点?
v-show是css切换,v-if是完整的销毁和重新创建,如果频繁切换时用v-show,运行时较少改变用v-if

3、为什么使用key?
做一个唯一标识, Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。

4、简述computed和watch的使用场景
computed:
支持缓存,数据变,直接会触发相应的操作;
监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
当一个属性发生变化时,需要执行对应的操作;即一个属性受多个属性影响,多对一或者一对一的关系;
监听的是这个属性自身的变化,且不会操作缓存
监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,
是一个计算属性,类似于过滤器,对绑定到view的数据进行处理
    当一个属性受多个属性影响的时候就需要用到computed
    最典型的例子: 购物车商品结算的时候
watch:
1.是观察的动作,
2.应用:监听props,$emit或本组件的值执行异步操作
3.无缓存性,页面重新渲染时值不变化也会执行
watch是一个观察的动作
    当一条数据影响多条数据的时候就需要用watch
    例子:搜索数据

5、params和query的区别(怎么定义 vue-router 的动态路由? 怎么获取传过来的值?)

6、$route 和 $router 的区别

8、vue-router 有哪几种导航钩子?
1.全局导航钩子:router.beforeEach(to,from,next)作用:跳转前进行判断拦截、组件内的钩子、单独路由独享组件
2、路由独享钩子可以在路由配置上直接定义 beforeEnter
3、组件内的导航钩子有三种:
beforeRouteEnter 在进入当前组件对应的路由前调用
beforeRouteUpdate 在当前路由改变,但是该组件被复用时调用
beforeRouteLeave 在离开当前组件对应的路由前调用=

9、Vue实例的生命周期讲一下, mounted阶段真实DOM存在了嘛?
Vue实例从创建到销毁的过程,就是生命周期。
也就是:开始创建->初始化数据->编译模板->挂载dom->数据更新重新渲染虚拟 dom->最后销毁。这一系列的过程就是vue的生命周期。所以在mounted阶段真实的DOM就已经存在了。
beforeCreate:vue实例的挂载元素el和数据对象data都还没有进行初始化,还是一个 undefined状态
created: 此时vue实例的数据对象data已经有了,可以访问里面的数据和方法, el还没有,也没有挂载dom
beforeMount: 在这里vue实例的元素el和数据对象都有了,只不过在挂载之前还是虚拟的dom节点
mounted: vue实例已经挂在到真实的dom上,可以通过对 dom操作来获取dom节点
beforeUpdate: 响应式数据更新时调用,发生在虚拟dom打补丁之前,适合在更新之前访问现有的 dom,比如手动移除已添加的事件监听器
updated: 虚拟dom重新渲染和打补丁之后调用,组成新的 dom已经更新,避免在这个钩子函数中操作数据,防止死循环。
activated: 当组件keep-alive激活时被调用
deactivated:当组件keep-alive停用时被调用
beforeDestroy: vue实例在销毁前调用,在这里还可以使用,通过this也能访问到实例,可以在这里对一些不用的定时器进行清除,解绑事件。
destroyed:vue实例销毁后调用,调用后所有事件监听器会被移除,所有的子实例都会被销毁。

11、vuex有哪几种属性,怎么使用?哪种功能场景使用它?
vuex是一个专门为vue.js开发的状态管理模式,每一个vuex应用核心就是store(仓库)。store基本上就是一个容器,它包含着你的应用中大部分的state(状态)
vuex的状态存储是响应式的,当 vue组件中store中读取状态时候,若store中的状态发生变化,那么相应的组件也会相应地得到高效更新。
改变store中的状态的唯一途径就是显示 commit(提交)mutation,这样使得我们可以方便地跟踪每一个状态的变化。
State: 定义了应用状态的数据结构,可以在这里设置默认的初始状态
Getter: 允许组件从Stroe中获取数据, mapGetters辅助函数仅仅是将store中的getter映射到计算属性。
Mutation: 唯一更改store中状态的方法,且必须是同步函数。
Action: 用于提交muatation, 而不是直接变更状态,可以包含任意异步操作。
Module: modules,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理;如果所有的状态或者方法都写在一个store里面,将会变得非常臃肿,难以维护。

12、vuex中state存储的数据如果页面刷新此时数据还会有吗?(刷新之后销毁了)

13、v-bind和v-model的区别, v-model原理知道吗?

//语法糖写法
<input type="text" v-model="name" >//还原为以下实例
<input type="text" v-bind:value="name" v-on:input="name=$event.target.value">

v-bind用来绑定数据和属性以及表达式
v-model使用在表单中,实现双向数据绑定的。

14、Vue中的常见指令有那些?
v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot…

15.改变this指向call、apply与bind区别:
前两个可以自动执行,bind不会自动执行,需要手动调用
call、bind与apply区别:前两个都有无数个参数,apply只有两个参数,而且第二个参数为数组

16,vue路由的两种模式
1.hash模式
特点:在url地址上有#号
实现的原理:原生的hasChange事件来实现,来监听hash值的变化
window.onhaschange=function(){}
刷新页面的时候:不会去发送请求,页面不会有任何问题,不需要后端来配合

2.history模式
特点:在url地址上没有#号,比较与hash模式看起来好看一些
实现的原理:利用的是history的api 来实现的 popState() 来实现的
刷新页面的时候:会去发送请求然后会导致页面出现找不到的情况,需要后端来配合解决

17,vue的响应式原理:
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 数据劫持,来劫持各个属性的setter,getter,在数据更新时发布消息给订阅者,触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),

最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

18.Flex容器属性

1.flex-direction主轴方向(row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。)
2.flex-wrap(nowrap(默认值):不换行。
wrap:换行。
wrap-reverse:换行,第一行在下方。 )
3.flex-flow(12简写形式)
4.justify-content项目在主轴上的对齐方式。(flex-start(默认值):左对齐(即上面页面展示效果)
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。)
5.align-items项目在交叉轴上如何对齐。(lex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。)
6.align-content

19.标准盒模型和怪异盒模型的区别:
怪异盒模型的宽度变小
标准盒大小计算公式:width(content) + padding + border + margin
怪异盒大小的计算公式:width(content + padding + border) + margin

20.vue的插槽(slot)主要分三种:
默认插槽,具名插槽,作用域插槽
vue中的插槽,指的是子组件中提供给父组件使用的一个占位符;
用标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML、组件等,填充的内容会替换掉子组件的标签(替换占位符)。

21.vue数据的双向绑定
“vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持,在数据变化时发布消息给订阅者,触发相应的监听回调。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;”

22.常用的git命令

git config
用法:git config –global user.name “[name]”
用法:git config –global user.email “[email address]”
git init
用法:git init [repository name]
该命令可用于创建一个新的代码库
git clone
用法:git clone [url]
该命令可用于通过指定的URL获取一个代码库。
git add 添加文件到仓库
git status 查看仓库当前的状态,显示有变更的文件。
git diff 比较文件的不同,即暂存区和工作区的差异。
git commit 提交暂存区到本地仓库。
git reset 回退版本。
git push
用法:git push [variable name] master
该命令可以将主分支上提交的变更发送到远程代码库。


23.数组和字符串的相互转换
使用字符串的 split() 方法可以根据指定的分隔符把字符串切分为数组。
如果使用数组的 join() 方法,可以把数组元素连接为字符串。

24.js 判断数据类型的几种方法

typeof str     // "string" 字符串
typeof num     // "number" 数值
typeof array   // "object" 对象(可以和函数区别开)
// 👆注意,数组也是一个对象
typeof date    // "object" 对象 
typeof func    // "function" 函数
typeof symbol  // "symbol"

25.toString 方法
把对象直接转换成字符串

26.es6新特性:

1、let 和 const
let 表示申明变量。const 表示申明常量
常量定义了就不能改了。对象除外,因为对象指向的地址没变。
const在申明是必须被赋值。
两者都为块级作用域。
2、模板字符串
3、解构
4、函数的默认值
5、Spread / Rest 操作符,三个点…
6、箭头函数
7、for of
for of遍历的是键值对中的值
for in遍历的是键值对中的键
8、class类,原型链的语法糖表现形式
9、导入导出
导入improt
导出export default
10、promise
Promise 用于更优雅地处理异步请求。
11、async/await
比promise更好的解决了回调地狱
12、Symbol,新的基本类型
13、Set集合
存储任何类型的唯一值,即集合中所保存的元素是不重复的。类数组结构。
let arrNew = new Set(待去重的数组)


27.webpack


1、webpack的作用是什么,谈谈你对它的理解?
现在的前端网页功能丰富,特别是SPA(single page web application 单页应用)技术流行后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决Scss,Less……新增样式的扩展写法的编译工作。
所以现代化的前端已经完全依赖于webpack的辅助了。
现在最流行的三个前端框架,可以说和webpack已经紧密相连,框架官方都推出了和自身框架依赖的webpack构建工具。
react.js+WebPack
vue.js+WebPack
AngluarJS+WebPack
2、webpack的工作原理?
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。
3、webpack打包原理
把一切都视为模块:不管是 css、JS、Image 还是 html 都可以互相引用,通过定义 entry.js,对所有依赖的文件进行跟踪,将各个模块通过 loader 和 plugins 处理,然后打包在一起。
按需加载:打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks,还可以将重复的部分单独提取出来作为 commonChunk,从而实现按需加载。把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载
4、webpack的核心概念
Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点,默认为./src/index.js
output :出口,告诉webpack在哪里输出它打包好的代码以及如何命名,默认为./dist
Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
Plugin:扩展插件,在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。
5、Webpack的基本功能有哪些?
代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
文件优化:压缩 JavaScript、CSS、html 代码,压缩合并图片等
代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件
自动刷新:监听本地源代码的变化,自动构建,刷新浏览器
代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过
自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。
6、gulp/grunt 与 webpack的区别是什么?
三者都是前端构建工具,grunt和gulp在早期比较流行,现在webpack相对来说比较主流,不过一些轻量化的任务还是会用gulp来处理,比如单独打包CSS文件等。grunt和gulp是基于任务和流(Task、Stream)的。
类似jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据, 整条链式操作构成了一个任务,多个任务就构成了整个web的构建流程。webpack是基于入口的。
webpack会自动地递归解析入口所需要加载的所有资源文件,然后用不同的Loader来处理不同的文件,用Plugin来扩展webpack功能。
7、webpack是解决什么问题而生的?
如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱,因为它们存在依赖关系,同时对于ES6+等新的语法,less, sass等CSS预处理都不能很好的解决……,此时就需要一个处理这些问题的工具。

28.MVVM模式

1、MVVM相比较于MVP,将Presenter变成ViewModel,ViewModel可以理解成是View的数据模型和Presenter的合体
2、MVVM中的数据可以实现双向绑定,即View层数据变化则ViewModel中的数据也随之变化,反之ViewModel中的数据变化,则View层数据也随之变化`
注:MVC指的是Model-View-Controller,分别代表着模型层、视图层、控制器。


29.原型链
当js试图得到一个对象的属性时,会先去这个对象的本身去寻找,如果这个对象本身没有找到这个属性,那么js就会去它构造函数的’prototype’属性中去寻找,也就是去’proto‘中寻找,如果’prototype’属性本身中依旧没有找到,’prototype’中依旧有一个‘proto’。

原型可以解决什么问题:
对象共享属性和方法
谁有原型:
函数拥有:prototype
对象拥有:proto
对象查找属性或者方法的顺序:
先在对象本身查找–>构造函数中查找–>对象的原型中查找–>构造函数的原型中查找–>当前原型中查找
原型链的最顶端是null

30.闭包
闭包就是指有权访问另一个函数作用域中的变量的函数
MDN 上面这么说:闭包是一种特殊的对象。
闭包的作用域链包含着它自己的作用域,以及包含它的函数的作用域和全局作用域。闭包的注意事项
通常,函数的作用域及其所有变量都会在函数执行结束后被销毁。但是,在创建了一个闭包以后,这个函数的作用域就会一直保存到闭包不存在为止。
我们首先知道闭包有3个特性:
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收
优点:
①保护函数内的变量安全 ,实现封装,防止变量流入其他环境发生命名冲突
②在内存中维持一个变量,可以做缓存(但使用多了同时也是一项缺点,消耗内存)
③匿名自执行函数可以减少内存消耗
闭包的缺点就是常驻内存会增大内存使用量,并且使用不当很容易造成内存泄露。
如果不是因为某些特殊任务而需要闭包,在没有必要的情况下,在其它函数中创建函数是不明智的,因为闭包对脚本性能具有负面影响,包括处理速度和内存消耗。

31.Vue和React的区别是什么?
一、核心思想不同
Vue是一个灵活易用的渐进式双向绑定的MVVM框架。
React的核心思想是声明式渲染和组件化、单向数据流,React既不属于MVC也不属于MVVM架构。
注:React的单向数据流指的是数据主要从父节点通过props传递到子节点,
如果顶层某个props改变了,React会重新渲染所有的子节点,但是单向数据流并非单向绑定,
React想要从一个组件去更新另一个组件的状态,需要进行状态提升,即将状态提升到他们最近的
祖先组件中,触发父组件的状态变更,从而影响另一个组件的显示。单向数据流的好处是能够保证
状态改变的可追溯性,假如,父组件维护了一个状态,子组件如果能够随意更改父组件的状态,那
么各组件的状态改变就会变得难以追溯
二、组件写法上不同
Vue的组件写法是通过template的单文件组件格式。
React的组件写法是JSX+inline style,也就是吧HTML和CSS全部写进JavaScript中。
三、Diff算法不同
Diff算法是一种对比算法,主要是对比旧的虚拟DOM和新的虚拟DOM,找出发生更改的节点,并只
更新这些接地那,而不更新未发生变化的节点,从而准确的更新DOM,减少操作真实DOM的次数,
提高性能。
vue对比节点,如果节点元素类型相同,但是className不同,认为是不同类型的元素,会进行删
除重建,但是react则会认为是同类型的节点,只会修改节点属性。
vue的列表比对采用的是首尾指针法,而react采用的是从左到右依次比对的方式,当一个集合只
是把最后一个节点移动到了第一个,react会把前面的节点依次移动,而vue只会把最后一个节点
移动到最后一个,从这点上来说vue的对比方式更加高效。
四、响应式原理不同
React的响应式原理
React主要是通过setState()方法来更新状态,状态更新之后,组件也会重新渲染。

Vue的响应式原理
vue会遍历data数据对象,使用Object.definedProperty()将每个属性都转换为getter和
setter,每个Vue组件实例都有一个对应的watcher实例,在组件初次渲染的时候会记录组件用到
了那些数据,当数据发生改变的时候,会触发setter方法,并通知所有依赖这个数据的watcher实
例调用update方法去触发组件的compile渲染方法,进行渲染数据。


32. rem的特点:
1、rem的大小是根据html根目录下的字体大小进行计算的。
2、当我们改变根目录下的字体大小的时候,下面字体都改变。
3、rem不仅可以设置字体的大小,也可以设置元素宽、高等属性。

33.http请求过程
浏览器发起请求-> 解析域名得到ip进行TCP连接 ->浏览器发送HTTP请求和头信息发送->服务器对浏览器进行应答,响应头信息和浏览器所需的内容-> 关闭TCP连接或保持-> 浏览器得到数据数据进行操作。

34.前端如何实现跨域?
当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域
出于浏览器的同源策略限制。
同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。
1.JSONP原理
利用script元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 数据。
但是JSONP请求一定需要对方的服务器做支持才可以。
JSONP优点是兼容性好,可用于解决主流浏览器的跨域数据访问的问题。
缺点是仅支持get方法具有局限性。
2.CORS原理
实现CORS通信的关键是服务器,需要在服务器端做一些小小的改造。
只要服务器实现了CORS接口,就可以跨源通信。
在响应头上添加Access-Control-Allow-Origin属性,指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS,并且允许的源包括了本网站,那么就不会拦截请求响应。
3.Nginx
浏览器在访问受限时,可通过不受限的代理服务器访问目标站点。
proxy代理是前端用的最多的解决跨域的方法。
即配置一台和浏览器相同端口的服务器,浏览器访问代理服务器,代理服务器向目标服务器发送请求,由于服务器之间不存在跨域问题,代理服务器就可以拿到请求数据,而后因为浏览器和代理服务器端口号一致,不存在跨域问题,因此浏览器不会拦截从代理服务器收到的数据,顺利拿到请求数据。
例如:浏览器端口号8080,目标服务器端口号5000,在vue中配置代理服务器来访问目标服务器

// vue.config.js中配置代理
devServer:{proxy:"http://localhost:5000"
}
// 使用代理
axios.get('http://localhost:8080/students').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)}
)


35.vue 中的 keep-alive
keep-alive 是 vue 中的内置组件,能够在组件切换过程中将状态保留在内存中,防止重复的渲染 DOM;
keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们;
设置了 keep-alive 缓存的组件,会多出两个生命周期钩子(activated 和 deactivated )

36.vue.nextTick()方法
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
使用:

this.$nextTick(function(){console.log(that.$refs.aa.innerText);  //输出:修改后的值})


什么时候需要用的Vue.nextTick()?
1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。
2.vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码
二、em的特点:
1、字体大小是根据父元素字体大小设置的。
四、综合
1、前端工程化理解(模块化、组件化、规范化、自动化)
JS的模块化、css的模块化、资源的模块化
从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元
HTML规范、CSS规范、JS规范、图片规范、命名规范
图标合并、持续集成、自动化构建、自动化部署、自动化测试

2、组件封装过程
建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。  
准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。  
准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。  
封装完毕了,直接调用即可。

五、扩展
1、Typescript中的内置类型 Number String Boolean Null Void Undefined
2、TS的接口是什么意思
接口是在我们的应用程序中充当契约的结构。它定义了要遵循的类的语法,这意味着实现接口的类必须实现它的所有成员。它不能被实例化,但是可以被实现它的类对象引用。无论对象是否具有特定的结构,TypeScript编译器都使用接口进行类型检查
4、nodejs搭建一个简单的http服务器过程
5、Typescript中的类的特征(继承、封装、多态性、抽象)
————————————————
版权声明:本文为CSDN博主「边关月_」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44672169/article/details/116011608

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/165246.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LC-2316. 统计无向图中无法互相到达点对数(DFS、并查集)

2316. 统计无向图中无法互相到达点对数 中等 给你一个整数 n &#xff0c;表示一张 无向图 中有 n 个节点&#xff0c;编号为 0 到 n - 1 。同时给你一个二维整数数组 edges &#xff0c;其中 edges[i] [ai, bi] 表示节点 ai 和 bi 之间有一条 无向 边。 请你返回 无法互相…

pandas写入MySQL

安装好pandas、mysql pip install pandas pip install pymysql 导入pandas、mysql import pymysql as mysql import pandas as pd 建立连接 conmysql.connect(host10.10.0.221,userroot,passwordroot,databasepandas,port3306,charsetutf8) 创建游标 curcon.cursor() 读…

vite+vue3.0 使用tailwindcss

参考资料&#xff1a; 安装 - TailwindCSS中文文档 | TailwindCSS中文网 npm install -D tailwindcss npm install postcss npm install autoprefixer npx tailwindcss init -p 生成/src/tailwind.config.js和/src/postcss.config.js配置文件 在/src/tailwind.config.js配置文件…

《动手学深度学习 Pytorch版》 9.6 编码器-解码器架构

为了处理这种长度可变的输入和输出&#xff0c; 可以设计一个包含两个主要组件的编码器-解码器&#xff08;encoder-decoder&#xff09;架构&#xff1a; 编码器&#xff08;encoder&#xff09;&#xff1a;它接受一个长度可变的序列作为输入&#xff0c;并将其转换为具有固定…

httpd服务

文章目录 httpd服务1.安装httpd服务2.开启服务&#xff0c;设置服务开机自启立马生效&#xff0c;并查看服务状态3.查看监听端口4.关闭防火墙&#xff0c;设置防火墙开机不自启立马生效&#xff1b;关闭selinux5.写一个index.html文件&#xff0c;在真机浏览器访问测试效果6.查…

vue3插件开发,上传npm

创建插件 在vue3工程下&#xff0c;创建组件vue页: toolset.vue。并设置组件名称。注册全局组件。新建index.js文件。内容如下&#xff0c;可在main.js中引入index.js&#xff0c;注册该组件进行测试。![在这里插入图片描述](https://img-blog.csdnimg.cn/a3409d2cbeec41c797d5…

linux性能分析(四)CPU篇(一)基础

一 CPU篇 遗留&#xff1a; 负载与cpu关系、负载与线程的关系? ① CPU 相关概念 1、physical 物理CPU个数 --> 一般一个实体 2、cpu 核数 3、逻辑CPU个数 逻辑核 4、超线程 super thread 技术 5、各种cpu的计算方式物理 physical CPU的个数&#xff1a; physical id逻…

【数据结构】队列(C语言实现)

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 队列 1. 队列的概念及结构…

基于侏儒猫鼬优化的BP神经网络(分类应用) - 附代码

基于侏儒猫鼬优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于侏儒猫鼬优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.侏儒猫鼬优化BP神经网络3.1 BP神经网络参数设置3.2 侏儒猫鼬算法应用 4.测试结果…

嵌入式养成计划-42----QT 创建项目--窗口界面--常用类及组件

一百零五、如何创建 QT 项目 创建工程 New Project / 文件–>新建。。 /ctrl N 选择一个模板–>Application -->Qt Widgets Application 选择创建的路径&#xff0c;以及设置文件名 下一步 输入类名&#xff0c;选择基类为 QWidget 下一步 选择这个玩意&a…

2020年亚太杯APMCM数学建模大赛A题激光标记舱口轮廓生成求解全过程文档及程序

2020年亚太杯APMCM数学建模大赛 A题 激光标记舱口轮廓生成 原题再现&#xff1a; 激光是20中的一项重要发明世纪&#xff0c;它被称为“最锋利的刀”、“最精确的尺子”和“最不寻常的光”。 激光已越来越多地应用于工业加工&#xff0c; 其中可以是就业在各种加工业务例如作…

凉鞋的 Godot 笔记 203. 变量的常用类型

203. 变量的常用类型 在上一篇&#xff0c;我们对变量进行了概述和简介&#xff0c;知识地图如下&#xff1a; 我们已经接触了&#xff0c;变量的字符串类型&#xff0c;以及一些功能。 在这一篇&#xff0c;我们尝试多接触一些变量的类型。 首先是整数类型。 整数类型 整…

Vue解决 npm -v 报错(一)

报错内容&#xff1a; npm WARN config global --global, --local are deprecated. Use --locationglobal instead. 解决方案&#xff1a; 代码&#xff1a; prefix -g 替换为&#xff1a; prefix --locationglobal 原创作者&#xff1a;吴小糖 创作时间&#xff1a;2023.1…

redis部署与管理

一、关系数据库与非关系型数据库&#xff1a; 1. 关系型数据库&#xff1a; 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。 SQL 语句&#xff08;标准数据查询语言&#xff09;就是一种…

【异步爬虫】requests和aiohttp中代理IP的使用

前言 在进行爬虫开发时&#xff0c;我们常常需要使用代理IP来隐藏自己的真实IP地址&#xff0c;以避免被一些网站限制或封禁。requests和aiohttp是两个非常常用的工具&#xff0c;本文将分别介绍如何在它们中使用代理IP&#xff0c;希望可以帮助大家更好地进行异步爬虫开发。 …

天鹰340亿(AquilaChat2-34B-16K)本地部署的解决方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

51单片机仿真软件 Proteus 8 Pro 安装步骤

51单片机仿真软件 Proteus 8 Pro 安装步骤 学习 51 单片机的时候&#xff0c;如果手头没有开发板&#xff0c;可以使用仿真软件 Proteus。Proteus 可以仿真 51 单片机及周边元器件&#xff08;例&#xff1a; LED&#xff09; 的运行情况。 可以简单认为&#xff1a;Proteus …

Windows Server服务器下的Linux子系统

Windows、Linux看似死敌一对&#xff0c;但其实微软对于开源实业还是相当支持的&#xff0c;Windows 10系统内就首次内置了一个Linux子系统(Windows Subsystem for Linux/WSL)&#xff0c;允许开发者模拟Linux环境&#xff0c;而且有需要的可以直接从Windows应用商店下载SUSE、…

《数据结构、算法与应用C++语言描述》使用C++语言实现数组双端队列

《数据结构、算法与应用C语言描述》使用C语言实现数组双端队列 定义 队列的定义 队列&#xff08;queue&#xff09;是一个线性表&#xff0c;其插入和删除操作分别在表的不同端进行。插入元素的那一端称为队尾&#xff08;back或rear&#xff09;&#xff0c;删除元素的那一…

web前端面试-- 手写原生Javascript方法(new、Object.create)

web面试题 本人是一个web前端开发工程师&#xff0c;主要是vue框架&#xff0c;整理了一些面试题&#xff0c;今后也会一直更新&#xff0c;有好题目的同学欢迎评论区分享 ;-&#xff09; web面试题专栏&#xff1a;点击此处 手动实现Object.create 通过Object.create&#…