- 博客(42)
- 收藏
- 关注
RSS订阅原创 vue3 setup函数的理解
定义：1.setup是处于beforecreate和created生命周期间的函数；2.setup是组合式api的入口；3.setup函数中定义的变量和方法都是需要return出去的，不然没有办法在模板中使用；注意事项;1.因为在setup中尚未执行created初始化完成，所以无法使用data，methods（vue2）；2.因为在setup中无法使用data，methods，所以为了避免错误使用，vue将setup函数中的this转化成undefined；3.setup是同步的，不能异步使用；其他：se
2022-08-31 16:39:08
584
2
原创 居中为什么要使⽤transform（为什么不使⽤marginLeft/Top）
【代码】居中为什么要使⽤transform（为什么不使⽤marginLeft/Top）
2022-08-31 16:31:24
172
原创 [] == ![]发生了什么？结果又是什么
1.因为!运算符的优先级比较高，所以表达式右侧先运行![]，得出false，表达式变为[] == false2.强制将false转换为0，表达式变为[] == 03.将[]强制转换为原始类型后为""，表达式变为"" == 04.将""转换为Number类型，表达式变为0 == 0两侧类型相同，直接返回0 === 0的结果true...
2021-07-02 11:30:08
95
原创 null到底是不是对象？为什么？
null不是对象，在js最初版本使用32位系统，会使用低位存储变量的类型信息，而null也是以000开头，然后null 表示全0，所以将他错误的判断为object
2021-07-02 11:19:25
674
原创 深入理解事件循环
任务队列( Event Queue )所有的任务可以分为同步任务和异步任务，同步任务，顾名思义，就是立即执行的任务，同步任务一般会直接进入到主线程中执行；而异步任务，就是异步执行的任务，比如ajax网络请求，setTimeout 定时函数等都属于异步任务，异步任务会通过任务队列的机制(先进先出的机制)来进行协调。具体的可以用下面的图来大致说明一下：同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入任务队列。主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行
2021-06-28 16:37:55
134
原创 前端安全之XSS和csrf攻击
前端安全之XSS和csrf攻击1.Csrf攻击原理(跨站请求伪造):从上图可以看出，要完成一次CSRF攻击，受害者必须满足两个必要的条件：（1）登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）（2）在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。我们在讲CSRF时，一定要把上面的两点说清楚。2.Csrf如何防御方法一、Token 验证：（用的最多）（1）服务器发送给客户端一个token；
2021-06-28 10:23:45
164
原创 React hooks与class 的比较
React hooks与class 的比较class相比函数式组件的优势：class组件内部可以定义自己的state，用来保存组件自己内部的状态；函数式组件不可以，因为函数每次调用都会产生新的临时变量。class组件有自己的生命周期，可以在对应的生命周期中完成自己的逻辑；比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次；函数式组件在学习hooks之前，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求。class组件可以在状态改变时只重新执行r
2021-06-21 11:15:03
1130
原创 JS 中构造函数和普通函数的区别
JS 中构造函数和普通函数的区别这是一个普通函数：function fn(){alert("hello sheila");}fn();//alert:hello sheila不需要用new关键字调用可以用return语句返回值function fn(a,b){return a+b;}alert(fn(2,3));//alert:5函数命名以驼峰方式，首字母小写不是命名规范中的，但是建议这么写。构造函数特点：用new关键字调用var person=new Person(
2021-04-16 11:10:38
112
原创 深入了解js原型
深入了解js原型function Person(){ this.name = '张三'}Person.prototype.name = 'Kevin';let obj = new Person()Person 就是一个构造函数，我们使用 new 创建了一个实例对象 obj此时想要访问原型上的name，可以利用实例对象 obj.nameprototype每个函数都有一个 prototype 属性每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对
2021-04-16 10:51:49
57
转载 小程序setData原理
小程序setData工作原理小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。而 evalu
2021-04-08 16:02:44
473
原创 js判断数组和对象方法
js判断数组和对象方法第一种：var obj = { }var arr = [];console.log(arr.constructor === Array) 数组的话会返回trueconsole.log(obj.constructor === Array);第二种：instanceofconsole.log(arr instanceof Array);数组的话会返回trueconsole.log(obj instanceof Array);第三种 用toString方法conso
2021-03-30 19:43:25
302
原创 https 协议原理
https 工作流程图：重点在这里：1.服务器端产生的是对称秘钥，所以只是把公钥发送出去，私钥一直在自己这里 （对称秘钥就是一个公钥，一个私钥，用公钥加密，用私钥直接能解码，但是比较慢，不能一直用这个通信）2.客户端首先向一个权威的服务器检查证书的合法性，如果证书合法，客户端产生一段随机数，这个随机数就作为通信的密钥，我们称之为对称密钥，用公钥加密这段随机数，然后发送到服务器3. 服务器用密钥解密获取对称密钥，然后，双方就已对称密钥进行加密解密通信了...
2021-03-29 14:15:31
75
原创 强缓存和协商缓存区别
1.强缓存（也叫本地缓存）特点：浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行通信；在chrome控制台的network选项中可以看到该请求返回200的状态码;简单的来说就是不与服务器交互2.协商缓存特点：上面说到的强缓存就是给资源设置个过期时间，客户端每次请求资源时都会看是否过期；只有在过期才会去询问服务器。所以，强缓存就是为
2021-03-29 11:16:39
1444
原创 Promise的优缺点
为什么要用promise优点：（1）解决回调地狱问题 ，有时我们要进行一些相互间有依赖关系的异步操作，比如有多个请求，后一个的请求需要上一次请求的返回结果。（2）更好地进行错误捕获缺点：（1）无法取消Promise,一旦新建它就会立即执行，无法中途取消。（2）如果不设置回调函数，promise内部抛出的错误，不会反应到外部。（3）当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。为什么Async/Await更好？函数前面多了一个async关键字。await关
2021-03-15 11:22:58
1849
原创 Vue.use(plugin)源码解析
Vue.use(plugin)源码解析：安装Vue.js 插件。如果插件(plugin)是一个对象，必须提供install方法。如果插件是一个函数，它会作为install方法。install方法调用时，会将Vue作为参数传入。该方法需要在调用New Vue()之前被调用。当install方法被同一个插件多次调用，插件将只会被安装一次。...
2021-03-09 15:56:08
128
原创 变量重新赋值和引用重新赋值问题
var a=3;var b=a;a=5;; //结果为5;; //结果为3；而在下面的代码中情况却发生了变化：var a=1,b=2,c=3;var Array=[a,b,c];a=5;; //结果为1,没有发生变化; var a=1,b=2,c=3;var Array=[a,b,c];Array[0]=5;; //结果为1，a没有发生变化 在接下来的代码中情况又不同： var a=1,b=2,c=3;var Array=[a,b,c];Array2=Arra
2021-03-09 14:26:49
773
原创 js深浅拷贝
1.什么是深浅拷贝简单的来说，加入b复制a ，a改变 , 如果b也跟着改变的话，那就是浅拷贝，反之是深拷贝实现浅拷贝方法：1.赋值操作var a = [0,1,2,3,4]var b = a a[0]=5console.log(a)// [5,1,2,3,4]console.log(b)// [5,1,2,3,4]2. es6 Object.assign() 只能可以拷贝一层数据，无法拷贝多层数据,内层依然为浅拷贝var obj = { a: {a: "hello", b: 2
2021-03-03 11:15:57
55
原创 template渲染过程
模板到真实dom节点需要经过一些步骤:1.把模板编译为render函数2.实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom3.通过diff算法对比虚拟dom，渲染到真实dom（类同react的虚拟DOM渲染过程）4.组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3...
2021-03-03 10:30:05
475
原创 SSR渲染原理
SSR渲染原理原理：相当于服务端前面加了一层url分配，可以假想为服务端的中间层，当地址栏url改变或者直接刷新，其实直接从服务器返回内容，是一个包含内容部分的html模板，是服务端渲染，而在交互过程中则是ajax处理操作，局部刷新，首先是在history模式下，通过history. pushState方式进而url改变，然后请求后台数据服务，拿到真正的数据，做到局部刷新，这时候接收的是数据而不是模板。优劣点：利于搜索引擎，解决白屏问题，因为正常情况下在index.html文件中只有一个简单的标签，没
2021-01-23 10:13:57
376
1
原创 Webpack浅谈性能优化(cli3)
一：减少Webpack打包体积1：优化Loader的文件搜索范围：通过exclude可以缩小查找范围module.exports = { module:{ rules:[ { //js文件才使用babel test:/\.js$/, loader:'babel-loader', //只在src文件夹下查找
2020-12-23 15:56:35
116
原创 webpack 浅谈打包原理
webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。webpack就是识别你的 入口文件。识别你的模块依赖，来打包你的代码。至于你的代码使用的是es6，es5。webpack都会对其进行分析。来获取代码的依赖。webpack做的就是分析代码。转换代码，编译代码，输出代码。**源码解析打包流程：**webpack中每个模块有一个唯一的id，是从0开始递增的。整个打包后的bundle.js是一个匿名函数自执行。参数则为一个数组。数组的每一项都为个function。func
2020-12-23 15:27:14
67
原创 vue 路由动态权限
vue 路由动态权限1.菜单路由全由后端接口返回1.1 第一步:拿到后端返回数据login() { this.$http.post('api/permission/getMenu', this.form).then(res => { res = res.data if (res.code === 20000) { 调用vuex方法 this.$store.commit('setMenu', res.data.me
2020-09-09 16:38:53
333
2
原创 vue自适应布局
vue自适应布局3种方法：1.传统布局 ：写个js全局引入页面即可 //方式一 const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth; document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px'; //方式二 document.documentElement.styl
2020-08-17 18:21:47
11402
2
原创 vue 实现前端分页
vue 实现前端分页<template> <div class="table"> <el-table :data="dataShow" stripe style="width: 100%"> <el-table-column prop="port" label="港口名称"></el-table-column> <el-table-column prop="bill_count" label=
2020-08-14 11:49:58
290
原创 vue 数组常见操作
vue 数组常见操作1.数组里面对象去重：var arr = [{ key: '01', value: '西施' }, { key: '02', value: '王昭君' }, { key: '03', value: '杨玉环' }, { key: '04', value: '貂蝉' }, { key: '01', value: '西施' },
2020-08-14 11:04:00
615
原创 vue 长列表性能优化
vue 长列表性能优化因为每次 DOM 修改，浏览器往往需要重新计算元素布局，再重新渲染。也就是所谓的重排（reflow）和重绘（repaint）。尤其是在页面包含大量元素和复杂布局的情况下，性能会受到影响。一个常见的场景是大数据量的列表渲染。通常表现为可无限滚动的无序列表或者表格，当数据很多时，页面会出现明显的滚动卡顿方案1：做分页处理，首页默认展示第一页数据，滚动加载，这也是一种方案，如果列表做不了分页，那该如何处理。方案2：使用vue-virtual-scroller插件安装这个插件：
2020-08-11 10:12:21
5330
2
原创 vue key的作用及原理
vue key的作用及原理v-for 时经常发现不写key值代码会出现警告，其实vue在推荐大家使用keykey值作用：1：当 vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用让每个item有一个唯一的识别身份，可以下标值index或者id, 主要是为了vue精准的追踪到每一个元素，高效的更新虚拟DOM
2020-08-08 16:52:24
370
原创 vue for of 跟 for in的用法
vue for of 跟 for in的用法对于普通的对象，for…of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用,for-of用于数组对象。但是，这样情况下，for…in循环依然可以用来遍历键名。 let obj = { sex: '男', age: "39", name: "kexiaokang" }; for (let e in obj) { console.log(e); } // sex // age //
2020-08-06 15:32:13
6075
2
原创 vue keep-alive的使用
vue keep-alive的使用1 keep-alive是什么：keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。2 一个场景：用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么
2020-07-29 10:02:02
142
原创 vue 中是如何检测数组变化
vue如何检测数组变化理解：1.使用函数劫持的方式，重写了数组的方法2.vue 将 data 中的数据，进行了原型链重写，指向了自己定义的数组原型方法，这样当调用数组 api 的时候，可以通知依赖更新，如果数组中包含着引用类型，则会对数组中的引用类型再次进行监控。那为什么说vue无法监听数组的变化尼，这又是怎么回事：注意事项由于 JavaScript 的限制， Vue 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
2020-07-28 11:12:45
3475
原创 vue防抖节流
vue防抖节流原理及使用场景防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。一、函数防抖1：定义在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。2：实现原理函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。3：使用场景文本框输入搜索（连续输入时避免多次请求接口）
2020-07-24 12:17:00
282
原创 vue中使用vuex
vue中使用vuex一、适合初学者使用，保存数据以及获取数据1、在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，当然也可以不建文件夹，直接新建个js文件也是可以的）在新建的js文件中写入如下代码:import Vue from "vue"import Vuex from "vuex" Vue.use(Vuex); export default new Vuex.Store({ state:{ pathName: "",
2020-07-24 12:04:20
101
原创 vue 组件传值常用5种
vue 组件传值1、父组件给子组件传值父组件:<template> <child :name="name"></child></template><script>import child from "./child.vue" export default { components: {child}, data(){ return {name:"二哈"} } }</scrip
2020-07-21 12:00:02
245
13
原创 为什么vue中data必须是一个函数
为什么vue中data必须是一个函数Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响取个列子：const arrayData = function() {};arrayData.prototype.data = { a:
2020-07-21 11:01:48
103
原创 vue computed watch区别和应用
vue computed watch区别1：computed 是计算一个新的属性（不能监听data已有属性,，会报错），并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data props）2：computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而watch 则是当数据发生变化便会调用执行函数3：从
2020-07-21 10:31:50
127
原创 vue虚拟dom理解
vue虚拟dom理解虚拟dom作用及实现流程：虚拟dom产生在beforeMount和mounted之间，当某个数据改变时，视图是局部刷新而不是整个重新渲染，如何精准的找到数据对应的视图并进行更新呢？那就需要拿到数据改变前后的dom结构，找到差异点并进行更新！加快了视图更新的目的。虚拟dom的比较，就是找出新节点（vnode）和旧节点（oldVnode）之间的差异，然后对差异进行打补丁，此时会触发patch函数，里面会有一个diff算法，会计算出之间的差异。...
2020-07-20 14:33:10
183
原创 为什么vue采用异步渲染
为什么vue采用异步渲染原因：1： 因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图。2：vue是组件级更新，当前组件里的数据变了，它就会去更新这个组件。当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。（核心的方法就是nextTick）原理：当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会
2020-07-20 14:12:34
1178
转载 vue.nextTick 的原理和用途
vue.nextTick 的原理和用途1: 什么时候需要用的vue.nextTick()？？vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。2: vue.nextTick(c
2020-07-20 13:58:27
113
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人