羊睡了-CSDN博客

原创 vue2和vue3的区别？

1）双向数据绑定原理：vue2使用ES5的object.defineProperty()API对数据进行劫持，并结合发布订阅者模式实现双向数据绑定；5）定义数据变量和方法：vue2将数据放入data中，定义数据变量是data(){}，创建的方法要在methods:{}中；2）性能：vue3相对于vue2在性能上有所提升，主要得易于使用Proxy API代替object.defineProperty()API以及通过省去for...in闭包等内容来提升效率。vue3的父子之间传参则与vue2有所不同。

2024-02-21 10:08:16 258 2

原创 vue中v-for与v-if能否一起使用？

1）这需要考虑到v-for与v-if的优先级顺序问题，当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。3）如果需要对每个循环内容进行条件判断的话，建议编写computed属性计算进行对应内容的控制。2）如果对于整体循环内容的控制，建议将条件判断编写至v-for循环的外部。

2024-01-18 08:44:30 515 1

原创常用的Hooks都有哪些，说出它们的作用？

它接受一个ref对象和一个工厂函数，在父组件中可以通过ref访问工厂函数返回的值。它接收一个值和一个格式化函数，用于显示在工具中的自定义标签。它接收一个回调函数和依赖数组，并返回一个记忆化的版本，只在依赖数组变化时才会重新创建。这些是常用的React Hook，每个Hook都有特定的作用，能够方便地处理组件的状态管理、副作用操作、上下文等功能。它返回当前状态和一个dispatch函数，用于派发状态更新的动作。它返回一个包含current属性的对象，该属性可以保存任意可变值，并在组件重新渲染时保持不变。

2023-12-21 20:31:32 260 1

原创什么是高阶组件？

2）高阶组件的本质是一个装饰器模式，通过把通用逻辑从组件中抽离出来，实现代码复用和组件的解耦。高阶组件可以用于很多场景，例如添加权限控制、添加数据逻辑、动态渲染等等。1）高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的组件，这个新的组件可以对原组件进行扩展或增强，例如添加一些通用的逻辑、状态、行为等。2）反向继承：通过继承被包裹的组件，可以覆盖或增加它的生命周期方法和渲染函数。1）属性代理：通过props将新的属性传递给被包裹的组件。

2023-12-14 10:45:37 196 3

原创 React有哪些优化性能的手段？

1）使用合成事件：react的合成事件系统能够提高性能，因为它使用事件委托，将事件监听器挂载在顶层容器上，而不是每个DOM元素上，减少了事件监听器的数量，从而减小了内存和性能开销。6）使用React的Context API：Context API允许跨组件层次传递数据，而不必一层层地通过属性传递，有助于避免不必要的属性传递，提高了代码的可维护性。3）使用React的虚拟DOM：React使用虚拟DOM来比较前后两个状态树，从而最小化对实际DOM的操作，减少了DOM操作的次数，提高了性能。

2023-12-12 20:05:26 101

原创 React项目中Swiper组件实现轮播图

在Swiper组件内部，使用Swiper.Item组件来定义每一张轮播图。每个Swiper.Item组件都包含一个img元素，通过src属性指定图片路径，alt属性用于指定图片的替代文本。Swiper是一个轮播图组件，通过设置autoplay属性实现自动播放功能，每隔3000毫秒（3秒）切换一张图片。className属性用于添加自定义的样式类名。4.这段代码是一个React函数组件，它定义了一个名为GuidePage的组件。组件返回一个包含Swiper组件的div元素。

2023-12-11 20:03:17 501

原创 React组件之间如何通信？

通过创建一个Context对象，并使用Provider组件在上层组件中提供数据，子组件可以使用Consumer组件或useContext钩子访问上下文中的数据。1）props传递：通过将数据或回调函数以属性(props)的形式传递给子组件，实现父组件向子组件通信的方式。子组件可以通过props访问父组件传递的数据或触发父组件提供的回调函数。这些库提供集中式的状态管理，可以使得组件的通信更加灵活和高效。5）父组件实例引用：父组件可以通过Ref来获取子组件的引用，从而直接调用子组件的方法或访问子组件的属性。

2023-12-11 18:03:42 235

weixin_70265670的博客