- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue3+vite+vue-router4 使用history 页面打开白屏问题
vue3+vite+router4.0使用history页面打开白屏问题
2023-01-05 17:56:44
1492
1
原创 史上最全的vue.js源码解析最终篇（四）
虽然vue3已经出来很久了，但我觉得vue.js的源码还是非常值得去学习一下。vue.js里面封装的很多工具类在我们平时工作项目中也会经常用到。所以我近期会对vue.js的源码进行解读，分享值得去学习的代码片段，这篇文章将会持续更新。一、4000~6200代码有哪些内容？：1.invokeCreateHooks：原生事件绑定的入口2.initAssetRegisters：创建组件、指令、过滤器3.initGlobalAPI:初始化全局api4.renderClass,mergeClassDat.
2021-08-29 22:16:55
1817
原创 史上最全的vue.js源码解析（四）
虽然vue3已经出来很久了，但我觉得vue.js的源码还是非常值得去学习一下。vue.js里面封装的很多工具类在我们平时工作项目中也会经常用到。所以我近期会对vue.js的源码进行解读，分享值得去学习的代码片段，这篇文章将会持续更新。一、4000~6200代码有哪些内容？：1.initState：初始化实例状态（initProps，initData，initComputed，initMethods，initWatch，initMixin等）2.initAssetRegisters：创建组件、指令、过滤
2021-08-22 22:01:39
1488
转载 TCP三次握手和四次挥手
问题1.请画出三次握手和四次挥手的示意图问题2.为什么连接的时候是三次握手？问题3.什么是半连接队列？问题4.ISN(Initial Sequence Number)是固定的吗？问题5.三次握手过程中可以携带数据吗？问题6.如果第三次握手丢失了，客户端服务端会如何处理？问题7.SYN攻击是什么？问题8.挥手为什么需要四次？问题9.四次挥手释放连接时，等待2MSL的意义?一、三次握手三次握手（Three-way Handshake）其实就是指建立一个TCP连接时，需要客户端和服务器总共发送
2021-08-15 21:37:34
160
原创 浏览器的工作原理
一、基本概念：浏览器是多进程的浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu、内存）简单点理解，每打开一个Tab页，就相当于创建了一个独立的浏览器进程。二、浏览器都包含哪些进程？1. Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有负责浏览器界面显示，与用户交互。如前进，后退等负责各个页面的管理，创建和销毁其他进程将Renderer进程得到的内存中的Bitmap，绘制到用户界面上网络资源的管理，下载等2. 第三方插件进程：每种类型的插件对应一个进程，仅
2021-08-08 20:55:39
270
原创 史上最全的vue.js源码解析（三）
虽然vue3已经出来很久了，但我觉得vue.js的源码还是非常值得去学习一下。vue.js里面封装的很多工具类在我们平时工作项目中也会经常用到。所以我近期会对vue.js的源码进行解读，分享值得去学习的代码片段，这篇文章将会持续更新。一、2400~4000代码有哪些内容？：1.children 的规范化：normalizeArrayChildren2.组件实例化：initInjections3.slot插槽函数：resolveSlots，normalizeScopedSlots，normalizeS
2021-08-01 22:55:25
1137
原创 史上最全的vue.js源码解析（二）
虽然vue3已经出来很久了，但我觉得vue.js的源码还是非常值得去学习一下。vue.js里面封装的很多工具类在我们平时工作项目中也会经常用到。所以我近期会对vue.js的源码进行解读，分享值得去学习的代码片段，这篇文章将会持续更新。一、1200~2400代码有哪些内容？：1.一系列合并策略：①选项 el、propsData 的合并策略strats.el ，strats.propsData②选项data的合并策略strats.data③生命周期钩子选项的合并策略mergeHoo④资源(as
2021-07-25 22:07:50
980
原创 史上最全的vue.js源码解析（一）
//AMD规范和commonJS规范,都是为了模块化//AMD规范则是非同步加载模块，允许指定回调函数。//CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。//是个匿名函数,该匿名函数并没自执行 设计参数 window，并传入window对象。不污染全局变量，也不会被别的代码污染(function (global, factory) {//检查 CommonJS,CommonJS模块作用域，每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模
2021-07-18 21:39:50
5820
1
原创 this指向，call,apply,bind的区别
1.this指向：①普通函数调用时，this指向window;②构造函数调用时，this指向实例对象③对象方法调用时，this指向该方法所属的对象;④通过事件绑定的方法，此时this指向的是绑定事件的对象;⑤定时器函数，this指向的是window;call,apply,bind的相同点：①都是改变this指向的，②第一个参数都是this要指向的对象③都可以利用后续参数传参call,apply,bind的区别：call和bind的参数是依次传参，一一对应的；但apply只有两个参数，第
2021-07-09 11:30:24
385
原创 webpack常见面试问题整理
1.webpack是什么？webpack一个用于现代javascript应用程序的静态模块打包工具2.webpack的配置有哪些？入口（entry）,出口（output）,mode,plugin,loader；入口：指示webpack使用哪个模块作为构建其内部依赖图的开始。默认值是：‘./src/index.js’。出口：告诉webpack在哪里输出它所创建的bundle,以及如何命名这些文件，主要输出文件的默认值是‘./dist/main.js’。mode:提供 mode 配置选项，告知 we
2021-07-07 15:11:58
339
转载 Vue.set()和this.$set()的使用
Vue.set()和this.$set()介绍：在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码，给 student对象新增 age 属性data () { return { student: { name: '', sex: '' } }}mounte
2021-04-30 12:01:23
319
转载 JavaScript执行机制
大纲1、场景分析2、执行机制相关知识点3、以实例来说明JavaScript的执行机制4、相关概念1、场景分析/*以下这段代码的执行结果是什么？如果依照：js是按照语句出现的顺序执行这个理念，那么代码执行的结果应该是：//“定时器开始啦”//“马上执行for循环啦”//“执行then函数啦”//“代码执行结束”但结果并不是这样的，得到的结果是：//“马上执行for循环啦”//“代码执行结束”//“执行then函数啦”//“定时器开始啦”*/setTimeout(func
2021-04-25 17:38:14
122
转载 vuex：弄懂mapState、mapGetters、mapMutations、mapActions
一、state1.1 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { //存放状态 nickname:'Simba', age:20, gender:'男' }, mutations: {}, actions:
2021-04-25 16:35:55
507
转载 js事件委托(事件代理)
起因：1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考；概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，
2021-04-25 16:05:32
1169
1
原创 H5+APP移动端开发的一些碎片整理
1.移动端H5获取手机状态栏高度：// 只有H5+APP 才会执行这段代码document.addEventListener("plusready", function() { var statusBarHeight = Number.isFinite(plus.navigator.getStatusbarHeight()) ? plus.navigator.getStatusbarHeight() : 28;//状态栏高度,判断是否是数字，不是使用默认高度28}, false);移动端页面底
2021-04-23 15:33:11
276
原创 vue.js渐进式教程(高级篇)
由于公司最近持续开展学习会，让开发人员能够学到更多的知识和技能，所以本人写了一篇关于vue.js的教程，虽然网上的教程很多，但本篇教程是本人的个人学习和经验总结，只针对于正在学习中的小伙伴们，主要是面试经常会被问到，以及开发中常用知识点和技能的一些整理，希望正在学习阶段的小伙伴能够少走弯路，能够更明确的学到有用的知识和技能：此教程主要分为三个阶段入门篇，进阶篇和高级篇，将会不定期发布每一篇内容，当然，后期也会持续更新一些其它方面的学习知识，有问题和需要扩充的地方欢迎大家提出。一、vue.js入门篇1.
2021-04-01 14:01:08
1134
原创 vue.js渐进式教程(进阶篇)
由于公司最近进化持续开展学习会，让开发人员能够学到更多的知识和技能，所以本人写了一篇关于vue.js的教程，虽然网上的教程很多，但本篇教程是本人的个人学习和经验总结，只针对于正在学习中的小伙伴们，主要是面试经常会被问到，以及开发中常用知识点和技能的一些整理，希望正在学习阶段的小伙伴能够少走弯路，能够更明确的学到有用的知识和技能：此教程主要分为三个阶段入门篇，进阶篇和高级篇，将会不定期发布每一篇内容，当然，后期也会持续更新一些其它方面的学习知识，有问题和需要扩充的地方欢迎大家提出。一、vue.js入门篇
2021-03-24 16:58:53
505
原创 vue.js渐进式教程(入门篇)
由于公司最近进化持续开展学习会，让开发人员能够学到更多的知识和技能，所以本人写了一篇关于vue.js的教程，虽然网上的教程很多，但本篇教程是本人的个人学习和经验总结，只针对于正在学习中的小伙伴们，主要是面试经常会被问到，以及开发中常用知识点和技能的一些整理，希望正在学习阶段的小伙伴能够少走弯路，能够更明确的学到有用的知识和技能：此教程主要分为三个阶段入门篇，进阶篇和高级篇，将会不定期发布每一篇内容，当然，后期也会持续更新一些其它方面的学习知识，有问题和需要扩充的地方欢迎大家提出。一、vue.js入门篇
2021-03-18 10:12:08
473
原创 10个javascript的必备技巧
10个javascript的必备技巧1.彻底屏蔽鼠标右键oncontextmenu="window.event.returnValue=false"2.取消选取、防止复制① <body onselectstart="return false">② oncopy="return false;" oncut="return false;"3.禁止粘贴onpaste="return false"4.IE地址栏换成自己的图标<link rel="Shortcut Icon" hr
2021-03-05 15:51:01
353
4
原创 避免代码冗余，学会js代码优化技巧
1.反转字符串:const reverse = str => str.split(’’).reverse().join(’’);2.保留小数点位数：//n数值，fixed保留位数const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);3.滚动到页面顶部：const goToTop = () => window.scrollTo(0, 0);4....
2021-02-02 09:13:23
516
2
原创 数组的操作
数组的操作<-- 数组元素的添加 -->1.arr.push(val) //在数组的尾部添加一个值，返回该元素，并修改数组本身2.arr.unshift(val) //在数组的头部添加一个值，返回该元素，并修改数组本身3.arr.splice(1,0,2) //第一个参数指定了插入(删除)元素的起始位置，第二个参数指定了个数//第二个之后的参数数量为任意个，指定了需要插入到数组中的元素<-- 数组元素的删除 -->4.arr.pop() //删除数组的最后一个元素
2021-01-29 11:07:30
95
原创 路由导航的解析流程
完整的导航解析流程:1.导航被触发。2.在失活的组件里调用 beforeRouteLeave 守卫。3.调用全局的 beforeEach 守卫。4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。5.在路由配置里调用 beforeEnter。6.解析异步路由组件。7.在被激活的组件里调用 beforeRouteEnter。8.调用全局的 beforeResolve 守卫 (2.5+)。9.导航被确认。10.调用全局的 afterEach 钩子。11.触发 D
2021-01-29 11:06:30
336
原创 屏幕分辨率和css技巧
目前台式电脑与笔记本适配测试数据以下为参考数值：台式机和笔记本电脑的分辨率：2560x1440 1920x1200 1680x1050 1600x1200 1440x900 1366x768 1280x1024 1280x800 1280x768 1152x864 1024x768 800x600平板电脑分辨率：iPad（ 768x1024 ）iPad Pro（1024x1366）Nexus 10（800x1280） Nexus 7（600x960）—显示都是不完整的智能手机分辨率：Nexus 5（3
2021-01-29 11:06:02
655
原创 vue(utils.js)常用的公共方法的整理
vue(utils.js)常用方法的封装,以下是我搜集到的认为vue中可能会用到的一些公共方法的整理：/* * 验证手机号是否合格 * true--说明合格 */export function isPhone(phoneStr) { let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (!myreg.test(phoneStr)) { return false; } else { return true; }}/* *
2021-01-11 16:28:10
3074
原创 在原生代码里使用iview的注意事项
最近公司在做一个项目，使用的框架是iview,使用过程中同事遇到一些问题，这些问题对于有些同学来说根本就不是问题，但总会有同学需要，为了帮助不太会用的同学快速找到问题，做了如下整理：下载vue,iview.min.js,iview.css包并引入：（注意：也可以使用尾部链接进行引用，但是这样的话，当遇到突然没有网的时候，页面样式会出现问题，所以我认为最好是下载压缩文件，在项目中引用比较好，另如果需要使用图标，必须下载fonts文件与iview.css放在同一个文件夹下面，但不需要在html代码中引入）
2021-01-11 15:23:41
442
原创 vue提升性能的几种简单方法
vue提升性能的几种简单方法：1.vue异步组件实现懒加载 方法如下：component：resolve=>(require([‘需要加载的路由的地址’])，resolve)2.使用ES6中的import引入组件3.尽量使用v-if,减少使用v-show4.组件拆分，页面分为多个组件5.使用keep-alive切换路由6.使用vue-virtual-scroller组件加载内容过多的列表7.v-for加唯一key8.长列表使用this.list = Object.freeze(
2021-01-04 09:03:17
4021
13
原创 ES6常用的新特性
1.let和const定义变量2.变量的结构赋值://数组的结构赋值let[a,b,c]=[1,2,3];//对象的解构赋值let { foo, bar } = { foo: 'aaa', bar: 'bbb' };3.字符串的遍历：for (let item of 'hi') { console.log(item)}//h//i4.模板字符串：$('#result').append(` There are <b>${basket.count}</b&g
2020-12-30 17:18:53
145
原创 vue axios 的封装
//http.jsimport Vue from 'vue'import axios from "axios"const Axios = axios.create({ timeout: 30000, //responseType:"json", withCredentials:false,});/** axios访问前的拦截，增加配置信息 baseURL=反向代理的URL地址，配置在nginx、apache下有效,tomcat下请配置为/ data=将json
2020-12-30 09:22:26
215
原创 vuex状态管理器实现组件之间的传递
vuex状态管理器实现组件之间的传递组件间的传递除了props，emit等方法之外，还可以通过vuex进行传递，vuex一般适用于大中型项目，如果是小项目的话prop,emit等方法之外，还可以通过vuex进行传递，vuex一般适用于大中型项目，如果是小项目的话prop,emit等方法之外，还可以通过vuex进行传递，vuex一般适用于大中型项目，如果是小项目的话prop,emit等方法就足够用了，不然会显得项目繁琐。//向storage中存储数据this.$store.commit("setIHei
2020-12-25 15:37:39
220
原创 几种日期格式的转换
**日期格式的转换**dateFormat(row, column) {var date = new Date(row.gmtModified);var year = date.getFullYear();var month = date.getMonth() < 9 ? “0” + (date.getMonth() + 1) : “” + (date.getMonth() + 1);var day = date.getDate() < 10 ? “0” + date.getDat
2020-12-25 15:07:30
357
原创 sessionStorage,localStorage,cookie之间的区别
共同点：都是保存在浏览器端、且同源的区别：1、cookie数据始终在同源的http请求中携带（即使不需要）即cookie在浏览器和服务器间来回传递，cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下. ； sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。2、存储大小限制也不同；cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionS
2020-12-25 13:37:34
82
原创 Blob文件流下载
downLoad(msg) {const url1 = url;this.getBlob(${url1}).subscribe(result => {this.downFile(result, ‘name.zip’);})}//post方法requestBlob(url: any, data?: any): Observable {return this.http.request(“post”, url, { body: data, observe: ‘response’, respo
2020-07-17 11:38:07
2667
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人