m0_49471668的博客

原创 Vue中的data必须写成函数

JavaScript中对象是引用类型，若直接定义data为对象，所有组件实例将共享同一内存地址。Vue中的data必须写成函数是为了确保每个组件实例拥有独立的数据副本，避免多个实例共享同一数据对象导致的状态污染问题。调试维护‌：隔离的数据作用域使状态变更更可预测，降低复杂应用的调试难度。Vue根实例允许data直接为对象，因为根实例通常不会复用，无需隔离数据。data: { count: 0 } // 所有实例的count同步变化。内存管理‌：实例销毁时，独立的数据对象更易被垃圾回收，减少内存泄漏风险。

原创 Vue 组件封装规范

单一职责原则：每个组件只做一件事清晰接口：Props、事件和插槽定义明确无副作用：不修改外部状态，不依赖全局状态样式封装：使用 scoped CSS 避免污染完整文档：提供使用示例和 API 说明全面测试：单元测试覆盖核心功能可访问性：支持键盘导航和屏幕阅读器响应式设计：适配不同屏幕尺寸遵循这些规范将帮助您创建出高质量、可维护且易于团队协作的 Vue 组件。

原创 HTTP中PUT

PUT方法是 HTTP 协议中定义的重要请求方法，主要用于。

原创 Vue 开发前端项目的完整流程

按照此流程，可高效构建可维护的 Vue 项目。或社区资源（如 Vue Mastery）深化学习。

原创 v-model 的双向绑定原理

是 Vue 中最强大的指令之一，它实现了数据的双向绑定。让我们通过一个可视化示例来深入理解其工作原理。 本质上是语法糖，它结合了 （属性绑定）和 （事件监听）两个功能：双向绑定可视化示例关键实现原理详解1. 原生表单元素的双向绑定对于原生表单元素，v-model 根据元素类型自动选择正确的属性和事件：2. 自定义组件的双向绑定在自定义组件中，v-model 默认使用 属性和 事件：3. Vue 3 中的改进在 Vue 3 中，v-model 有以下改进：总结v-model 的双向绑

原创 Vue 项目中封装请求拦截器和响应拦截器

在 Vue 项目中封装请求拦截器和响应拦截器通常使用 Axios 库。

原创 vue封装请求拦截器 响应拦截器

1. **环境配置**：在 `.env.development` 和 `.env.production` 中配置不同的 `VUE_APP_BASE_API`error.message = `请求地址出错: ${error.response.config.url}`Vue.prototype.$http = request // 组件内使用 this.$http.get(...)Message.error(res.message || '请求失败')error.message = '请求错误'

原创 React和Vue

创建方式: 使用JSX（JavaScript XML），这是一种JavaScript的扩展语法，允许在JavaScript代码中写类似HTML的标记。如果你的项目需要高度的可维护性和灵活性，或者你已经熟悉函数式编程，那么React可能是更好的选择。学习曲线: 模板语法更接近传统的HTML，因此对于熟悉HTML的开发者来说，学习曲线更平缓。创建方式: 使用模板语法，类似于HTML，但加入了指令和插值表达式等Vue特有的功能。学习曲线: 对于初学者来说，JSX的语法可能稍显复杂，需要一定的学习成本。

原创 CSS中实现一个三角形

而使用伪元素的方法更加灵活，可以轻松地控制三角形的位置和方向，但需要额外的CSS代码来实现定位。在CSS中实现一个三角形，通常有两种方法：使用边框（border）属性和使用伪元素（::before 或 ::after）。在使用伪元素方法时，通常需要设置一个相对或绝对定位的父元素（例如，将.triangle的position设为relative），以便正确放置伪元素。这种方法依赖于边框的透明性，通过将一个元素的宽度和高度设为0，然后只设置其中一个方向的边框为非透明色，可以实现三角形的形状。

原创 vue2响应式的弊端与处理方法

然而，随着应用的复杂性和规模的增长，Vue.js 的响应式系统也可能带来一些挑战和弊端。使用 Vue.set 或 Vue.delete：对于对象需要动态添加新属性或删除属性的情况，可以使用 Vue.set 或 Vue.delete 方法来确保新属性是响应式的。使用观察者（Watchers）：对于需要执行异步或开销较大的操作时，可以使用观察者来监听数据变化，只在必要时执行操作。使用 Vue.set 来修改数组或对象中的项：对于需要通过索引直接修改数组元素的情况，使用 Vue.set。// 移除事件监听器。

原创 Vue中更新数组而不触发页面刷新的解决方案

