@CYTTP-CSDN博客

原创 React Hook - useReducer

useReducer是React中用于管理复杂状态逻辑的Hook函数，它是useState的底层实现，可以处理更复杂的状态更新逻辑。基本用法是传入reducer函数和初始值，返回当前状态和dispatch方法。通过dispatch发出action，reducer根据action类型处理状态更新。 useReducer优势在于：将状态更新逻辑集中到reducer中，避免分散在各处支持传递复杂参数，可扩展性强适合管理对象、数组等复杂数据类型示例展示了useReducer处理数字增减和随机运算的场景，以及

2025-05-21 15:52:40 736

原创 React Hook - useContext

useContext是React提供的一个Hook，用于简化从Context中获取共享数据的代码。它替代了传统的<XxxContext.Consumer>标签，使得在函数组件中获取共享数据更加简洁。通过useContext，开发者可以直接获取由React.createContext()创建的共享数据对象的值，而无需逐层传递属性。useContext的基本用法是传入一个Context对象，并返回该Context的当前值。它适用于需要从多个组件中访问相同数据的场景，如主题、用户信息等。使用useCo

2025-05-12 19:37:44 882

原创 React Hook - useEffect

React Hook - useEffect useEffect允许组件连接到外部系统并与之同步 useEffect是来解决类组件某些执行代码被分散在不同的生命周期函数中的问题。useEffect允许组件连接到外部系统并与之同步。这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的小部件以及其他非 React 代码。React useEffect 官方文档若一个函数组件中定义了多个useEffect，那么他们实际执行顺序是按照在代码中定义的先后顺序来执行的。

2025-05-06 20:42:52 776

原创 React Hook - useState

1. Hook 的概念Hook 本身单词意思是“钩子”，作用就是“勾住”某些生命周期函数或某些数据状态，并进行某些关联触发调用。useState 的作用是“勾住”函数组件中自定义的变量。setState是执行的是异步对比累加赋值，就是先对比之前数据属性中是否有age，如果有则修改age值，同时不会影响到其他属性的值。我猜测react是使用ES6中新增加的Object.assign()这个函数来实现这一步的。React 不会自动合并对象，所以需要先拷贝 person，然后修改 age，再赋值。—

2025-03-26 15:16:23 430

原创 vue3对比vue2的总结

但是必须先知道想要拦截和修改的key是什么，所以vue2对于新增的属性无能为力，比如无法监听属性的添加和删除、数组索引和长度的变更，vue2的解决方法是使用Vue.set(object,propertyName, value) 等方法向嵌套对象添加响应式。Proxy可以理解成，在对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。在 Vue3 中，全局和内部 API 都经过了重构，并考虑到了 tree-shaking 的支持。

2023-06-13 21:05:05 6267 1

原创 vue3 出现 Component inside ＜Transition＞ renders non-element root node that cannot be animated.

项目使用vite脚手架+vue3，在根组件main.vue当中使用了页面过渡动画。中的组件渲染无法设置动画的非元素根节点。加上根节点div就欧克了。运行项目控制台出现错误。

2023-05-26 20:16:48 325

原创 vue3+vite 使用mock.js

如果你发现生产环境下无法请求mock接口，原因很有可能是因为你是在onMounted或者onBeforeMount这两个生命周期中请求的。因为vite-plugin-mock插件中用来处理生产环境的函数createProdMockServer还未执行完成，所以无法拦截请求。创建一个js文件mockProdServer.js，位置和main.js同层，在src/mockProdServer.js。安装后，需要在vite.config.js文件中引入vite-plugin-mock插件。

2023-05-24 18:04:29 1058

原创 vue3组件通信之slot

插槽：默认插槽、具名插槽、作用域插槽可以实现父子组件通信.

2023-05-22 21:29:09 485 1

原创 vue3组件通信之pinia

pinia也是集中式管理状态容器,类似于vuex。但是核心概念,使用方式参照官网。

2023-05-22 20:57:15 652 1

原创 vue3组件通信之provide与inject

provide方法用于提供数据，此方法执需要传递两个参数,分别提供数据的key与提供数据value。vue3提供两个方法provide与inject,可以实现隔辈组件传递参数。

2023-05-22 20:31:31 361 1

原创 vue3组件通信之ref与$parent

parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过defineExpose方法对外暴露。提及到ref可能会想到它可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC，那么子组件内部的方法与响应式数据父组件可以使用的。比如:在父组件挂载完毕获取组件实例。

2023-05-22 20:20:20 2426 1

原创 vue3组件通信之useAttrs

在Vue3中可以利用useAttrs方法获取组件的属性与事件(包含:原生DOM事件或者自定义事件),次函数功能类似于Vue2框架中$ attrs属性与$listeners方法。子组件my-button内部可以通过useAttrs方法获取组件属性与事件.因此你也发现了，它类似于props,可以接受父组件传递过来的属性与属性值。比如:在父组件内部使用一个子组件my-button。

2023-05-22 19:59:14 1054 2

原创 vue3组件通信之v-model

在vue3中一个组件可以通过使用多个v-model,让父子组件多个数据同步,下方代码相当于给组件Child传递两个props分别是pageNo与pageSize，以及绑定两个自定义事件update:pageNo与update:pageSize实现父子数据同步。下方代码:相当于给组件Child传递一个props(modelValue)与绑定一个自定义事件update:modelValue。v-model指令可是收集表单数据(数据双向绑定)，除此之外它也可以实现父子组件数据同步。实现父子组件数据同步。

2023-05-22 19:41:25 532 2

m0_52222401的博客