- 博客(61)
- 收藏
- 关注
RSS订阅原创 Vue工程化开发&脚手架Vue CLI
可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】如果使用 Vue CLI 3+：直接跳过此步骤，更新即可。Vue CLl 是 Vue 官方提供的一个全局命令工具。通过 npm 或 yarn 全局安装最新版。(项目名-不能用中文)
2025-04-15 17:38:49
184
原创 Vue2 watch侦听器（监听器）
使用场景：数据变化需要触发异步操作、复杂逻辑或 DOM 更新。避免场景：频繁同步操作（可能影响性能）。替代方案：简单计算用computed，表单验证用v-model+ 事件。通过合理使用watch，可以更灵活地控制数据流和交互逻辑。
2025-03-18 15:57:16
417
原创 vue-常用指令 | 常用指令的修饰符
指令就是带有v- 前缀的特殊属性，不同的属性对应不同的功能。分类汇总内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）
2025-03-16 12:29:27
814
1
原创 js版本之ES10（2019）、ES11（2020） 新增特性（八）
array.flat()方法接受一个可选的参数，该参数指定要展平的深度。如果不提供参数，默认深度为1，意味着它只会展平一层嵌套数组。如果该参数为Infinity，则将数组完全展开（为一维数组）。指定要展平的深度(可选参数)，默认情况下，深度为1。返回一个新数组，其中包含原数组及其所有子数组的元素。
2025-03-10 14:03:36
934
原创 js版本之ES9（2018）新增特性（七）
一般都在请求前设置loading展示，请求完成后关闭loading，刚开始我下意识把关闭loading放到then方法里面去处理，发现如果请求出现错误的情况，页面loading是还在的，就需要在catch方法里重写一遍导致代码重复，后面才了解到finally方法可以处理Promise的then和catch方法中代码重复的功能。它的主要作用是将剩余的属性或参数收集到一个新的对象或数组中。：Rest操作符可以将一个对象中未被明确指定的属性收集到一个新的对象中。）可以匹配任意字符，ES9 引入新的修饰符。
2025-01-17 15:07:29
875
原创 js版本之ES6特性简述【Proxy、Reflect、Iterator、Generator】(五)
目录ProxyReflect静态方法部分实例Iterator实际开发迭代器的使用实例迭代器（Iterator）应用GeneratorProxy 是 ES6 中新增的对象 详解请看：ES6之---Proxy简介Proxy 是 ES6 中新增的对象【注：不可使用new操作符生成实例】观察者模式实例IteratorIterator即迭代器，它是一种接口，为各种不同的数据结构提供了统一的访问机制，换句话说，只要有任何数据结构部署了迭代接口，就可以使用统一的方式的来
2024-12-24 17:12:29
979
原创 js版本之ES6特性简述【let和const、数组、函数、集合、Symbol】(四)
以前的 arguments 变量也有类似的作用，但是 arguments 不是真正的数组，除了存放参数的列表外，arguments 还有 length 属性，严格来说 arguments 是一个类数组对象，而不定参数则是一个完全的数组，这也是不定参数相对于 arguments 的优势，更加方便我们使用，所以建议使用不定参数来代替 arguments。基本上，它是一种类似于字符串的数据类型。Symbol 函数的参数只表示对当前 Symbol 值的描述，因此相同参数的 Symbol 函数的返回值是不相等的。
2024-12-19 16:38:42
949
原创 js版本之ES6特性简述【类（class）、模块化(ES Module) 、j箭头函数、函数参数默认值、模板字符串、解构赋值、扩展运算符、对象属性简写、Promise】(三)
它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。解构赋值是一种JavaScript表达式，它允许我们将数组或对象的值解压到不同的变量中。定义一个类的一种方法。（Arrow Functions）作为一种新的函数定义方式，它提供了一种更简洁、更灵活的语法，并改变了。ES6 允许在对象中使用属性简写，即如果属性名与变量名相同时，可以不写成员的名字。类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，赋予一个命名类表达式的名称是类的主体的本地名称。
2024-11-27 15:55:36
898
原创 js版本之ES5特性简述【String、Function、JSON、其他】(二)
【 方法返回0到65535之间的整数，表示给定索引处的UTF-16代码单元 (在 Unicode 编码单元表示一个单一的 UTF-16 编码单元的情况下，UTF-16 编码单元匹配 Unicode 编码单元。方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，如果指定了replacer是一个函数，则可以替换值，或者如果指定了replacer是一个数组，可选的仅包括指定的属性。查找匹配的字符串，返回匹配项的索引，没有找到，返回 -1【用于搜索正则表达式和给定字符串对象之间的匹配】
2024-11-22 16:08:00
827
原创 js版本之ES5特性简述【Object、Array方法】(一)
以此类推。注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序。
2024-11-20 10:51:38
1091
原创 获取日期范围【昨日、本周、近七天、本月、近31天、近三个月、本季度、近半年、今年、往年、自定义时间】、获取年份列表
【代码】获取日期范围【昨日、本周、近七天、本月、近31天、近三个月、本季度、近半年、今年、往年、自定义时间】、获取年份列表。
2024-11-07 14:03:29
199
原创 watch与computed的区别、运用的场景
computed属性的缓存机制是其核心特性之一，确保了性能优化和响应式数据管理。惰性求值：computed属性是惰性求值的，这意味着它们只有在第一次被访问时才会计算其值。之后，只要依赖的数据没有变化，computed属性将返回之前计算的结果，而不是重新计算。依赖收集：computed属性会自动收集其内部表达式所依赖的响应式数据。当这些依赖的数据发生变化时，computed属性才会重新计算其值。缓存机制：computed属性的结果会被缓存。只有当其依赖的数据发生变化时，缓存才会被清除并重新计算新的值。
2024-11-06 17:06:00
1616
原创 JS之async、await详解
模拟出一个摇色子的异步操作，先通过一个方法三秒之后拿到一个筛子数，第二步进行输出上面这段代码async中使先执行，等到三秒后执行完再把得到的结果赋值给左边的n，也就是说，所以，因此前面，虽然，但是会导致传递冗余信息，频繁的解析又重新组合参数，比较麻烦；async/await没有这个限制，可以当做普通的局部变量来处理，用let或者const定义的块级变量想怎么用就怎么用，想定义几个就定义几个，完全没有限制，也没有冗余工作；async主要来处理异步的操作，
2024-11-06 15:46:26
648
原创 Web开发动画与性能优化
（Frames Per Second, FPS）指的是每秒钟渲染的帧数。通常情况下，60FPS【每秒60帧】被认为是流畅动画的标准。反之，帧率越低，动画就越卡顿。优化后的动画帧率显著提升，能够在各种设备上保持流畅。通过简化动画属性并启用硬件加速，我们成功地减少了CPU的负担，确保了动画的高效执行。】在动画中使用复杂的JavaScript计算逻辑，会占用大量的CPU时间，导致动画卡顿。尽量减少对DOM的直接操作，尤其是导致重排的操作。属性，启用硬件加速，使得动画更加流畅。）会触发布局重排，影响性能。
2024-10-11 11:06:41
781
原创 懒加载＜图片懒加载＞
监听 scroll、resize 等事件，当事件触发时，获取图片元素的位置信息、滚动高度及视口高度，计算出当前图片元素是否出现在视口内，如果出现了则加载图片。当页面滚动时，vue-lazyload 会检测元素是否进入可视区域，如果是，则替换元素的 src 或者 style 属性，从而实现懒加载。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。：所有浏览器都兼容，可以比较灵活，自定义触发加载的时机，可以结合图片加载预览提升用户体验。
2024-09-06 11:02:52
982
原创 VUE2—defineProperty和VUE3—proxy 详解
使用过vue开发的盆友都知道Vue2和Vue3的响应式原理是不一样的，vue2用的是vue3用的是proxy。那他们具体是什么呢？又有什么区别呢？下面叫我简单做个笔记。有什么错误望各位大佬不吝指点。是 es5 引入的一个方法，用于定义或修改对象的属性的方法，可以控制属性的特性（如可枚举性、可配置性、可写性等）。Object.defineProperty()语法参数说明obj：定义属性的对象。prop：定义或修改的属性的名称。descriptor：属性的描述符对象，包含属性的特性设置。
2024-08-27 17:00:22
1267
原创 【前端储存】之localStrage、sessionStrage和Vuex
localStorage （本地存储）是一种在用户浏览器中存储数据的客户端存储方式，允许网站将键值对数据持久保存在用户的本地浏览器中。存储的数据不受浏览器关闭的影响，可以在不同会话和浏览器关闭后仍然保持有效。生命周期永久有效，除非手动删除，否则关闭页面也会存在可以多窗口（页面）共享（同一浏览器可以共享）以键值对的形式存储使用各浏览器支持的localStorage容量上限不同；一般上限为5MB如果key不存在则返回null，而不是 undefined。
2024-08-27 10:14:54
1264
原创 vuex的原理和使用方法
Vuex 是 Vue.js 应用的状态管理模式，它为应用内的所有组件提供集中式的状态（数据）管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它【下面getters引用的state中的数据：list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]】getters: {// getters函数的第一个参数是 state// 必须要有返回值通过属性访问。
2024-08-14 18:06:53
1212
1
原创 Vue-router 跳转和 location.href 有什么区别
使用来跳转， 简单方便， 但是刷新了页面使用， 无刷新页面， 静态跳转；引进 router ， 然后使用 router.push( /url ) 来跳转， 使用了 diff算法， 实现了按需加载， 减少了 dom 的消耗。使用 router 跳转和使用 history.pushState() 没什么差别的， 因为 vue-router 就是用了 history.pushState() ， 尤其是在 history 模式下。
2024-08-14 16:19:51
578
原创 Vue 父子组件生命周期执行顺序
【父】beforeCreate ——》【父】created ——》【父】beforeMount ——》【注意，当父子组件有数据传递时，才有这个更新阶段执行顺序的比较。】destroyed ——》【父】destoryed。】mounted ——》【父】mounted。】updated ——》【父】updated。【父】beforeDestroy ——》【【父】beforeUpdate ——》【
2024-08-13 17:14:21
323
原创 解决vue 初始化页面闪动问题
使用 vue 开发时， 在 vue 初始化之前， 由于 div 是不归 vue 管的， 所以我们写的代码在还没有解析的情况下会容易出现花屏现象， 看到类似于{{message}}的字样， 虽然一般情况下这个时间很短暂， 但是还是有必要让解决这个问题的。
2024-08-01 17:34:54
641
原创 Vue 模版编译原理
vue 中的模板 template 无法被浏览器解析并渲染， 因为这不属于浏览器的标准， 不是正确的 HTML 语法， 所有需要将 template 转化成一个 JavaScript 函数， 这样浏览器就可以执行这一个函数并渲染出对应的 HTML 元素， 就可以让视图跑起来了， 这一个转化的过程， 就成为模板编译。这个示例只是一个简化的编译流程，实际的Vue编译器要复杂得多，包含更多的解析规则和优化策略。
2024-07-31 11:00:55
213
原创 简说是什么虚拟DOM （Virtual DOM ）
虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）。因为很多人是在学习 React 的过程中接触到的虚拟 DOM ，所以为先入为主，认为虚拟 DOM 和 JSX 密不可分。
2024-07-26 16:29:27
437
原创 粗解React 和 Vue 的异同
Vue与React都使用了 Virtual DOM + Diff算法， 不管是Vue的Template模板+options api 写法， 还是React的Class或者Function写法,最后都是生成render函数，而render函数执行返回VNode(虚拟DOM的数据结构，本质上是棵树)对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
2024-07-26 14:47:46
432
转载 vue 组件之间相互传值的6种方法
实现了数据从子组件向父组件的传递，遵循响应式设计原则。只能实现相邻组件之间的通信，对于多层级嵌套组件间的通信较为复杂。如果组件间交互复杂，可能会导致大量自定义事件的使用，影响代码可读性和可维护性。
2024-07-23 14:29:05
1733
原创 VUE 子组件可以直接改变父组件的数据吗
如果子组件需要修改父组件的数据，应该通过触发一个自定义事件来通知父组件进行数据的变更。父组件在接收到子组件触发的事件后，可以修改数据，从而间接地改变父组件的数据。这种方式通过明确的事件通信机制，保证了数据流的单向性和组件之间的解耦。需要注意的是，虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，但这种方式打破了数据流的单向性，增加了组件之间的耦合性，因此应谨慎使用。在Vue中，如果确实需要在子组件中修改父组件的数据，可以通过以下步骤实现：。
2024-07-23 10:46:58
722
原创 VUE之---slot插槽
slot【插槽】， 是 Vue 的内容分发机制， 组件内部的模板引擎使用slot 元素作为承载分发内容的出口。slot是子组件的一个模板标签元素， 而这一个标签元素是否显示， 以及怎么显示是由父组件决定的。
2024-07-22 10:50:59
2052
原创 JS 数据类型检测的方式有哪些
Object.prototype.toString.call() 使用 Object 对象的原型方法。可以用来测试一个对象在其原型链中是否存在一个构造函数的。返回的结果结构是[object 数据类型]，因此简单封装。通过ES6的Array.isArray()constructor 是每个。对象访问它的构造函数（实例的。基本类型封装成对象后才返回。属性，指向构造函数本身）；的类型，其内部运行机制是。在对值类型number。（1）判断数据的类型；
2024-07-16 16:59:18
439
原创 扩展运算符（...）的作用及使用场景
同样， 如果用户自定义的属性， 放在扩展运算符后面， 则扩展运算符内部的同名属性会被覆盖掉。如果目标对象与源对象有同名属性， 或多个源对象有同名属性， 则后面的属性会覆盖前面的属性。Object.assign 方法的第一个参数是目标对象， 后面的参数都是源对象。)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中，这里。，将原对象（source）的所有可以枚举属性，复制到目标对象（target）。(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。(如果将扩展运算符用于数组赋值，
2024-07-16 15:53:51
201
原创 js[数组、对象数组去重和删除指定值]；[判断空对象]
特点:创建一个空 Map 数据结构，遍历需要去重的数组，把数组的每一个元素作为 key 存到 Map 中。由于 Map 中不会出现相同的 key 值，所以最终得到的就是去重后的结果。特点:新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则 push 进数组。方法会删除数组中的最后一个元素，并返回该元素的值；特点:不考虑兼容性，这种去重的方法代码最少。方法会删除数组中的第一个元素，并返回该元素的值；当你想要删除特定的值时，这种方法更加简洁。
2024-06-25 17:00:08
856
原创 JavaScript 导致内存泄漏的场景和规避方法
在日常开发中，我们经常会无意识一些操作导致内存溢出。为此我总结一下内存溢出的几种场景供大家参考。希望能在优化自己代码的道路上有所帮助。
2024-06-19 17:03:36
873
原创 对this对象的理解
This 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。this的值并不是在函数定义时确定的，而是在。在实际开发中，this 的指向一般可以通过四种调用模式来判断。
2024-05-20 14:24:12
540
原创 call、apply、bind三者的区别
三者都可以改变函数的 this 对象指向。三者第一个参数都是 this 要指向的对象，如果如果没有这个参数或参数为 undefined 或 null，则默认指向全局 window。三者都可以传参，但是 apply 是数组，而 call 是参数列表，且 apply 和 call 是一次性传入参数，而 bind 可以分为多次传入。bind 是返回绑定 this 之后的函数，便于稍后调用；apply 、call 则是立即执行。
2024-05-13 14:52:02
578
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人