您之前询问过"为什么数组更新后页面没有更新"，了解到这是因为导致框架无法检测数据变化。现在您想进一步了解在Vue中如何实现数组更新而不触发页面刷新的方法。

原创 const声明的对象不修改属性

然而，如果这个常量是一个对象或者数组，你依然可以修改其内部的属性或者元素，因为const关键字只保证了变量标识符（即变量名）所引用的内存地址不变，并不阻止对对象内部属性的修改。方法来定义属性，并通过设置属性的特性（如writable, configurable, enumerable）来限制对属性的修改。如果你想要保护一个对象不被修改（即不允许添加新的属性，也不允许修改现有属性的值），你可以使用。// 这不会有任何效果，因为属性是只读的。通过这些方法，你可以控制对通过const声明的对象属性的修改。

原创 **工作日报 - [日期]** 今日重点围绕前端开发中的两个关键问题展开分析与总结：一是针对Vue 2框架响应式系统的局限性及优化策略；二是探讨如何实现真正不可变的对象定义。以下是具体内容梳理：

一、Vue 2响应式机制潜在问题及应对方案在Vue 2项目中，发现其响应式系统存在若干典型缺陷。首先是数组操作的局限性，直接通过索引修改数组元素或使用非变异方法（如filter）时，视图无法自动更新。解决此问题需强制使用push、splice等受监听的变异方法，或通过this.$set显式触发更新。其次是动态新增对象属性时，若未提前声明或使用Vue.set，新属性不会触发响应式更新。此外，异步批量更新机制可能导致连续快速修改时的竞态问题，可通过this.$nextTick确保执行顺序。

原创 【无标题】

每个函数都有prototype属性 称为原型 也叫原型对象。防抖：单位时间内 多次点击 定时器没结束前 重新记时。声明常量 声明后不可修改 不可修改的不是值 是。节流：单位时间内 多次点击 只执行第一次。原型对象的_proto_属性指向原型对象。闭包就是能读取其他函数内部变量的函数。未声明前使用为undefined。原型对象可以用来挂载属性和方法。每个对象都有_proto_属性。使变量常驻在内存中，缓存变量。这个属性指向它的原型对象。全局作用域或函数作用域。原型对象可以用来继承。

原创 原型对象，构造函数，实例对象三者通过什么样的属性指向？

原创 浏览器缓存机制与方式

强缓存的缓存策略主要由http响应头中的两个字段进行控制：cache-Control 和expires，cache-control优先级更高。若未配置协商缓存流程，则重新向服务器请求资源，更新缓存，并根据响应头中的cache-control字段，更新当前缓存的缓存策略。再次请求：浏览器判断缓存资源是否过期，若资源未过期，则直接从本地缓存获取资源，不与服务器进行通信；缓存资源：浏览器根据响应头中的缓存策略，将资源缓存到本地，并记录有效期。若资源已过期，且配置了协商缓存，则走协商缓存流程；

原创 promise背诵

promise是es6提供的构造函数 可以使用promise new一个实例 promise接收一个函数作为参数，这个函数有两个参数 分别是resolve和redject resolve将promise的状态由等待变为成功 并将异步操作的结果作为参数传递过去 reject将prommise的状态由等待变为成功，并将异步操作的错误作为参数传递过去。promise是异步微任务 promise解决异步嵌套回调问题 提高代码的可读性可维护性。状态改变之后就不再改变。

原创 注册登录如何实现的？登录之后后端给你返回一个token，那你会把token存在什么地方？那比如说当你的用户第二次进你的页面的时候，你是通过怎样的方式判断他是已经登录过的呢？还是未登录过的？

分享我和讯飞星火大模型的对话，点击链接查看：https://xinghuo.xfyun.cn/share?

原创 面试题记录与

1.vue2和vue3的区别。3.js为什么是单线程。2.wepack打包。

原创 vue2和vue3区别是什么

vue3简洁了生命周期函数 移除了beforecreated 和created 并引入了新的setup钩子 作为初始化阶段的核心 这个钩子在组件创建实例化数据之前执行 并且可以直接访问响应式数据。总的来说 vue3不仅在底层机制上 进行了深度改造 提升了性能和易用性 还在API设计层面 赋予了开发者更大的灵活性和更高的代码组织自由度 是vue的重大飞跃。vue3是组合式API 允许开发者使用函数编程思维 组织逻辑 通过setup函数集中管理组件的状态逻辑 提高代码的可复用性和逻辑的模块化程度。

原创 ‌Webpack打包流程

