- 博客(236)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 Vue原理-双向绑定
组件化基础数据驱动视图MVVMVue响应式proxyobject.defineproperyt双向绑定的实现准备data：监听对象属性：重新定义属性，监听：触发更新：object.definePrototype的缺点监听数组变化由于object.defineprototype无法监听数组重新定义数组原型当这个类型是数组是抓取重新操作：...
2021-08-22 17:34:12
136
原创 Vue基础知识-高级特性使用
vue高级特性自定义v-model子组件：父组件：$nextTick界面更新了 但是异步渲染导致获取的childNode长度是上一次的长度更新之后获取则长度正常了slotslot基本使用父组件子组件：作用域插槽（父组件使用子组件的内容）父组件：子组件：具名插槽父组件：子组件：动态组件然后记得在data中创建nexttickname变量来接收组件的名称异步组件keep-alive同时还有一个白名单一个黑名单一个自己的生命周期m
2021-08-21 20:01:18
147
原创 Vue基础知识-基础使用
computed与和watchcomputed与watch的区别computed：computed的缓存是指 data不变就不会重新计算computed一个v-model的值需要get和setwatch：监听引用类型要深度监听（deep：true）拿不到oldVal问题（指针都是指向一个地址，所以拿不到。oldVal和val一样）class和style动态使用class：style注意是驼峰写法：条件渲染v-show为display：nonev-if只有一个节点循环
2021-08-21 15:58:20
216
原创 浏览器的缓存机制
逻辑图缓存位置Service WorkerService Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch
2021-07-15 15:53:21
200
1
原创 javaScript-你不知道的类
类语法的定义基础就是对原型的操作声明和java差不多 class User { constructor(name) { this.name = name; } getName() { return this.name; } } let hd = new User("123"); console.log(hd.getName());类的内部工作机制就是原型操作类就是构造函数的语法糖实质为操作prototype而已对象属性的声
2021-07-06 21:08:41
279
4
原创 javaScript-原型链
什么是原型你没车，你爸有车，你借着开就是原型有些对象可以没有原型（Object.create(null,{})）如上创建的方法都没有据说Vue中创建对象都是这么创建的原型链调用方式a.__ proto __（当函数当作对象调用时）：自己用的b.prototype(函数实例化出来之后自动给新创建对象指定原型)：用来给别人的只有函数有简而言之，第一个是自己本身的，第二个是当他作为构造函数时候用的向军大叔的图：这里很重要所以自己跑一下demo let ABC = function
2021-07-01 22:11:15
428
1
原创 javaScript-对象
面向对象编程 let user = { name: "小孙吗", grade: [ { name: "js", score: 99 }, { name: "docker", score: 76 } ], average() { let total = this.grade.reduce((t, l) => t + l.score, 0); return `${this.name}的平均成绩是: ${total / th
2021-06-19 22:49:18
302
1
原创 javaScript-宏任务与微任务/事件轮询
宏任务与微任务javaScript是单线程语言（如果多线程dom会疯掉）所以在同一时间只能执行一个任务，称为主线程，用来执行同步任务同时还有两个任务列表用于存放异步任务，宏任务、微任务执行顺序为：主线程=>微任务=>宏任务有关定时器定时器模块⏲，到达时间点将其放入宏任务队列如果主线程没有任务则执行，如果有则等待执行完成后再继续执行如果有两个相同时间的定时器则上面的先执行下面的后执行如果两个时间不同的定时器则时间短的先执行时间长的后执行注意点：定时器的⏲是在定时器模
2021-06-14 21:45:21
5973
13
原创 javaScript-闭包与作用域
环境与作用域全局环境不会被回收任何位置都可以访问全局环境函数的作用域和环境函数执行后会每一次都会创建一块新的作用域父级函数可以访问子函数作用域延伸函数环境生命周期只要有人在用，环境就不会被清空，所以可以采用复制的方式 function sam() { let n = 1; return function sum(){ console.log(++n); }; // sum(); }; let sss
2021-06-13 17:15:48
263
3
原创 javaScript-函数
全局函数函数直接声明/用var声明会放到全局作用域中let声明不会放全局作用域中建议不要直接使用函数，将函数放在类/模块中再进行使用函数也可以提升（但仅限于匿名函数）立即执行函数与函数作用域冲突（function（参数）{}）（参数）—可以解决命名冲突问题{}也可以解决要记得函数默认值使用技巧函数一般可以接受任何参数，也可以作为参数arguments是函数接收的所有参数集合之前解析参数function(){[…arguments]}现在解析参数function（…a
2021-06-08 22:30:00
177
原创 vue的深度监听（对象数组同理）
昨天在做项目时遇到了一个问题在Vue中监听obj.name时新增了一个属性 但是发现属性并没有变化后来查询了官方文档发现Vue不允许动态添加prototype来执行深度监听如下：<template> <div class="about"> <h1>{{dataList.name}}</h1> <h1>{{dataList.id}}</h1> <h1>{{dataList.type}}&l
2021-04-13 14:11:58
461
原创 var let const（原创，精简）
语法方面需要注意：1.区分大小写2.每句后面加分号在某些情况下会提升性能（解析器会在合适的地方自动补分号来尝试修改错误）3.if的{}如果只有一句可以省略 单并不美观变量var需要注意的1.如果没有初始化会自动保存一个undefined2.将一个数字类型赋值成对象这样是不推荐但是有效的3.var是再一个函数中生效（函数退出失效）（函数外无效）4.函数内直接声明类似于直接声明一个全局变量5.一条语句同时定义多个变量中间用逗号隔开var a =1,b = 2, c = 36.var 存
2021-01-25 22:18:54
286
2
原创 前端单位的解读和换算px/%/em/rem/vh/vm/vim/vmax
px像素 固定单位%相对单位 相对于最近的父元素emem：大小相对于font-size例：font-size=100 10em =1000默认 1em=16px，自己有字号大小就相对于自己如果没有就往上找由于fontsize经常发生改动 所以项目中并不常用rem（root em）rem：相对于根元素（html）的字号大小默认 1rem=16px，依旧相对于像素所以需要找一个根据用户界面可变的单位vw（viewport width）vw：视口宽度，相对于窗口（视口）满屏
2020-11-06 17:35:34
2972
1
原创 前端角度解决跨域的三种方法（CORS、JSONP、接口代理）
跨域的概念：同源策略是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器 都会使用这个策略。所谓同源指的是：协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。①、http://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 协议、域名、端口号都相同，同源。②、https://www.123.com/i
2020-11-02 20:57:05
3215
原创 搞定前端面试官-Vue的生命周期（包过）
生命周期概念：从创建到销毁的整个过程经历：开始创建、初始化数据、编译模板、挂载Dom、渲染、更新渲染、销毁。每一个组件或者实例都会经历一个完整的生命周期：初始化、运行中、销毁 。正餐：（为方便阅读已对重点进行加粗处理）1.实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作2.挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使
2020-10-15 14:06:33
594
原创 搞定前端面试官-Promise
promise特点1.所谓 Promise ，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。2.对象的状态不受外界影响。 Promise 对象代表一个异步操作，有三种状态： pending （进行中）、 fulfilled （已成功）和 rejected （已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。3.一旦状态改变，就不会再变，任何时候都可以得到这个结果。变成成功或者失败只要这两种情况发生，状态就凝固了，不会再变了，
2020-10-12 10:23:29
352
原创 小白前端开发笔记-前端面试必备--元素的水平垂直居中（超级全）
元素水平垂直居中本文对元素的水平垂直居中通过两方面来呈现，每一方面又分为元素宽高已知和未知，以上代码均通过测试，可直接使用，如有缺陷欢迎指正！相对于父元素（宽高已知）1.1 margin硬挤<style> .a1; border: 1px solid red;{ width: 600px; height: 600px solid red; } .a2 {
2020-08-31 16:57:50
291
原创 小白前端开发笔记-CSS清除浮动的8种方法原理及其优缺点（解决父元素塌陷的8种方法）
父元素塌陷：指父元素没有设置高度，子元素浮动后进入新的层级，父元素无法识别（找不到自己的孩子），故高度为0，解决办法如下。1.父级div定义height（不推荐）原理：手动定义height 即使无法识别子元素也仍有高度。优点：便于理解，代码量少。缺点：仅适合高度固定的布局，若高度与父元素不同则会产生问题。2.结尾处加空div标签 之后clear：both（不推荐）<style type="text/css"> .div1{background:#000080;border:1px
2020-08-19 10:54:59
392
原创 小白前端开发笔记-（行内元素、块级元素、行内块元素、之间的区别与特点）
小白前端开发笔记-（行内元素、块级元素、行内块元素、之间的区别与特点）行内元素(inline-level) 行内元素又称内联元素，不能独占一块区域，根据自身内容（文字/图片）大小来确定自身区域大小。所以通常不能设置宽高、对齐等属性，通常用于 控制页面文本内容。 **特点** 1.总是和相邻的行内元素从左到右排成一排。 2.设置宽高无效。水平方向的padding、margin可以设置但垂直方向的设置无效。*（想要垂直方向居中：内容大小=所在区域大小即可）* 3.默认宽度是其自身内容的宽度
2020-08-09 16:47:29
688
4
原创 TypeScript梳理 看这篇就够了
#无法通过在constructor内部定义private 无论如何也无法被别人访问共同点：尖括号<就是泛型>定义的位置交叉类型：将多个类型合并为一个类型联合类型：联合多个类型 T1 | T2 | T3 :或
2025-08-02 21:31:40
960
原创 webpack-babel
比如“@babel/preset-env” 可以理解为Es6 Es7等很多转换的集合。** polyfill概念：根据浏览器当前的情况 打一个补丁**presets 里面放了很多plugins的预设。plugins 里面放了很多转换的规则。安装与新建.babelrc文件。
2025-07-31 15:44:26
219
原创 webpack-性能优化
ignorePlugin无法自动识别哪些真的只有到了。比较大的文件 直接异步加载进来（代码、组件、路由）避免多个文件打包后 多个函数生成多个作用域。新代码生效 网页不刷新 内存不丢失。后面打包出来的文件会变成如下前缀。需要用户收到排除 然后手动引入。可以将多个函数合并为一个函数。已打包过的代码无需重新打包。需要自己配置 如何热更新。还是需要一些经验使用的。会修改所有的url前缀。
2025-07-30 22:25:27
560
原创 vue3 如何实现响应式
基本和2的逻辑相似 主要在于api不同规避defineProperty的一些问题兼容性没有defineProperty好 无法polyfill。
2025-07-25 14:17:27
141
原创 vue3升级了哪些重要功能
需要提前把emits定义好 然后再调用。根目录可以由多个dom组成 而非一个。可以将组件之间渲染到body上。其中有fallback的为骨架。一个事件里可以调用多个函数。
2025-07-24 16:55:16
312
原创 vue3中的ref、reative、toRef、toRefs
本文介绍了Vue3中响应式API的核心概念。ref用于创建值类型的响应式数据，通过.value访问修改；reactive则处理对象类型，可直接访问属性。toRef可将响应式对象的属性转为ref，保持双向响应，适用于解构、组合函数和跨组件传值场景。toRefs则将整个响应式对象转为各属性ref的集合，便于解构使用而不失响应性，常用于组合函数返回值和组件传参。这些API为不同场景下的响应式数据处理提供了灵活解决方案。
2025-07-24 15:29:55
910
原创 面试知识梳理-vue3和vue2区别
Vue 2 通过 Mixins 复用逻辑，但存在命名冲突、来源不清晰等问题，Vue 3 使用 组合函数（Composables），将逻辑封装为独立函数。Vue 2 采用 Options API，通过 data、methods、computed 等选项分割逻辑，导致相关功能分散在不同区块，难以维护。Vue 3 引入 Composition API，通过 setup() 函数集中组织逻辑。beforeDestroy改为onbeforeUnmount。
2025-07-22 15:33:54
228
原创 算法梳理-基础排序算法
选择排序和插入排序是两种基础排序算法。选择排序每次选取未排序部分的最小元素交换到首位，交换次数最少但效率与输入无关。插入排序通过逐个比较插入到有序位置，可以使用哨兵技巧优化性能。希尔排序是插入排序的改进版，通过分组排序提高效率。双指针算法分为单向和双向两种，常用于数组遍历和极值求解问题，如移动零和盛水容器问题。这些算法各有特点，适用于不同场景。
2025-07-07 10:35:09
407
原创 JS中的定型数组与视图
定型数组了解定型数组前先复习一下基础知识：1byte（又称为字节） = 8bit(又称为比特、位)1kb = 1024byte;前言之所以要使用定型数组主要是因为WebGL的需求 因此在ES6中引入定型数组来解决这个问题，并提供更高性能的算术运算。所谓定型数组，就是将任何数字转换为一个包含数字比特的数组，随后就可以通过我们熟悉的JS数组方法来进一步处理用人话说就是 js存储数字是以64位浮点格式存储，而一个字节仅需要8位 所以浪费太多了 新弄出来一个数据类型叫定型数组 这个数组可以存储数据
2022-05-17 19:25:33
597
原创 ES-Module
简单来说就是浏览器及node.js不借助webpack等打包直接引用依赖包的方式Snowpack 、Vite 为代表的 bundless（随着用户使用加载） 都是使用浏览器的ESM功能使用方式(浏览器)script 标签上加 type=“module” 即可<script type="module">import { logger } from "./utils.js";logger("2333");</script>使用方式(node)-未尝试方法一：将文件
2022-05-05 22:20:46
228
原创 vscode+prettier配置保存自动格式化
安装prettier插件（应用商店中直接下载即可）-如图版本及以后均可 之前的版本不清楚可行否开始配置第一步，先打开vscode软件，左下角点击设置 》打开设置》唤出快速搜索条界面。第二步，接下来先设定自动保存文件，搜索框贴入files.autoSave筛出设置项，并把设置项属性选择为onFocuschange。第三步，设定编辑器默认代码格式化（美化）的插件为Prettier，同理在搜索设置框贴入editor.defaultFormatter，将配置项选择为Prettier。第四步，设定Pre.
2022-01-17 10:19:50
10953
1
js编写京东双十一抢货
2020-10-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人