muzidigbig-CSDN博客

原创 Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序

随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。一、什么是 vue 生命周期Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片二、生命周期函数Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/

2021-01-16 12:24:24 38607 10

原创 js编程黑科技，装逼指南，高逼格代码，让你惊叹不已

1.如何装逼用代码骂别人SB(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]2.如何用代码优雅的证明自己NB([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]3.另外一种undefinedvar data = void 0; // undefined4.论如何优雅...

2019-04-03 16:56:36 7388

原创前端好用工具推荐

1.图片处理工具Jinaconvert工具网站地址：https://jinaconvert.com/cn/这款图片处理工具也相当的强大，想要的各种各样的格式（JPG, PNG, GIF, BMP, TIFF, ICO, SVG和更多图片格式）都可以转换，在编程和生活中都可以用得到，赶紧收藏起来吧。2.代码在线测试工具 https://tool.lu/可以对js、css、...

2019-04-03 12:20:17 1083

原创 js-函数（闭包、私有、递归、自调）、变量(隐士)和作用域

JavaScript 函数将脚本编写为函数，就可以避免页面载入时执行该脚本。打印定义的函数名就相当于打印这整个函数函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。创建函数的语法：function 函数名(var1,var2,...,var...

2018-06-21 16:51:05 2791 1

原创 pc端和移动端默认样式重置(rem布局)

首先说一下，为何要用重置样式除了省心之外，还有两个好处1.方便设计师/程序员发挥白纸的感觉确实好。各种margin，padding，border的为0。。。2.便于发现前端代码的遗漏用了reset后，如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”，会非常扎眼（任何人都看得出来），开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没r...

2018-06-05 19:20:31 1694 1

原创 vue.js 三种方式安装(vue-cli)

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。下面介绍三种 Vue.js 的安装方法： 1.独立版本我们可以在Vue.js的官网上直接下载vueassets和static的区别pnpmnvm(管理Node版本)、nrm(管理镜像源) 详解Vue生命周期父子组件的执行顺序

2018-05-29 07:49:05 340981 120

原创文本在盒子中水平、垂直居中（图片与文本居中）、多行文本垂直居中、盒子居中

在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<t...

2018-05-23 10:37:12 35202 2

原创 html默认css样式的标签及去除(全局)

1.标签的默认样式和清除默认样式（统一全局样式）的代码大多数标签都有自己的默认样式，比如遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地...

2018-05-19 09:27:11 41627

原创为什么 React 的函数组件每次渲染执行两次

为什么 React 的函数组件每次渲染执行两次React 的函数组件在每次渲染时会执行两次的原因是什么？React 函数组件为什么会在渲染时执行两次而不是一次？React 函数组件为什么会执行两次而不是一次呢？有什么好处？

2024-08-16 09:08:28 1778

原创 React 中 react-i18next 切换语言（项目国际化）

首先在项目中安装i18n插件，然后将插件引入到项目，然后配置语言包（语言包需要你自己来进行配置，自己编写语言包，或者你能找到跟你项目适配的也可以），然后就用特定的方法来展示可以切换语言的字段。通过调用这个i18n changeLanguage(languageType) 这样一个方法就可以简单的修改我们当前的语言。3.4、在reducer中要操作i18n的配置文件。：对 i18n 进行初始化操作及插件配置。config 中配置切换语言。来完成语言配置的数据注入。，以存放国际化相关配置。

2024-08-12 07:15:40 844

原创 nvm(管理Node版本)、nrm(管理镜像源) 详解

NodeVersionManager（NVM）在处理多项目中不同Node.js版本需求的解决方案。pnpm 至少支持的node版本为： 18.12nrm 是一个 npm 源管理器，允许你快速地在 npm源间切换。

2024-08-12 07:14:19 7354

原创 React 解决跨域

这里注意，http-proxy-middleware 模块是有版本区别的，默认安装最新版本，然后在 src 目录下新建。并非Webpack打包工具，直接使用server的proxy属性即可。react简单解决跨域可以直接在。http-proxy-middlewareAccess to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORSpolicy: No 'Access-Control-Allow-Origin'

2024-08-08 09:02:17 807

原创 react-router-dom使用指南（最新V6.22.2）

查询参数不需要在路由中定义使用 useSearchParamshook 来访问和修改查询参数。其用法和 useState类似，会返回当前对象和更改它的方法使用 setSearchParams时，必须传入所有的查询参数，否则会覆盖已有参数// 当前路径为 /foo?// /foo?name=foo通过嵌套的书写Route组件实现对嵌套路由的定义。path开头为的为绝对路径，反之为相对路径react-loadableNavLink高亮useRoutes的返回是 React Element，或是 null

2024-08-06 16:47:23 1120

原创 React 全讲解

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。React基础React入门react-router路由懒加载 React.lazy() SuspensereduxReact类组件中的thisReact组件通信React.createElement()NavLink高亮react-app-rewiredconfig-overrides.jsclassnames

2024-08-06 07:33:39 1223

原创 URLSearchParams：JavaScript中的URL查询参数处理工具

我们可以看到URLSearchParams的强大之处，它简化了URL参数的获取、解析、构建和更新过程。无论是从URL中获取参数值，还是构建具有特定参数的URL，URLSearchParams都是一个非常有用的工具。在上述示例中，通过window.location.search获取当前URL的查询参数部分，并使用URLSearchParams对象解析该参数。除了获取和解析URL参数，URLSearchParams还提供了方便的方法来构建和更新URL参数。url-search-params-polyfill

2024-07-29 09:32:10 1364

原创 lodash与lodash-es 工具库区别

lodash与lodash-es 工具库区别Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库，Node.js版本需>6。lodash 是默认的commonjs版本，是为了良好的浏览器兼容性, 它使用了旧版es5的模块语法，体积大。Lodash 是一个非常流行的 JavaScript 实用工具库，涵盖了数组处理、对象操作、函数式编程、字符串处理等。lodash-es 是 Lodash 库的 ECMAScript 模块版本，支持 ES6 模块的环境下提供的模块化版本。

2024-07-13 16:26:30 1499

原创使用void 0替代undefined

在很多大厂的规范里面，有这么一条规定：不让直接使用undefined关键字，而应该使用void 0来替代undefined。void是一个关键字，他后面跟的是一个表达式，不管这个表达式算的是啥，后面随便写个东西，最终整个表达式返回一个undefined；比如void 123456;最终结果返回的都是undefined；在void后面随便写个0 1 2啥的都无所谓，只是习惯统一写个0；让这个东西来替代书写undefined。

2024-07-08 13:22:24 484

原创 Vue2/3中的this

Vue3.0中this的替代方法，Vu3获取thisgetCurrentInstance() 方法，获取当前组件的实例，通过 ctx(开发)或 proxy(开发、生产) 属性获得当前上下文，从而就能在setup中使用router和vuexVue2中，为什么this能直接获取到data和methods通过this能直接获取到methods，是因为在new Vue的时候遍历了methods，为每一个methods方法通过bind指定了this，也就是指定了this为new Vue的实例（vm）。

2024-06-25 12:56:35 915

原创微信小程序接入支付功能并实现支付

因此，在本文中，我们将介绍如何在微信小程序中实现微信支付。个人感觉类似微信小程序开发添加的request合法域名, 上面添加的这个目录,应该和你在后期在程序后台写的最终方法调用名一致,假设这里你设置的是 https://abc.cn/mypay/payOP。需要注意的是，在调用支付模块之前，需要先引入支付模块，并进行相应的设置和参数传递。2. 设置API密钥: 依次找到商户平台->账号中心->API安全->设置APIv2密钥设置后,可以把密钥拷贝出来记住,下面的code部分也需要该信息。

2024-03-26 17:42:02 6249

原创 Vue3 组件之间的通信

props父传子emits子传父mitt任意组件互传provide inject跨组件传值插槽传结构v-model

2024-03-22 21:43:27 1729 2

原创 Vue3 基础

ref reactive Object.defineProperty() Proxycomputed() 计算属性watch() 监听数据watchEffect()toRef unref triggerRef() 更新视图shallowRef shallowReactivereadonly shallowReadonlytoRaw markRawrouter路由导航守卫组件通信父传子子传父任意组件通信mitt provide inject组件命名vue3 setup获取父实例

2024-03-22 21:41:32 1787

原创修饰符.sync与v-model区别

1、相同点都是语法糖，都可以实现父子组件中的数据的双向通信。2、区别点使用格式：传值方式：注意：v-model 只能有一个；.sync 可以有多个。此外，.sync是Vue 2中的指令，而在Vue 3中，v-model取代了.sync的位置，并且可以在一个组件中使用多次。修饰符.sync与v-model区别

2024-03-20 13:26:35 1021

原创前端面试题

1、vue2和vue3的主要区别1、性能优化：Vue3对虚拟DOM进行了优化，例如使用了更高效的算法，缩减了代码量。此外，Vue3还利用Proxy代理优化了响应式系统，提高了性能。2、新特性：Vue3引入了Composition API，是一种函数式API。Composition API使得组合逻辑更加容易，能够更好地重用组件逻辑。3、Tree-shaking：Vue3支持更好的Tree-shaking（摇树优化）能力，使得项目打包后更加精简，加载速度更快。4、Typescript支持：Vue

2024-03-18 23:52:19 956

原创 JS的四种设计模式

工厂模式简单的工厂模式可以理解为解决多个相似的问题单例模式只能被实例化(构造函数给实例添加属性与方法)一次沙箱模式将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值发布者订阅模式就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送通知所有的订阅者：发布者触发时依次执行缓存列表里所有的订阅者回调

2024-03-18 21:25:12 582

原创 HTTP和HTTPS的区别，HTTPS加密原理是?

总之，HTTPS通过加密和认证技术保证数据传输的安全性，是一种更加安全可靠的网络传输协议，比HTTP更适合传输敏感信息和保护用户隐私。HTTP和HTTPS都是网络传输协议，主要用于浏览器和服务器之间的数据传输，但它们在数据传输的安全性、加密方式、端口等方面有所不同。

2024-03-16 23:35:28 1062 1

原创微信小程序基础面试题

微信小程序自定义 TabBar 是指开发者可以自己定义底部的 TabBar，而不是使用微信小程序原生的 TabBar。自定义 TabBar 可以让小程序的底部导航更加灵活多样化，同时也可以更好地满足用户的需求。自定义 TabBar 的实现方法是在小程序的 app.json 文件中定义一个 tabBar 字段，通过设置tabBar.custom 属性为 true，告诉小程序使用自定义 TabBar。同时，还需要在 tabBar.list 字段中设置自定义 TabBar 的样式和图片等信息。

2024-03-15 16:52:51 3111 1

原创前端接口防止重复请求实现方案

虽然大部分的接口处理我们都是加了的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做。

2024-03-15 00:20:22 1232

原创前端大屏适配几种方案

缺点：1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.当缩放比例过大时候，字体会有一点点模糊，就一点点 3.当缩放比例过大时候，事件热区会偏移。通过监听浏览器窗口的大小，来改变scale的比例，从而实现数据大屏适配。（百度、网易等大数据适配的解决方案均是这个）我们整个大屏的尺寸设置和设计图一样，只是通过css的scale放大缩小属性，来控制实际展示的大小。方案二：scale（缩放）强烈推荐。空白的部分用背景图片填充就好了。1920*1080的设计稿。

2024-03-13 12:18:29 4729

原创 Vue首屏优化方案

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。

2024-03-11 20:00:01 2223

转载 js实现实时刷新(setInterval、WebSocket、EventSource)

可能有很多的同学有用 setInterval 控制 ajax 不断向服务端请求最新数据的经历看下面的代码：当结果返回之后再延时触发下一次的请求，这样虽然没办法保证两次请求之间的间隔时间完全一致但是至少可以保证数据返回的节奏是稳定的，看似已经实现了需求但是这么搞我们先不去管他的性能就代码结构也算不上优雅，为了解决这个问题可以让服务端长时间和客户端保持连接进行数据互通h5新增了和 EventSource 用来实现长轮询，下面我们来分析一下这两者的特点以及使用场景。

2023-12-06 21:10:57 1961

原创 http面试题，三次握手四次挥手

在浏览器中输入网址按下回车经历了一个怎样的过程？总的来说分为以下几个过程：1、DNS解析：将域名解析为IP地址;2、TCP连接：TCP三次握手;3、发生HTTP请求;4、服务器处理请求并返回HTTP报文;5、浏览器解析渲染页面;6、断开连接：TCP四次挥手;

2023-12-02 20:37:15 1761

原创 Vue中实现自定义指令（directive）生命周期及应用场景

/ 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式.})new Vue({router,store,

2023-11-30 11:40:15 5960

原创 Vue3.x 中 hooks 函数封装和使用

Vue3 自定义 Hooks 是组件下的函数作用域的，而 Vue2 时代的 Mixins 是组件下的全局作用域。Vue2 时代 Option Api ，data、methos、watch.....分开写，这种是碎片化的分散的，代码一多就容易高耦合，维护时来回切换代码是繁琐的！utils 是通用的工具函数，而 hooks 是对 utils 的一种封装，用于在组件中共享状态逻辑和副作用。它的主要作用是 Vue3 借鉴了 React 的一种机制，用于在函数组件中共享状态逻辑和副作用，从而实现代码的可复用性。

2023-11-30 10:25:28 2189

原创 Vue性能优化方法

1 在项目中，有一个比较大的组件需要加载，但是这个组件并不是每个页面都需要用到。我们大家都知道我们vue页面中所有的dom都是通过js执行然后才渲染完成的，我们的html代码实际上仅仅只有几十行，那么我们如果加载js时很慢页面就会出现一段白屏阶段，那么这个白屏阶段给用户的体验就不是很好，我们是否可以给一些显示给用户看呢？当我们的js加载完成之后我们的img就会被覆盖了，所以这种效果是特别好的，因为静态资源是在我们的项目当中直接有的，所以加载效率会特别的快，所以尽量让图片的大小变小这样会更好的提高项目效率。

2023-11-29 19:59:51 1381

空空如也

空空如也