米朵家的博客-CSDN博客

原创 webpack和vite

是一个快速、轻量级的现代Web开发构建工具，它利用现代浏览器的原生ES模块加载功能，实现了开发环境中的快速冷重载和构建速度。相比于Webpack的构建过程，Vite的开发速度更快，也更适合小型、简单的项目。具有很高的可配置性和灵活性，使得开发者可以使用各种插件和配置文件来优化它们的工作流程。Webpack适用于大型、复杂的项目，它可以处理多种不同类型的文件（如js、css、图片等），并根据需求进行转换、压缩和打包。但是，Webpack的配置可能比较复杂，需要花费一定的时间和精力进行学习和调试。

2024-04-26 08:40:27 861

原创自定义指令，常用的自定义指令

开发Vue项目时，大多数人都会使用到Vue内置的一些指令，例如v-model、v-if等，不过指令也是可以自定义的，为什需要自定义一个指令，其实就是想更加简洁地重复使用操作DOM的逻辑，这就和组件化和组合式函数差不多。不管是内置的指令还是自定义指令，都是类似于组件的生命周期，可以在不同的生命周期完成不同的逻辑操作，并绑定到组件元素上，这就产生了自定义指令。自定义指令的定义方式非常简单，只需要调用Vue.directive( )方法，并传入两个参数：指令名称和指令选择对象。指令选择对象可以包含多个属性。

2024-04-02 21:06:39 1142

原创 vue3 中自定义hooks

Hooks技术最早是由React团队的Sophie Alpert和Abramov在2018年提出来的，最初是为了解决React类组件中状态逻辑复用的问题而提出来的。在React使用类组件时，为了复用状态逻辑，需要使用高阶组件或者Render Props等方式，这些方式会增加代码的复杂度和维护成本。而Hooks技术是使用特定函数来“钩到”React的state和生命周期等特性的技术。它可以让我们在函数组件中使用state以及其他的React特性，代替传统的类组件或高阶组件等方式。

2024-04-01 16:40:56 1150

原创路由---解析

路由(route)：就是根据特定的规则将数据包或请求从源地址传输到目标地址的过程。在前端或者vue3项目中路由主要用于构建单页面应用程序（SPA），其中所有的页面都在同一个HTML文件中加载，通过JavaScript动态地切换显示不同的内容。路由器（Router）：路由器是负责管理路由的组件或模块。它定义了路由的规则、路径和对应的处理函数或组件。请着重注意，路由器（Router）与路由（Route）的区别。路由器是用来管理路由的，你也可以理解为路由的集合。

2024-04-01 11:46:20 739

原创组合式API和选项式API

Vue3的组合式API是在vue2的基础上新增的API，它通过提供一组函数式API来让开发者更方便地组合和复用组件逻辑。相较于vue2的选项式API，组合式API更加灵活和易于理解，同时也提供了更好的类型提示和代码重用性。组合式API（Composition API）是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。响应式API：例如ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子：例如和。

2024-03-29 19:44:06 2765

原创 pinia是什么，以及如何使用

Vuex是一个专门为Vue.js应用程序开发的状态管理库，它使得在应用程序中管理共享状态变得更加容易和可维护。在一个典型的Vue.js应用程序中，数据状态可能会分散在多个组件中。当应用程序的规模变大时，状态的管理会变得越来越复杂。使用Vuex可以将应用程序的状态集中管理，并提供了一些功能，如状态共享、状态响应式、组件间通信等。Vuex采用集中式存储管理应用的所有组件的状态，解决多组件数据通信问题。它可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

2024-03-28 19:34:02 993

原创 vue封装组件的流程

1，组件(Component)是Vue最强大的功能之一2，组件可以扩展HTML元素，封装可重用代码3，在较高层面上，组件是自定义元素，vue的编辑器为它添加特殊功能4，某些情况下，组件也可以表现用 js 特性进行了扩展的原生的HTML元素5，所有的vue组件同时也都是vue实例，所以可以接受相同的选择对象（除了一些根级特有的选项）并提供相同的生命周期钩子函数。

2024-03-20 19:03:18 431

原创 em和rem的区别，rem适配的原理

rem是CSS3中新增的一个单位，目前移动开发使用也是最广泛的，同样，它也是一个相对单位，不过相对的是HTML根元素，和em不同的是，rem不用时时去关注父级的情况。根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验。rem与em都是相对单位，我们使用它们的目的就是为了适应各种不同的移动端和pc端的屏幕。rem是根据html根节点来计算的，而em是根据父级元素的字体计算的。

