- 博客(37)
- 收藏
- 关注
RSS订阅原创 Jsonp的原理
ajax 请求受同源策略影响，不允许进行请求，我们利用 script 标签的 src 属性不受同源策略的约束，利用这个特性jsonp需要以下步骤：1.动态创建<script></script>(document.createElement('script'))2.设置src 属性，(src中要包含参数callback=fn)进行跨域请求3.将 <script></script>添加到页面中执行 （body.appendChild('scr.
2022-05-06 11:26:43
151
原创 数据判断类型
数据的判断类型有四种方式： typeof、instanceof、constructor、objece.prototype.toString.calltypeof: 检测数据类型会返回一个对应的数据类型的小写字符 引用类型：Array、objecr、Data、regExp。 不能用typeof来检测。都会返回object小写字符instanceof：除了typeof我们还可以用instanceof。instanceof需要指定一个构造函数，用它来判断这个构造...
2022-05-05 23:20:58
378
原创 什么是作用域
1.作用域：作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域全局作用域就是Js中最外层的作用域函数作用域是js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套Es6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）2.自由变量：当前作用域外的变量都是自由变量，作用域链就是自己没有这个变量就从上一级作用域查找，直到找到为止，直到找到顶层window，没有的话就报错3.变量提升:每个var声明的变量，f..
2022-05-05 19:03:31
2805
原创 原型和原型链
1. prototype每个函数都有一个prototype属性，被称为显式原型，里面包含了这个构造函数公共的方法2._ _proto_ _每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4. 原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__p..
2022-05-05 18:42:15
145
原创 Javascript本地存储的⽅式有哪些？区别及应用场景
javaScript 本地存储（也称本地缓存）的⽅法我们主要讲述以下四种： cookie sessionStorage localStorage indexedDB cookie Cookie ，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。 是为了解决 HTTP 无状态导致的问题 作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于 控制 co.
2022-05-03 22:21:44
888
原创 new操作符具体干了什么？
在 JavaScript 中， new 操作符⽤于创建⼀个给定构造函数的实例对象new 的实例可以访问构造函数函数里的属性也能访问 原型上的方法创建⼀个新的对象 obj将对象与构建函数通过原型链连接起来将构建函数中的 this 绑定到新建的对象 obj 上根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理...
2022-05-03 10:30:47
284
原创 Ajax原理是什么？如何实现？
AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML ，是⼀种创建交互式⽹⻚应 ⽤的⽹⻚开发技术，可以在不重新加载整个⽹⻚的情况下，与服务器交换数据，并且更新部分⽹⻚ Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后 ⽤ JavaScript 来操作 DOM ⽽更新⻚⾯ 实现 Ajax 异步交互需要服务器逻辑进⾏配合，需要完成以下步骤： 1. 创建 ..
2022-05-03 10:25:45
3367
原创 数组的常用方法有哪些？
数组基本操作可以归纳为 增、删、改、查，需要留意的是哪些⽅法会对原数组产⽣影响，哪些⽅法不会增 下⾯前三种是对原数组产⽣影响的增添⽅法，第四种则不会对原数组产⽣影响 1 .push() 2. unshift() 3. splice() 4. concat()删 下⾯三种都会影响原数组，最后⼀项不影响原数组： 1. pop() 2. shift() 3. splice() ...
2022-05-02 11:44:16
175
原创 promise是什么？
promise 是 es6 提供的一种异步解决方案， 就是把异步操作换了一种写法从之前的嵌套回调函数 变成了链式的写法promise 本身其实就是一个容器 里面放异步的代码 这样就可以让这个异步的代码执行.then .catch 的操作1.1 对 promise 的理解promise 是 es6 提供的一种异步解决方案， 就是把异步操作换了一种写法从之前的嵌套回调函数 变成了链式的写法1.2 什么是 promise?通过 promise 能够解决什么问题?promise
2022-04-28 11:53:05
101
原创 多环境变量
一般分为开发环境和生产环境development 开发production 生产（上线）怎么配置多环境变量首先建立两个文件 在根目录.env.dev里面写上 NODE_ENV="development".env.prod里面写上 NODE_ENV="production"这样我们可以通过 process.env.NODE_ENV 这个变量来判断当前的环境比如我们可以通过判断不同的环境 在 axios 请求的时候设置不同的 baseURL在开发的时候使用测试
2022-04-27 16:20:09
201
原创 组件传值的八种方式
1. 父传子- 首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受 在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型（type）默认值（default）以及是否必填（required）2. 子传父首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收.
2022-04-27 16:17:46
4632
原创 路由导航守卫扩展
我理解的导航守卫 就是一座房子的保安 只有保安允许了才能访问页面之前说三种六个 还有一个用的不是很多的全局守卫 叫做全局解析守卫 beforeResolve导航守卫一共有三种全局的守卫 守卫所有的页面beforeEach 路由前置守卫beforeResolve 路由解析之前afterEach 路由离开全局守卫 beforeEach 和 beforeResolve 他们两个都会在路由跳转前就执行 参数都是 to from next他们两个的区别 执行的时机不一.
2022-04-27 10:35:42
66
原创 Vue.extend
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。可以理解为创建子组件的 可以用 mount 或者 el 指定这个子组件挂载到哪里
2022-04-27 10:30:28
768
原创 mixin 混入
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，出现冲突的时候以组件优先比如，生命周期函数就会合并 但是如果组件和混入有相同的变量的时候 会以组件的优先全局混入混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，所有的实例都会触发...
2022-04-27 10:29:08
670
原创 Vue.use 是⼲什么的？
vue.use 是用来安装 Vue.js 插件。这个插件可以是一个组件也可以是一个函数，插件里要有一个 install 方法，install 方法调用时，他的第一个参数就是 Vue 在调用 vue.use 方法的时候就会执行 Vue.install 方法该方法需要在调用 new Vue() 之前被调用。...
2022-04-27 10:26:08
494
原创 组件写 name 有啥好处？
增加 name 属性，可以实现组件递归调⽤自身，调用的时候用的就是 name 名字可以表示组件的具体名称，⽅便调试和查找对应的组件 比如说 keep-alive 的 include 和 exclude 就是通过组件的 name 属性区分谁缓存谁不缓存的...
2022-04-27 10:24:44
346
原创 diff 算法
diff 算法就是对虚拟 dom 进行对比，并返回一个 patch 对象，这个对象的作用是存储两个节点不同的地方，最后用 patch 里记录的信息去局部更新真实的 domdiff 算法的步骤1.js 对象表示真实的 dom 结构，就是我们说的生成一个虚拟 dom，再用虚拟 dom 构建一个真的 dom 树，放到页面中。 2.状态改变的时候生成一个新的虚拟 dom 跟旧的进行对比，这个对比的过程就是 diff 算法，通过 patch 对象记录差异 3.把记录的差异用在第一个虚拟 dom 构建的真实
2022-04-27 10:23:41
380
原创 什么是虚拟dom
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题.在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom如果组件内有响应的数据，数据发
2022-04-27 10:21:31
1502
原创 vue 中 data 发生变化,视图不更新如何解决?(必问) 过一下
在 vue2 中 vue 实例的 data 数据是响应式 的 就是数据变了 视图也会跟着变，如果给某一个 data 新添加了一个字段 这个新添加的字段因为 js 的限制不响应，需要使用 this.$set 方法代替原本的普通添加方法 就能实现响应，这个方法的三个参数 是给谁添加 添加的字段 初始值 如果不是在组件中 用这个方法 那么就用 Vue.set...
2022-04-25 21:38:31
323
原创 说⼀下 vue 和 jquery 的区别
⾸先呢 jquery 他是⽤ js 封装的⼀个类库,主要是为了⽅便操作 dom 元素,⽽ vue 他是⼀个框架,并且呢,他会从真实 dom 构建出⼀个虚拟的 dom 树,通过 di!算法渲染只发⽣改变的 dom 元素,其他的相同的 dom 元素不⽤在重新渲染. ⽽使⽤ jquery 去改变 dom 元素的时候,即使有相同的 dom 元素也会重新渲染, jq 重点操作 dom，而 vue 重点操作数据。以上就是我对 vue 和 jquery 区别的理解....
2022-04-25 21:37:21
633
原创 axios 拦截器
拦截器有两种 一个是请求拦截一个是响应拦截拦截器不需要手动调用而是每次发送 http 请求的时候都会自动触发我们一般在请求拦截中 放全局的 loading 和 token在响应拦截中关闭全局的 loading 和对 token 进行过期处理 还可以处理错误编码字典...
2022-04-25 21:36:33
48
原创 axios 封装
跨域是浏览器的跨域 不符合 域名 协议 端口号一样（同源策略） 的请求都会出现跨域的问题跨域的解决方法最多的情况是后端处理跨域前端的跨域服务器代理jsonpvue 中是 proxy 代理实现跨域vue 的跨域用 proxy 实现...
2022-04-25 21:34:35
51
原创 什么是跨域
跨域是浏览器的跨域 不符合 域名 协议 端口号一样（同源策略） 的请求都会出现跨域的问题跨域的解决方法最多的情况是后端处理跨域前端的跨域服务器代理jsonpvue 中是 proxy 代理实现跨域vue 的跨域用 proxy 实现...
2022-04-25 21:30:49
39
原创 slot 插槽
⾸先呢,所谓的插槽就是⼀个占位符,将⾃定义组件的内容展示出来.我们知道⾃定义的组件⾥⾯如果写内容的话,⻚⾯是不会显示出来的,如果我们想让⾃定义组件⾥⾯的内容显示出来,我们就需要使⽤ slot 的插槽.⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽. 我们⽤的⽐较多的具名插槽和匿名插槽,具名插槽需要所有 slot 标签上指定name 属性,⽽在对应标签上添加# 属性指定名字.在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽,以上就是我对插槽的理解.作用域插槽是把子组件里的数据传到父组件
2022-04-25 21:29:21
43
原创 过滤器 filter
所谓的 vue 过滤器就是将数据进⾏⼆次处理,得到我们想要的结果数据vue 的过滤器分为两种,第⼀种是全局过滤器,通过 vue.filter 来进⾏定义,第⼆种是局部过滤器,需要定义在组件内部，用 filters 过滤项⽬中我们通过过滤器将后台返回的状态 0 和 1 转化为⽀付或者未⽀付 还有对时间格式进行过滤vue3 中没有过滤器了...
2022-04-25 21:13:18
38
原创 keep-alive的理解
keep-alive 是 vue 内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数据。那么就可以利⽤ keep-alive 来实现被缓存的组件 切换的时候不会触发创建和销毁的钩子函数 而是会触发跟 keep-alive 相关的 activated（激活） deactivated（停用）这两个钩子函数keep-alive 标签 有 incl
2022-04-25 21:10:19
242
原创 常用的修饰符
.trim 去除⾸尾多余的空格.stop 阻⽌事件冒泡.once 只渲染⼀次.self 事件只作⽤在元素本身.number 将值转化为 number 类型.capter 组件之间捕获.prevent 阻⽌元素的默认⾏为.native 事件穿透,让我们可以在⾃定义组件上触发原生的事件...
2022-04-25 21:06:52
47
原创 $nextTick⽅法有什么作用?
⾸先呢,nextTick 也叫做异步更新队列方法 而nextTick 方法的主要作用就是等待dom元素加载完毕之后才会执行的回调函数 我们经常会在 nextTick⽅法⾥⾯获取dom元素nextTick在 dom 更新之后执行的延迟回调因为 vue 的 dom 更新是异步的 所以 当 dom 还未更新的时候我们无法拿到最新的 dom 来用放在 nextTick 里的代码 就会在 dom 更新之后执行 就能拿到最新的 dom 来用了...
2022-04-24 10:40:53
311
原创 vue组件通信
1.父传子首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型（type）默认值（default）以及是否必填（required）2.子传父首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了
2022-04-24 10:37:41
47
原创 methods， computed 和 watch 的区别
1. methods 就是方法 我们写的点击事件等各种事件都放在 methods 里2.计算属性 computed 计算属性 有缓存功能就是当跟他有关的值发生变化的时候才会重新计算 还有一个特点就是必须要有 return 值 return 就是把计算的结果 return 出去3.watch 可以监听 数据和路由的变化watch 监听路由的变化监听路由的话就是监听 $router js watch: { $route: { handler(newval...
2022-04-24 10:32:11
556
原创 路由导航守卫
路由的导航守卫 又叫做路由的钩子函数（生命周期函数）就是在跳转页面的 时候把 路由拦下来 做一些操作 再放行一共有三种第一种是全局守卫beforeEach 路由进入之前afterEach 路由进入之后第二种 组件内守卫beforeRouteEnter 路由进入之前beforeRouteUpdate 路由更新之前beforeRouteLeave 路由离开之前第三种独享守卫beforeEnter 路由进入之前有三个参数to from nex
2022-04-24 10:28:52
1389
原创 vue生命周期
1.什么是生命周期函数 生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发1.1 生命周期函数有哪些 创建阶段 beforeCreate 实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this created 创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了 beforeMount 组件挂载之前 mounted组件挂载之...
2022-04-22 11:17:48
241
原创 路由的模式 以及原理 区别
vue 的路由模式⼀共有两种,分别是哈希和 history.他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端的 url 和后端发起请求的 url 不⼀致的话,会报 404 错误,所以使⽤ history 模块的话我们需要和后端进⾏配合.history 的原理就是利⽤ html5 新增的两个特性⽅法,分别是 pushState 和 replaceState 来完成的上就是我对 vue 路由模式的理解...
2022-04-22 11:07:38
429
原创 vuex 的执行机制
在项⽬当中如果要改变 state 的状态,我们⼀般是在组件⾥⾯调⽤ this.$store.dispatch ⽅式来触发 actions ⾥⾯的⽅法,在 actions⾥⾯的⽅法通过 commit 来调⽤ mutations ⾥⾯定义的⽅法来改变 state,同时这也是 vuex 的执⾏机制...
2022-04-22 11:00:38
550
原创 vuex 的理解
vuex 是 vue 的状态管理工具 管理项目中的公共数据 能够在所有的组件中 vuex一共有五大核心 state 存放公共数据的地方 通过 this.$store.state.xxx调用 mutations 修改 state 的地方 只有这里能修改 通过this.$store.commit 调用 getters 相当于vue的计算属性 通过 this.$store.getters 调用 actions 执行异步操作的地方 通过 this.$st...
2022-04-22 10:56:24
517
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人