该流程通过递归分析模块依赖关系，结合加载器和插件处理各类资源，最终生成优化后的静态文件。

原创 为什么js是单线程？

js的单线程 主要与它的用途有关。作为浏览器脚本语言，js的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。如果js同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除这个节点，浏览器不知道以哪个为准。为了避免复杂性，一诞生，js就是单线程，是这门语言的核心特征。为了利用多核CPU的计算能力，html5提出WebWorker标准，允许js脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM，所以这个标准并没有改变js单线程的本质。

原创 面试题目记录

10.display：none和visibility：hidden的区别。5.cookie和local session。3.position几种。4.webpack打包。7.vue和react。

原创 成语积累学习

味同嚼蜡：如同咀嚼白蜡一样，毫无味道。形容文章或言辞枯燥乏味。雨后春笋：春雨过后快速生长的竹笋；比喻大量涌现的新生事物。八面玲珑：处世圆滑，各方面都不得罪。沆瀣一气：臭味相投的人勾结在一起。举棋不定：拿不定主意，办事不果断。信口开河：不经思索、不负责任地。左右逢源：办事圆滑，各方讨好。识文断字：有一点文化知识。差强人意：大体上让人。

原创 this.$router.back返回上一页带参数，上一页面接收参数做出判断

【代码】this.$router.back返回上一页带参数，上一页面接收参数做出判断。

原创 内部类（成员内部类、静态内部类、局部内部类、匿名内部类）

【代码】内部类（成员内部类、静态内部类、局部内部类、匿名内部类）

原创 接口的应用、 适配器设计模式

【代码】接口的应用、 适配器设计模式。

原创 JDK7 JDK8 JDK9接口中的默认方法、静态方法、私有方法

JDK8的新特性：接口中可以定义有方法体的方法（默认、静态）JDK9的新特性：接口中可以定义私有方法。JDK7以前：接口中只能定义抽象方法。

原创 代码实现手机样式

苹果：https://juejin.cn/post/7151426528725696525华为：CSS制作华为mate8手机模型示例-CSDN博客

原创 JAVA学习

下载jdk17安装：路径不要包含中文和空格JDK安装目录：bin:存放各种工具命令 ，比较重要有javac和javaconf:存放配置文件include：存放平台特定头文件jmods:存放各种模块legal：存放各模块授权文档lib:存放工具补充JAR包。

原创 正则表达式中 空格问题

1

原创 JSON.stringify出现 “Converting circular structure to JSON”

上面的错误信息告诉我们， 对象中存在循环引用. 解决思路就是通过自定义stringify方法，设置一个全局缓存变量，stringify的第二个参数如果是function时，他会传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。JSON.stringify大家已经不陌生了，是一个将json对象转换为字符串的方法。

原创 数组对象转换为二维数组

【代码】数组对象转换为二维数组。

原创 el-tree设置结构线和图标

【代码】el-tree设置结构线和图标。

原创 vue项目列表跳转详情返回列表页保留搜索条件

,//如果有就读取缓存里面的数据//搜索的数据} else {//其他页面第一次进入列表页，清掉缓存里面的数据进入详情的时候保存一下页码和搜索的信息},离开页面的时候清除定义的字段// 销毁组件},

原创 解决 Element-ui中 表格（Table）使用 v-if 条件切换后，表格的列的筛选不显示了

这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。

原创 fillText和fillRect的fillStyle互相影响

是Canvas API的两个方法，分别用于填充文本和矩形。它们都使用了fillStyle属性来确定填充的颜色。如果你想要在填充矩形的同时保留文本的填充颜色，你可以在调用。会创建一个新的路径，并且这个新的路径会成为当前路径，而。就会在新路径上创建矩形，而不会影响到之前的文本路径。，并且两者使用了相同的fillStyle属性，那么。方法开启一个新的路径。是在之前的路径上创建的。

原创 fillText不显示，strokeText显示

是 HTML5 的 Canvas API 中的两个方法，分别用于填充文本和描边文本。这是一个示例代码，显示如何使用。

原创 vue项目，使用query传参，页面刷新后数据丢失（接收参数后，页面刷新数据丢失）

【代码】vue项目，使用query传参，页面刷新后数据丢失（接收参数后，页面刷新数据丢失）

原创 Vue+element实现点击复制功能

所以第二个方法就是创建一个input后再自动选择内容,实现复制功能。点击按钮或指定位置后将数据复制到剪贴版,避免手动复制。但是这个是需要文字被选中时才可以复制成功。