2024-03-15 10:03:37 1640

原创 vue中 computed和watch 的区别

在Vue.js中，computed和watch都是常用的数据监控方法。都用于监视数据的变化并执行相应的逻辑，只是实现方式和适用的场景不同。

2024-03-14 19:36:20 340

原创什么是前端脚手架？

前端安装脚手架是一种提高开发效率的方法，它可以帮助我们快速创建项目的基本结构和配置。脚手架（scaffold）是一种自动化生成项目模板的工具，它可以根据我们的选择和需求，创建项目的目录结构、文件、依赖、配置等。使用脚手架可以节省我们手动创建和配置项目的时间和精力，让我们专注于业务逻辑的开发。

2024-03-13 19:10:35 412

原创 vue3和vue2的生命周期钩子函数

Destroy用于清除定时器以及解绑事件等。销毁前：beforeDestroy --------> onBeforeUnmount(()=>{})更新前：beforeUpdate --------> onBeforeUpdate(()=>{})挂载前：beforeMount --------> onBeforeMount(()=>{})创建前：beforeCreate --------> setup(()=>{})挂载后：mounted --------> onMounted(()=>{})

2024-03-10 10:34:30 2171

原创同源策略和跨域解决方案

所谓同源是指：域名协议端口相同。1 当浏览器中一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。2 用户在使用浏览器的情况下会使用到 CORS，因为控制访问权限的是浏览器而非服务器。因此使用其它客户端的时候无需关心任何跨域问题。3 同源策略(Same Origin Policy)是一种约定，它是浏览器最核心也是最基本的安全功能。

2024-03-09 10:20:29 692

原创 vue2和vue3的自定义指令

除了核心功能默认内置的指令（`v-model和v-show`），vue也允许注册自定义指令，在vue3中，代码复用和抽象的主要形式是组件，然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。也就是当你要对普通的DOM操作时，或子组件需要实现dom操作时，可以通过自定义指令实现。局部自定义指令：只在组件内有效全局自定义指令：所有组件都有效el: 指令所绑定的元素，可以用来直接操作DOM。binding: 一个对象，包含指令的很多信息。

2024-03-08 10:11:07 539

原创 ts封装axios

在前端项目中，和后台交互获取数据这块，我们通常使用的是axios库，axios是一个基于promise的HTTP库，可运行在client端和server端。虽然axios的使用已经很方便了，但是在实际项目中，为了接口的规则一致，来创建一个统一管理的全局方法以达到简化操作的目的。

2024-03-05 09:38:04 494

原创什么是闭包，使用场景

闭包的定义：闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。闭包=内层函数+引用的外层函数变量。1.闭包其实是在函数内部定义—个函数。2.闭包在使用的时候不会释放外部的引用，闭包函数内部的值会得到保留。3.闭包里面的匿名函数，读取变量的顺序，先读取本地变量，再读取父函数的局部变量。4.对于闭包外部无法引用它内部的变量，因此在函数内部创建的变量执行完后会立刻释放资源，不污染全局对象。

2024-03-01 21:04:10 217

原创什么是重排与重绘，如何减少重排

10.查询某些属性或调用某些计算方法：offsetWidth、offsetHeight 等，除此之外，当我们调用 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个 “即时性” 和 “准确性”。浏览器会维护一个队列，把所有会引起重排、重绘的操作放入这个队列，等队列中的操作到了一定数量或者到了一定的时间间隔，浏览器就会 flush 队列，进行一个批处理。1. 减少直接操作 DOM 元素。

2024-03-01 09:39:52 1105

原创防抖和节流

【代码】防抖和节流。

2024-02-28 20:20:11 371

原创 vue3组件常用的通信方式

4.pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。provide和inject是Vue中提供的一对API，该API可以实现父组件向子组件传递数据，无论层级有多深，都可以通过这对API实现。pinia 和 vuex 具有相同的功效，是 Vue 的存储库，它允许您跨组件/页面共享状态。设计使用的是 Composition api，更符合。

2024-02-27 21:01:06 871

原创 css3 新特性 + css3 动画

/ 那个属性发生变化了// 过渡动画执行时长// 过渡动画执行速度 linear匀速的// // 过渡动画是否延时执行// transtion 混合属性。

2024-02-27 14:23:47 1992

原创数组常用的20个方法

1.join( )用于把数组的所有元素连接并转换成字符串。默认用逗号作为分隔符。如果分隔符是空字符串，则所有元素之间没有任何字符。

2024-02-26 09:19:07 3251 1

WZH15075051915的博客