萬事順意 - 博客园

2024年3月18日

摘要： //判断对象为空对象 // 1. Object.keys() let obj = { } function getObjLength(){ console.log(Object.keys(obj).length 0) //true } getObjLength() // 2.Object.entri 阅读全文

posted @ 2024-03-18 10:14 萬事順意阅读(11) 评论(0) 推荐(0) 编辑

2024年3月17日

Vue — Vue3.0快速掌握

摘要：一.使用create-vue创建项目 1.环境条件 node版本在16.0以上 2.创建vue3.0应用 npm init vue@latest //创建 npm install //下载依赖 3.项目目录和关键文件 1.vite.config.js ：项目的配置文件基于vite的配置 2.pac 阅读全文

posted @ 2024-03-17 20:05 萬事順意阅读(30) 评论(0) 推荐(0) 编辑

2024年3月16日

React — zustand状态管理工具

摘要： zustand 是一个用于状态管理的简单而强大的库，它可以与 React 一起使用。它提供了一种简单的方式来管理组件的状态，并且遵循了 React Hooks 的使用规范。使用 zustand 可以方便地创建和共享状态，同时还能够实现状态的订阅和更新。通过 zustand，你可以创建自定义的状态钩阅读全文

posted @ 2024-03-16 18:52 萬事順意阅读(452) 评论(0) 推荐(0) 编辑

2024年3月15日

React — Class类组件

摘要：一、Class类组件基础模板 import './App.css'; import {Component} from 'react' class Counter extends Component{ //编写组件的逻辑代码 //1.状态变量事件回调 UI //2.定义状态变量 state = { 阅读全文

posted @ 2024-03-15 21:54 萬事順意阅读(147) 评论(0) 推荐(0) 编辑

React — forwardRef、useImperaiveHandle

摘要： forwardRef：获取子组件的DOM元素 React.forwardRef 是 React 提供的一个 API，用于在函数组件中向子组件传递 ref。通过使用 React.forwardRef，我们可以将 ref 传递给函数组件内部的 DOM 节点或其他组件，从而实现对其进行操作。 import 阅读全文

posted @ 2024-03-15 15:04 萬事順意阅读(48) 评论(0) 推荐(0) 编辑

React — React.memo

摘要： React.memo 是 React 提供的一个优化高阶组件，用于函数组件的性能优化。它类似于类组件中的 shouldComponentUpdate，可以帮助避免不必要的组件重新渲染。使用 React.memo 可以很方便地对函数组件进行性能优化，但需要注意的是，它只进行浅比较，如果 props 阅读全文

posted @ 2024-03-15 14:20 萬事順意阅读(33) 评论(0) 推荐(0) 编辑

React — useReducer使用方法

摘要： 1.定义一个reducer函数（根据不同的action返回不同的新状态） 2.在组件中调用useReducer，并传入reducer函数和状态的初始值 3.事件发生时，通过dispatch函数分发一个action对象（通知reducer）要返回哪个新状态并渲染UI import { useReduc 阅读全文

posted @ 2024-03-15 13:54 萬事順意阅读(42) 评论(0) 推荐(0) 编辑

2024年3月14日

React — 打包优化

摘要： 1.路由懒加载：（1）说明路由懒加载是指路由的JS资源只有在被访问的时候才会被动态获取，是为了优化项目首次打开的时间。（2）配置把路由修改为由React提供的lazy函数进行动态导入 import {Suspense, lazy} from 'react' //lazy函数对组件进行导入 c 阅读全文

posted @ 2024-03-14 17:38 萬事順意阅读(70) 评论(0) 推荐(0) 编辑

Vue — keep-alive详解

摘要：当使用 <keep-alive> 标签包裹组件时，Vue.js 会将这个组件缓存起来，而不是每次重新创建和销毁。这意味着组件的状态、数据和生命周期钩子函数都得以保留，以便在下次被激活时能够立即恢复到之前的状态。 <keep-alive> 的主要作用是优化组件的性能和用户体验，尤其适用于频繁切换或重复阅读全文

posted @ 2024-03-14 15:10 萬事順意阅读(32) 评论(0) 推荐(0) 编辑

Vue — vue中带有$的属性和方法

摘要：在 Vue.js 中，以 $ 开头的属性通常是框架内部提供的特殊属性或方法，用于访问 Vue 实例的一些内部属性或执行特定的操作。以下是一些常见的以 $ 开头的属性：属性： 1.$data：Vue 实例的数据对象，包含实例中定义的数据。 const app = new Vue({ data: { 阅读全文

posted @ 2024-03-14 14:15 萬事順意阅读(708) 评论(0) 推荐(0) 编辑