2024 年 3月随笔档案 - 萬事順意

React — 原理面试题-持续更新

摘要：1.什么是React事件，什么是原生事件？两者的区别在哪儿？ React 事件: React 事件是经过封装和合成的，以保证在不同浏览器上的一致性。在使用 React 中的事件处理时，你会给 JSX 元素添加事件处理函数，比如 onClick、onChange 等，然后在事件处理函数中处理相应的逻辑阅读全文

posted @ 2024-03-28 20:02 萬事順意阅读(2074) 评论(0) 推荐(0)

React — 通用hooks封装

摘要：1.UseLocalStorage：该 Hook 用于在本地存储中存储和检索数据。在组件之间共享和保持状态，并且在页面重新加载时保持数据的持久性。 import { useState } from 'react'; const useLocalStorage = (key, initialValue 阅读全文

posted @ 2024-03-28 12:24 萬事順意阅读(356) 评论(0) 推荐(0)

React— React面试题按照学习顺序持续更新

摘要：1.React的特点采用组件化模式，命名式编码，提高代码复用率；在React Native中可以使用react语法进行移动端开发使用虚拟DOM（v-dom）和diff算法，减少DOM和浏览器的交互 2.babel在React的作用 ES6语法转ES5，如箭头函数、模板字符串、解构赋值等。Bab 阅读全文

posted @ 2024-03-28 11:49 萬事順意阅读(54) 评论(0) 推荐(0)

判断对象是否为空对象的方式

摘要：//判断对象为空对象 // 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 萬事順意阅读(41) 评论(0) 推荐(0)

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 萬事順意阅读(214) 评论(0) 推荐(0)

React — zustand状态管理工具

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

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

React — Class类组件

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

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

React — forwardRef、useImperaiveHandle

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

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

React — React.memo

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

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

React — useReducer使用方法

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

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

React — 打包优化

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

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

Vue — keep-alive详解

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

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

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

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

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

Vue — 打包优化

摘要：1.默认情况下,打包好的文件需要房子啊服务器的根目录下，如果希望能够双击运行，需要配置pacblicPath为相对路径 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ publi 阅读全文

posted @ 2024-03-14 12:23 萬事順意阅读(35) 评论(0) 推荐(0)

Vue — 导航守卫

摘要：Vue 的导航守卫是 Vue Router 提供的一种机制，用于在导航过程中对路由进行控制和管理。通过导航守卫，你可以在路由导航前、导航后、以及路由更新前后等不同阶段执行特定的逻辑操作。全局前置守卫 (Global Before Guards): beforeEach(to, from, next 阅读全文

posted @ 2024-03-14 12:07 萬事順意阅读(61) 评论(0) 推荐(0)

Vue — 请求模块、api模块封装

摘要：1.请求模块 import axios from 'axios' const request = axios.create({ baseURL : '',//请求的域名地址 timeout : 5000, }) request.interceptors.request.use((config)=>{ 阅读全文

posted @ 2024-03-14 11:06 萬事順意阅读(102) 评论(0) 推荐(0)

Vue — Vuex模块

摘要：目的：由于Vuex使用的是单一状态树，所有的应用状态都会集中到一个比较大的对象。所以我们拆分store,每一个组件的store创建一个单独的模块，便于维护。 1.创建modules文件夹 2.配置子模块 const state = { userInfo :{ name : '巧克力的雨天', age 阅读全文

posted @ 2024-03-13 22:21 萬事順意阅读(66) 评论(0) 推荐(0)

Vue — VueX

摘要：一、VueX概述 1.概述： vuex是一个vue的状态管理工具，状态就是数据；可以帮助我们管理vue通用的数据（多组件共享的数据） 2.场景：（1）某个状态在很多个组件中使用例如个人信息（2）多个组件共同维护一份数据例如购物车 3.优势：（1）共同维护一份数据，数据集中化管理（2）阅读全文

posted @ 2024-03-13 17:03 萬事順意阅读(121) 评论(0) 推荐(0)

React — 请求模块(http)封装、API模块封装

摘要：一、请求模块封装 //axios封装 //根域名配置 //超时 //请求拦截器/响应拦截器 import axios from 'axios' const http = axios.create({ baseURL : "", timeout : 5000 }) // 在发送请求之前拦截插入自定义阅读全文

posted @ 2024-03-12 17:42 萬事順意阅读(624) 评论(0) 推荐(0)

React — react配置@路径

摘要：通常情况下，@ 路径是作为一个别名来使用，用于指向项目的根目录。这样做的好处是可以简化模块导入时的路径书写，使代码更加清晰和易读。别名路径配置 1.路径解析配置（webpack），把@/ 解析为 src/ （1）下载插件 craco npm i -D @craco/craco （2）项目根目录下创阅读全文

posted @ 2024-03-12 17:34 萬事順意阅读(820) 评论(0) 推荐(0)

React — 路由

摘要：一、路由的使用 1.安装react-router-dom npm i react-router-dom 2.配置（1）创建router实例对象并且配置路由对应关系（2）路由绑定 import {createBrowserRouter,RouterProvider} from 'react-rou 阅读全文

posted @ 2024-03-12 16:47 萬事順意阅读(1132) 评论(0) 推荐(0)

Vue — 路由

摘要：一、路由的使用步骤 1.Vue2.0版本下载对应路由3.6.5版本 yarn add vue-router@3.6.5 / npm i vue-router@3.6.5 2.引入路由包 import VueRouter from 'vue-router'; 3.安装注册 Vue.use(VueRou 阅读全文

posted @ 2024-03-12 14:31 萬事順意阅读(138) 评论(0) 推荐(0)

Vue — 插槽

摘要：一、默认插槽：默认插槽是最常见的插槽类型。它允许我们在组件中插入任意内容，并且如果没有指定具名插槽，则会将内容插入到默认插槽中。 //子组件 <template> <div> <h1>组件标题</h1> <slot></slot> </div> </template> //父组件 <templat 阅读全文

posted @ 2024-03-11 20:40 萬事順意阅读(38) 评论(0) 推荐(0)

Vue — v-load封装 loading效果

摘要：<template> <div class="app"> <div class="box" v-load="isLoading"> <ul> <li v-for="(item, index) in list" :key="index"> {{ item.name }} </li> </ul> </d 阅读全文

posted @ 2024-03-11 19:46 萬事順意阅读(181) 评论(0) 推荐(0)

Vue — 自定义指令

摘要：一、自定义指令语法 1.全局注册 //main.js Vue.directive('focus', { inserted(el) { el.focus( } }); //App.vue <input v-focus /> 2.局部注册 <script> export default { direct 阅读全文

posted @ 2024-03-11 17:43 萬事順意阅读(44) 评论(0) 推荐(0)

Vue — .sync修饰符的使用

摘要：.sync修饰符作用：可以实现子组件和父组件数据的双向绑定，简化代码特点： prop属性名，可以自定义，非固定value 使用场景：封装弹窗类的基础组件，添加自定义属性使用true/false控制本质：就是 :属性名和 @update:属性名合写 <template> <div 阅读全文

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

Vue — v-model详解

摘要：一、v-model原理原理：v-model本质上是一个语法糖。例如在inpu中，就是value属性和input事件的合写作用：提供数据的双向绑定双向绑定：数据变，视图跟着变；视图变，数据跟着变二、表单类组件封装&v-model简化代码 1.表单组件封装的核心思路：（1）父传子：数据从父阅读全文

posted @ 2024-03-11 14:47 萬事順意阅读(3694) 评论(0) 推荐(0)

Vue — 组件通信

摘要：一、父传子  <Son :msg="msg" :arr="arr"></Son> // 2.子组件：子组件通过props来接收 props : ['msg','arr'] 关于prop 1.什么是prop （1）定义：组件上定义的一些自定义阅读全文

posted @ 2024-03-11 12:57 萬事順意阅读(41) 评论(0) 推荐(0)

VScode编译vue脚手架template标签报错

摘要：解决方式：重要的事情说三遍！！！ vue项目直接放vscode，外面不要套文件夹！！！项目名称包括创建项目的文件夹路径中不要包含中文！！！阅读全文

posted @ 2024-03-10 13:32 萬事順意阅读(65) 评论(0) 推荐(1)

VScode不能执行vue命令解决方式

摘要：问题：在 Visual Studio Code (VSCode) 内置终端中无法运行 vue -V 命令的原因可能是由于 PowerShell 的执行策略限制导致的。默认情况下，VSCode 使用的内置终端是 PowerShell。解决方式：（1）需要以管理员权限运行 PowerShell 搜阅读全文

posted @ 2024-03-09 17:49 萬事順意阅读(754) 评论(0) 推荐(0)

Vue — 生命周期

摘要：一、Vue的生命周期和生命周期的四个阶段 1、生命周期一个Vue实例从创建到销毁的过程。 2.生命周期的四个阶段（1）创建：做一些初始化操作，Vue将普通数据转化为响应式数据；（2）挂载：渲染模板，结合对应的数据渲染到视图，看到页面的渲染完成则可以认为已经完成了（1）（2）两个阶段；（3）阅读全文

posted @ 2024-03-09 16:54 萬事順意阅读(36) 评论(0) 推荐(0)

Vue — 监听器(watch)使用

摘要：在 Vue.js 中，watch 选项用于监视数据的变化，并在数据变化时执行相应的操作。watch 可以监视一个或多个数据的变化，当被监视的数据发生变化时，可以触发预定义的回调函数。一、简单写法 <textarea name="" id="" cols="30" rows="10" v-model 阅读全文

posted @ 2024-03-09 15:40 萬事順意阅读(271) 评论(0) 推荐(0)

Vue — 计算属性(computed)详解

摘要：Vue.js 中的计算属性是基于它的响应式系统来实现的，它可以根据 Vue 实例的数据状态来动态计算出新的属性值。在 Vue 组件中，计算属性常用于对数据进行处理和转换，以及动态生成一些需要的数据。一、使用方式 1.定义计算属性：在Vue组件中，通过在 computed 对象中定义计算属性名称及阅读全文

posted @ 2024-03-09 14:31 萬事順意阅读(8334) 评论(1) 推荐(0)

前端面试题集合

摘要：小程序面试题小程序的双向绑定 this.setData({}) 小程序的自适应 rpx 小程序在页面中怎么样传递数据 (1).全局传递 app.js globalData (2).跳转页面的传参wx.navigateTo 和 wx.redirectTo 在跳转后的页面 onload的option 阅读全文

posted @ 2024-03-08 17:00 萬事順意阅读(89) 评论(0) 推荐(0)

前端技术面试题

摘要：1.JS中的数据类型有哪些？ _____________________________________________ 2.JS中强制类型转换为number类型的方法有哪些？ _____________________________________________ 3.字符串转换成数组的方法是_ 阅读全文

posted @ 2024-03-08 16:51 萬事順意阅读(43) 评论(0) 推荐(0)

前端中级面试

摘要：js原理题 1.什么是闭包，举个例子说明一下? 答： “闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。” 举例：创建闭包最常见方式，就是在阅读全文

posted @ 2024-03-08 16:15 萬事順意阅读(394) 评论(0) 推荐(0)

Vue面试题

摘要：1、active-class是哪个组件的属性？嵌套路由怎么定义？答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？答：在router目录下的index.js文件中，对path属性加上/:id。使用router对象的阅读全文

posted @ 2024-03-08 16:13 萬事順意阅读(1212) 评论(0) 推荐(0)

React — Redux详解

摘要：Redux 是一个用于 JavaScript 应用程序的状态管理库。它可以帮助您管理应用程序中的状态，并确保状态的一致性和可预测性。 Redux 主要用于处理大型应用程序中的复杂状态逻辑，例如跨组件共享状态、处理异步数据流等。 Redux 的核心概念包括： Store（存储）：Redux 应用程序的阅读全文

posted @ 2024-03-07 17:27 萬事順意阅读(2196) 评论(0) 推荐(1)

React—组件通信

摘要：一、父传子（Props）父组件可以通过 props 将数据传递给子组件。这是 React 中最常见的一种方式，适用于父子组件之间的数据传递。 {/* 组件传递：父传子 */} {/* 1.父组件传递数据子组件标签上绑定属性 */} {/* 2.子组件接收数据 props(props对象里包含了父阅读全文

posted @ 2024-03-06 12:01 萬事順意阅读(555) 评论(0) 推荐(1)