
前端面试题
␆␡␂␇
这个作者很懒,什么都没留下…
展开
-
axios的封装
1.安装axiosnpm install axios; // 安装axios复制代码2.目录创建一般我会在项目的src目录中,新建一个network文件夹,作为我们的网络请求模块,然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios,api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法。// 在http.js中引入axiosimport axios from 'axios'.转载 2021-05-04 22:22:42 · 113 阅读 · 0 评论 -
vuex的核心概念和运行机制
Vuex有几个核心的概念 state:提供一个响应式数据; getter:借助Vue的计算属性computed来实现缓存; mutation;更改state方法; action:触发mutation 方法; module:Vue.set 动态添加state 到响应式数据中; vuex 中核心原理:通过vue 实例,将state数据赋值给data(){return { ?state:state}} commit 实际上就是执行mutations 中的某个方法原创 2021-05-04 22:07:57 · 184 阅读 · 0 评论 -
vue-router钩子函数和执行顺序
全局前置守卫你可以使用router.beforeEach注册一个全局前置守卫:const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。每个守卫方法接收三个参数: to: Route: 即将要进入的目标路由对象 fr...转载 2021-05-04 21:59:23 · 560 阅读 · 0 评论 -
$nextTick
$nextTick(操作DOM的时候会用到)Vue在观察数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一事件循环中发生的所有数据改变 在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作 然后,在下一个事件循环tick中,Vue刷新队列并执行实际(已去重的)工作。所以,如果你用一个for循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,这固然是个很大的开销。<div> <button @click="sh原创 2021-05-04 21:47:26 · 125 阅读 · 0 评论 -
vue修改数据页面不更新的原因和解决方案
对象属性的添加或删除由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。解决办法:使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上Vue.set(vm.someObject, 'b', 2)或者this.$set(this.someObject,'b',2)(这也是全局 Vue.set 方法的别名)异步更新队列Vue 异步执行 D...原创 2021-05-04 21:38:42 · 1262 阅读 · 0 评论 -
v-for中的key值的作用
v-for中的key值的作用总结当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。示例<!--注意:v-for循环的时候,key属性只能使原创 2021-05-04 21:25:44 · 260 阅读 · 0 评论 -
v-if和v-for的优先级
首先:永远不要把v-if和v-for同时用在同一个元素上。其次:当 Vue 处理指令时,v-for比v-if具有更高的优先级1.过滤一个列表中的项目 (比如v-for="user in users" v-if="user.isActive")。在这种情形下,请将users替换为一个计算属性 (比如activeUsers),让其返回过滤后的列表。将:<ul> <li v-for="user in users" v-if="user.is...原创 2021-05-04 21:16:50 · 158 阅读 · 0 评论 -
为何组件的data必须是一个函数
vue实例中的data属性既可以是一个对象,也可以是一个函数。为什么组件中data必须是一个函数而不是对象呢?组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,如下面这个例子:首先创建一个名字为counter的组件,data函数中返回一个外部定义的对象的值原创 2021-04-29 21:56:33 · 217 阅读 · 0 评论 -
JS常用字符串方法
先定义两个字符串varstr="asdfnodfnobwdk";varstr1='ABCDE'indexOf (要查找的字符,开始的位置), 返回指定字符在字符串中的位置,如果找不到就返回-1,开始的位置是索引号如果只有一个参数,默认从下标0开始查找 console.log(str.indexOf('d'))//结果是 2 console.log(str.indexOf('d',5));//结果是 6lastIndexOf(), 返回某个指定的子字符串在字符...原创 2021-04-06 11:00:19 · 175 阅读 · 0 评论 -
vue双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。1、实现一个数据监听器 Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2、实现一个指令解析器 Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数3、实现一个 Watcher,作为连接 Observer 和原创 2021-04-29 20:04:11 · 171 阅读 · 0 评论 -
组件传值
vuex处理组件之间的数据交互如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候才有上面这一些方法可能不利于项目的维护,vuex的做法就是将这一些公共的数据抽离出来,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。路由传参路由对象如下图所示:在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-link>标签this .$router.push({ name: .原创 2021-04-24 18:33:58 · 521 阅读 · 0 评论 -
兄弟组件通信
在src中新建一个Bus.js的文件,然后导出一个空的vue实例定义一个点击按钮,点击发送组件B里的数据在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件,数据是以$emit()的参数形式来传递<template> <div class="A"> <button @click="add">A按钮</button> </div></template><.原创 2021-04-24 17:02:30 · 148 阅读 · 0 评论 -
vue子传父
子传父子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听1.在子组件中创建一个按钮,给按钮绑定一个点击事件2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数<template> <div class="son"> <button @click="sendTOParent"原创 2021-04-23 19:58:49 · 206 阅读 · 0 评论 -
vue父传子
父传子子组件在props中创建一个属性,用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性父组件<template> <div class="father"> <son :a="value"></son> </div></template><script>import son from "./son"; //引原创 2021-04-23 18:47:53 · 112 阅读 · 0 评论 -
async/await是什么?
async函数,就是Generator函数的语法糖,它建立在Promises上,并且与所有现有的基于Promise的API兼容1.Async-声明一个异步函数(asyncfunctionsomeName(){...})2.自动将常规函数转换成Promise,返回值也是一个Promise对象3.只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数4.异步函数内部可以使用await1.Await-暂停异步的功能执行(varresult=awai...原创 2021-04-18 19:30:06 · 104 阅读 · 0 评论 -
聊一聊HTTP的状态码有哪些?
1XX信息,服务器收到请求,需要请求者继续执行操作100 Continue 继续。客户端应继续其请求 101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议,例如,切换到HTTP的新版本协议2XX成功,操作被成功接收并处理200OK.表示从客户端发来的请求在服务器端被正确处理 201Created请求已经被实现,而且有一个新的资源已经依据请求的需要而建立 202Accepted请求已接受,但是...原创 2021-04-12 20:55:24 · 131 阅读 · 0 评论 -
js常用鼠标键盘事件
一般事件 事件 描述 onClick 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick 鼠标双击事件 onMouseDown 鼠标上的按钮被按下了 onMouseUp 鼠标按下后,松开时激发的事件 onMouseOver 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove 鼠标移动时触发的事件 onMouseOut 当鼠标离开某对象范围时触发的事件 onKeyPress 当键盘上的原创 2021-04-11 20:05:14 · 142 阅读 · 0 评论 -
mouseenter、mouseleave与mouseover、mouseout的区别
mouseenter、mouseleave与mouseover、mouseout都是处理鼠标的移入移出事件二者的本质区别在于,mouseenter、mouseleave不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover、mouseout就会被它的子元素影响到,在触发子元素的时候,mouseover、mouseout会冒泡触发它的父元素 (想要阻止mouseover、mouseout的冒泡事件就用mouseenter、mouseleave)共同点:当二者都没有子元素时,二者原创 2021-04-09 15:55:13 · 455 阅读 · 0 评论 -
堆和栈 数据类型
堆和栈堆栈空间分配区别: 1、栈:由操作系统自动分配释放存放函数的参数值、局部变量的值等。简单数据类型存放到栈里面 2、堆:存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。简单数据类型的存储方式值类型变量的数据直接存放在变量(栈空间)中复杂数据类型的存储方式引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中常见的基本数据类型:Number、String 、Boolean、Null和Undefined。基本数据类型是..原创 2021-03-31 21:40:26 · 1053 阅读 · 1 评论 -
vue生命周期
1.创建beforeCreate() 创建前的阶段,这个时候data中的数据,还未定义,所以不能使用created() 最早开始使用 data和methods中数据的钩子函数2.挂载beforeMount() 指令已经解析完毕内存中已经生成dom树,还没有渲染到本地mounted() dom已经渲染完毕,最早可以操作DOM元素钩子函数3.更新beforeUpdate() 当data的数据发生改变会执行这个钩子 内存更新,但是DOM节点还未更新updated() 数据更新完成以原创 2021-04-28 21:43:37 · 173 阅读 · 0 评论 -
v-if和v-show的区别及使用场景
1、当条件为真的时候 没有区别 当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏,v-show通过css中的display属性来控制2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换...原创 2021-04-28 21:40:28 · 332 阅读 · 0 评论 -
vue.js是什么?
Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。...原创 2021-04-28 21:23:02 · 101 阅读 · 0 评论 -
null和undefined的区别是什么?
null 表示为空,代表此处不应该有值的存在,一个对象可以使null,代表是个空对象,而null本身也是对象。undefined 表示“不存在”,JavaScript是一门动态类型语言,成员除了表示存在的空值外,还有可能根本就不存在(因为存不存在只在运行期才知道),这就是undefined的意义所在。...原创 2021-04-18 19:08:47 · 244 阅读 · 0 评论 -
jsonp原理
jsonp原理利用动态创建一个script标签并利用它的src属性向服务器发送一次HTTP请求,并提前声明好一个回调函数,回调函数的函数名利用callback请求参数传递给后端。后端接收到来自前端的请求后,获取callback请求的请求参数并拼接一个调用函数的JS代码段并将要返回给前端的数据以实参的形式存在。前端接收到来自后端的响应后,会将后端的返回内容当做JS代码来执行即调用一个函数,并用一个形参来接收后端向要传递过来的数据。...原创 2021-04-08 11:28:02 · 69 阅读 · 0 评论 -
什么是跨域
跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制跨域解决方案Jsonp, CORS, 代理,反向代理,哈希处理跨域,a链接处理跨域原创 2021-04-08 11:25:58 · 93 阅读 · 0 评论 -
GET请求和POST请求的区别
传参方式:get请求是通过URL问号传参的方式post请求是通过直接发送数据的方式传递数据的大小:由于浏览器地址栏长度限制, get请求无法传输过大的2k数据post没有这种限制功能:get更多的是用来向服务器请求数据post更多是用来向服务器提交数据 JSON FROM BUFFER安全性url传参 是明文传输 安全性相对较差POST的安全性比GET的高PUT 语义化 修改DELETE 语义化 删除...原创 2021-04-08 11:08:52 · 131 阅读 · 0 评论 -
什么是同源策略
同源策略 是由NetScape提出的一个著名的安全策略,它是浏览器最核心也最基本的安全功能,所谓的同源,指的是协议,域名,端口相同。浏览器处于安全方面的考虑,只允许本域 名下的接口交互,不同源的客户端脚本,在没有明确授权的情况下,不能读写对方的资源...原创 2021-04-08 11:19:59 · 138 阅读 · 0 评论