- 博客(7)
- 收藏
- 关注
原创 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
280
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
543
1
原创 常用的Hooks都有哪些,说出它们的作用?
它接受一个ref对象和一个工厂函数,在父组件中可以通过ref访问工厂函数返回的值。它接收一个值和一个格式化函数,用于显示在工具中的自定义标签。它接收一个回调函数和依赖数组,并返回一个记忆化的版本,只在依赖数组变化时才会重新创建。这些是常用的React Hook,每个Hook都有特定的作用,能够方便地处理组件的状态管理、副作用操作、上下文等功能。它返回当前状态和一个dispatch函数,用于派发状态更新的动作。它返回一个包含current属性的对象,该属性可以保存任意可变值,并在组件重新渲染时保持不变。
2023-12-21 20:31:32
310
1
原创 什么是高阶组件?
2)高阶组件的本质是一个装饰器模式,通过把通用逻辑从组件中抽离出来,实现代码复用和组件的解耦。高阶组件可以用于很多场景,例如添加权限控制、添加数据逻辑、动态渲染等等。1)高阶组件是一个函数,它接收一个组件作为参数,并返回一个新的组件,这个新的组件可以对原组件进行扩展或增强,例如添加一些通用的逻辑、状态、行为等。2)反向继承:通过继承被包裹的组件,可以覆盖或增加它的生命周期方法和渲染函数。1)属性代理:通过props将新的属性传递给被包裹的组件。
2023-12-14 10:45:37
228
3
原创 React有哪些优化性能的手段?
1)使用合成事件:react的合成事件系统能够提高性能,因为它使用事件委托,将事件监听器挂载在顶层容器上,而不是每个DOM元素上,减少了事件监听器的数量,从而减小了内存和性能开销。6)使用React的Context API:Context API允许跨组件层次传递数据,而不必一层层地通过属性传递,有助于避免不必要的属性传递,提高了代码的可维护性。3)使用React的虚拟DOM:React使用虚拟DOM来比较前后两个状态树,从而最小化对实际DOM的操作,减少了DOM操作的次数,提高了性能。
2023-12-12 20:05:26
140
原创 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
836
原创 React组件之间如何通信?
通过创建一个Context对象,并使用Provider组件在上层组件中提供数据,子组件可以使用Consumer组件或useContext钩子访问上下文中的数据。1)props传递:通过将数据或回调函数以属性(props)的形式传递给子组件,实现父组件向子组件通信的方式。子组件可以通过props访问父组件传递的数据或触发父组件提供的回调函数。这些库提供集中式的状态管理,可以使得组件的通信更加灵活和高效。5)父组件实例引用:父组件可以通过Ref来获取子组件的引用,从而直接调用子组件的方法或访问子组件的属性。
2023-12-11 18:03:42
286
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人