- 博客(34)
- 收藏
- 关注
RSS订阅原创 说说你对 spa 单页面的理解，它的优缺点分别是什么？
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的Web 应用。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换 HTML 的内容，从而实现 UI 与用户的交互。由于避免了页面的重新加载， SPA 可以提供较为流畅的用户体验。得益于 ajax，我们可以实现无跳
2022-01-07 01:02:21
2493
原创 vue 的 nextTick 的原理是什么?
Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。可以分为三步理解：第一个 tick:1.首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。2. Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。第二个 tick同步任务执行完毕，开始执行异步 watcher 队列的任务，更新 DOM 。V
2022-01-07 01:00:37
367
原创 v-if和v-show的区别
他们的区别体现在三个方面:1.原理:从原理来看,v-if的原理是动态创建和销毁;v-show的原理是纯css样式的显示和隐藏如果:v-if指令是从true -> false就销毁它; 如果值从false -> true 就创建它;如果:v-show指令的值是从true -> false 就显示它 (display:none); 如果值从false ->true 就显示它 (display:block)2.性能 从性能方面来看,v-if有更高的切换开销(销毁..
2021-12-30 11:35:35
491
原创 什么是路由导航守卫
简单来说路由导航守卫就是.可以让我们对用户要跳转的路由做一次检查，符合条件的就放行，不符合条件则强制用户跳转至登录页面,说白了就时路由导航守卫是为了路由跳转之前做的检查及操作1.全局前置守卫----router.beforeEachrouter.beforeEach注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // to:要去哪个页面 // .
2021-12-25 10:30:10
3208
原创 安全问题 ：CSRF 和 XSS攻击？
CSRF（Cross-site request forgery）：跨站请求伪造。方法一、Token 验证：（用的最多） 服务器发送给客户端一个token； 客户端提交的表单中带着这个token。 如果这个 token 不合法，那么服务器拒绝这个请求。 方法二：隐藏令牌： 把 token 隐藏在 http 的 head头中。 方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。方法三、Referer 验证：Referer 指...
2021-12-24 18:27:24
91
原创 前端面试常见问题小总结2(更新中)
1.如何触发 BFC1、根元素（<html>）2、浮动元素（元素的 float 不是 none）3、绝对定位元素（元素的 position 为 absolute 或 fixed）4、行内块元素（元素的 display 为 inline-block）5、表格单元格（元素的 display 为 table-cell，HTML 表格单元格默认为该值）6、overflow 不等于 visible7、更多的触发方法参考 MDN2.BFC 的特性1、同一个 BFC 下上下
2021-12-24 18:26:21
600
原创 cookie 、localstorage 、 sessionstrorage 之间有什么区别？
1.与服务器交互区别： cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密） cookie 始终会在同源 http 请求头中携带（即使不需要），在浏览器和服务器间来回传递 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存2.存储大小区别： cookie 数据根据不同浏览器限制，大小一般不能超过 4k sessionStorage 和 lo...
2021-12-24 17:33:57
426
原创 前端面试常见问题小总结(更新中)
1.es6有哪些新特性?Es6是2015年推出的一个新的版本,这个版本相对于Es5的语法做了很多优化,例如:新增了let,constlet和const具有块级作用域,不存在变量提升的问题,简化了定义函数的写法,同时可以巧用箭头函数的this (注意箭头函数本身没有this取决于外部的环境 ) ; 新增了promise解决了回调地狱的问题, 新增了模块化,利用import,export 来实现导入, 导出,新增了结构赋值,Es6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(..
2021-12-22 19:55:57
614
原创 vue的生命周期详解
1.什么是vue的生命周期：简单理解 ：vue 实例从创建到销毁的过程就是 vue生命周期2.vue的声明周期常见的主要分为4大阶段8大钩子函数 : 一阶段： 创建 前/后 （前） -beforeCreate 在生命周期函数执行的时候，data 和 method 还没有初始化 （后） -created 在生命周期函数执行的时候， data 和method 已经初始化完成 二阶段 ： 渲染 前/后 ...
2021-12-22 14:44:04
379
原创 跨域的几种解决方案
1.jsonp 【前端后端实现】jsonp: 利用<script>标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。声明一个回调函数，其函数名(如show)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。创建一个<scrip..
2021-12-21 15:58:37
156
原创 token过期 如何使用refresh_token实现无感刷新页面？
1.token过期根据refresh_token获取新的token 重新获取数据2.创建一个新的axios实例 【使用request防止再次进入请求拦截和请求响应而进入死循环】3.根据请求相应的响应值 是不是401 是：说明token过期,然后进行判断store中的 user :{token:'*****',refresh_token:'******'}中的 refresh_token和user对象是否存在 ，如果不存在说明之前没有登录过，直接去登录4.使用新创建的axios 实例对象 requ
2021-12-21 15:55:46
1652
原创 computed 和watch 的区别是什么？
watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。注意: 除此之外，有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。watch也可以检测computed属性。computed计算属性就是为了简化template里面模版...
2021-12-21 15:50:41
193
原创 什么是 Vuex
Vuex根据我的理解，是一个开发模式或者说框架。vuex通过状态(数据源)集中管理驱动组件的变化Vuex有五个属性，分别是以下几点：一、state:state 为单一状态树，在 state 中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在 Vue.js 的组件中才能获取你定义的这个对象的状态。 二、getter:getter 有点类似 Vue.js 的计算属性，当我们需要从 store 的 state 中派生出一些状态，那么我们就需要使用 getter，gett..
2021-12-18 23:01:50
81
原创 与 keep-alive 的有关的生命周期函数
keep-alive 是什么 :我们在开发 Vue 的项目中,大部分组件是没有必要多次渲染的,所以 Vue 提供了一个内置组件 keep-alive 来缓存组件内部状态，避免重新渲染生命周期函数：在被 keep-alive 包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。1、activated 钩子：在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。2、deactivated 钩子：组件被停用（离开路由）时调用。使用 kee
2021-12-18 22:54:53
846
原创 promise是什么？它有哪些作用？
Promise 其实是异步编程的一种解决方案.简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，可以从改对象获取异步操作的消息。它可以解决回调地狱的问题，也就是异步深层嵌套问题.catch() 获取异常信息 .finally() 成功与否都会执行（不是正式标准） /*1. Promise基本使用: 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参..
2021-12-16 20:26:47
2543
原创 this 的指向有哪些
1、普通函数中的this指向window2、定时器中的this指向window3、箭头函数没有this,它的this指向取决于外部环境、指向最近的的函数4、事件中的this指向事件的调用者5、 构造函数中this和原型对象中的this,都是指向构造函数new 出来实例对象6、类 class中的this 指向由constructor构造器new出来的实例对象7、自调用函数中的this 指向window...
2021-12-16 20:14:13
942
原创 常用的数组方法有哪些？
一 , splice( ) 方法 :方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。例: let arr7 = [4, 2, 43, 343, 232, 33]; let res7 = arr7.splice(2, 1, 34, 33) //第一个是索引 第二个是删除的个数 第三...
2021-12-15 12:07:30
1130
原创 cookie 、localstorage 、 sessionstrorage 之间有什么区别？
一.与服务器的交互: 1. cookie是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密) 2. cookie 始终会在同源 http 请求头中携带(即使不需要它), 也会在浏览器和服务器之间来回 传递 3. sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存二.存储大小: 1. cookie 数据根据不同浏览器限制,大小一般不能...
2021-12-13 20:30:36
934
原创 常见的继承有哪些？
一.原型链的继承特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！缺点：1、新实例无法向父类构造函数传参。 2、继承单一。 3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原 型属性也会被修改！）二、借用构造函数继承重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制）） 特点：1、只继承了父类构
2021-12-13 20:18:24
299
原创 闭包,手写一个闭包函数
闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。function fn() { var num = 10; function fun() { console.log(num); } return fun;}var f = fn();f();作用：延长变量作用域、在函数的外部可以访问函数内部的局部变量，容易造成内层泄露，因为闭包中的局部变量永远不会被回收...
2021-12-13 20:15:07
433
原创 什么是递归
递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数优点：结构清晰、可读性强缺点：效率低、调用栈可能会溢出，其实每一次函数调用会在内存栈中分配空间，而每个进程的栈的容量是有限的，当调用的层次太多时，就会超出栈的容量，从而导致栈溢出。->性能...
2021-12-13 20:13:11
131
原创 路由中的钩子函数
全局路由勾子:beforeEachafterEachbeforeResolve路由所对应组件勾子（路由配制中的component所对应组件）beforeRouteEnter：进入前，进入路由所对应组件前，在beforeCreate前产生的，它不能使用实例化对象thisbeforeRouteUpdate:更新前，路由更新了，但是路由所对应组件不变，它是更新前触发，更新没有完成，如果需要获取更新完成后信息，要加$nextTickbeforeRouteLeave:离开前，切换页面离开前
2021-12-08 21:18:49
1010
原创 组件的传值
1.父传子: 传: 子组件标签 属性名=值 收: props:{ 属性名:{ type:类型，多个类型 [Object,Array,String], default:基本数据类型，直接写 复杂数据类型：()=>{return 复杂数据类型} required:true, // 必填 ...
2021-12-08 21:06:24
500
原创 路由的传值
基本传值: 传： this.$router.push('/path地址?参数名=参数值&参数2=值2') this.$router.push({ path:'/path地址', query:{ 参数名:值 、。。。 } }) 收 this.$route.query.参数名 动态路由匹配: 配制路由...
2021-12-08 21:00:59
878
原创 移动端rem适配
1安装 amfe-flexible插件 yarn add amfe-flexible npm i amfe-flexible 在main.js导入 import "amfe-flexible" 安装postcss-pxtorem yarn add postcss-pxtorem@5.0.0 配制 创建postcss.config.js(加载css时使用)module.exports={ ...
2021-12-08 08:31:24
89
原创 实现国际化,和国际化组件封装
vue-i18n使用使用 1：安装 yarn add vue-i18n2:导入 src/lang/index.js import VueI18n from 'vue-i18n'3:注册 import Vue from 'vue' Vue.use(VueI18n)4:实例化 const i18n=new VueI18n({ locale:'当前语言的标识'， // en:英文 zh:中文 messages:{ ...
2021-12-07 17:09:45
184
原创 bus兄弟组件传值
总共四步:1.在man.js中 Vue.prototype.$bus=new Vue()2.监听: this.$bus.$on(事件名,(参数值)=>{})3.触发: this.$bus.$emit('事件名',实参)4.注意销毁累加:this.$bus.$off('事件名')
2021-12-01 15:38:26
518
原创 v-module ,v-bind, v-on
用于组件的 v-module, 实现双向绑定1.v-model指令用来在表单 \ \ 元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理。（ps：语法糖：指对计算机添加一些语法，不影响语法的表达功能，但极大的提高了程序的可读性）2.v-bind主要用于相应更新HTML元素的属性，将一个或多个属性或者一个组件的prop动态绑定到表达式。v-on指令用于监听D
2021-11-28 23:48:44
709
原创 创建一个Vue
Vue 帮我省去了建立webpack包 的大部分时间,相当于是一个快速开发工具等.Vue优势总结:花更少的时间,干更多的或.加快开发网的站速度.不说了 上步骤了.1.安装 Vue /cli 安装把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程全局安装命令 yarn global add @vue/cli 或者 npm install -g @vue/cli打开终端注意: 如果半天...
2021-10-21 19:24:20
260
2
原创 v-model ,vue指令
这里例举了两个 v-model的例子 :1.语法:v-model.修饰符="vue数据变量"目标: 把value属性和vue数据变量, 双向绑定到一起语法: v-model="vue数据变量"双向数据绑定:数据变化 -> 视图自动同步视图变化 - > 数据自动同步演示:用户名绑定 -vue 内部是 mvvm 设计模式例:<template> <div> <!-- v-model:是实现vuejs变量和表单
2021-10-20 20:40:07
200
2
原创 v-for , vue指令
一.结构: 可以遍历数组 / 对象 / 数字/字符串(可遍历结构) v- for 可以理解成 把一组数据,渲染成一组DOMv-for 语法:1.v-for="(值, 索引) in 目标结构"2.v-for="值 in 目标结构"例:<template> <div id="app"> <div id="app"> <!-- v-for 把一组数据,渲染成一组 DOM --> ...
2021-10-20 19:59:10
100
原创 node 模块化
模块化的来源在 es6 之前JS 是没有模块化功能的,es5中不支持模块化,通常我们都是用一个html 文件引入多个 JS文件,这样很容易造成变量污染, 代码无法维护什么是模块化模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元一个js文件可以引入其他的js文件，能使用引入的js文件的中的变量、数据，这种特性就称为模块化。nodejs是支持模块化的。模块化的规范概念:概念：拆分模块和组合模块时，所遵守的...
2021-10-08 16:40:19
124
1
原创 javaScript 基础组成以及如何声明变量
1.javaScript 组成分为三部分: ECMAScript - JavaScript的核心 BOM - 浏览器对象模型 DOM - 文档对象模型(1)ECMAScript: 描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。(2)通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。一套操作浏览器功能的API(3)DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操...
2021-10-08 15:10:38
128
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人