- 博客(33)
- 收藏
- 关注
RSS订阅原创 vue ref怎么实现基本数据类型和复杂数据类型响应式
而对于复杂数据类型（如对象或数组），需要使用`reactive`来创建响应式对象。注意：当使用`reactive`创建响应式对象时，对象内部的属性仍然是非响应式的。如果需要使对象的属性也具有响应性，可以使用嵌套的`reactive`调用。// 修改数组的值时，视图也会自动更新。// 修改数组的值时，视图也会自动更新。// 修改对象的值时，视图会自动更新。// 创建一个响应式的对象。
2024-07-04 17:26:07
383
原创 在鸿蒙开发中如何实现皮肤切换？
1. 创建不同的主题样式文件，例如`theme_light.json`和`theme_dark.json`。3. 在应用程序的入口文件（例如`main.ets`）中，根据需要切换主题。2. 在应用程序的`config.json`文件中，引入这些主题样式文件。通过以上步骤，你可以在鸿蒙开发中实现主题皮肤切换。// 切换到深色主题。// 切换到浅色主题。
2024-07-02 15:40:52
409
原创 在鸿蒙开发中如何实现主题切换？
在鸿蒙开发中，实现主题切换可以通过以下步骤： 在项目的`/resources/base/color`目录下，创建不同主题的颜色资源文件，如`colors.json`（默认主题）、`colors_dark.json`（暗黑主题）等。在这些文件中定义各种颜色的属性值。 在代码中，通过`ResourceTable.getColor()`方法获取对应主题的颜色。例如： ```javaimport ohos.global.resource.ResourceTable; int colorPrimary = Resou
2024-07-02 15:39:02
414
原创 Vue 2.0 与 3.0区别
Vue.js是一种流行的前端JavaScript框架，用于构建用户界面和单页面应用程序。随着时间的推移，Vue.js已经从Vue2发展到了Vue3，这两个版本在**生命周期、模板组件以及性能**等方面有显著差异。
2024-06-27 18:24:15
599
原创 Vue 与 React 区别
Vue.js和React是现代Web开发中两种非常流行的前端框架，两者在**核心概念、组件以及生态系统扩展性**等方面存在区别。
2024-06-27 18:22:27
630
原创 Arkui 框架Worker线程
OpenHarmony的ArkUI框架提供了Worker和TaskPool两种多线程编程方式，以支持在应用程序中执行耗时操作而不影响主线程的性能。
2024-06-27 18:20:23
297
原创 css实现不同设备适配
通过设置容器的`display: grid`属性，并使用`grid-template-columns`、`grid-template-rows`和`grid-gap`等属性，可以实现在不同设备上自动调整网格的列数、行数和间距。通过设置容器的`display: flex`属性，并使用`flex-wrap`、`justify-content`和`align-items`等属性，可以实现在不同设备上自动调整元素的位置和尺寸。例如，可以使用`width: 50%`来设置元素的宽度为其父元素宽度的一半。
2024-06-05 10:30:20
503
原创 前端首屏加载速度慢问题？怎么解决
**优化JavaScript执行**：延迟非必要的JavaScript文件的加载，或使用`async`和`defer`属性异步加载，减少对首屏渲染的影响。使用雪碧图技术合并图片请求。- **设置合理的缓存策略**：合理配置HTTP缓存头，使得浏览器可以缓存已加载的资源，减少重复加载的时间。- **优化图片资源**：适当压缩图片，使用正确的图片格式，为不同分辨率的设备提供相应尺寸的图片。- **优化DOM渲染**：减少DOM元素的数目，避免复杂的DOM绑定，简化首屏渲染的复杂度。
2024-05-28 08:54:26
526
原创 vue2和3区别
**Vue3**：Vue3采用了Proxy作为其新的响应式系统基础，这不仅解决了`Object.defineProperty`的限制，而且提供了更好的性能，尤其是在处理嵌套对象和数组时。- **Vue3**：虽然Vue3也保留了大部分生命周期钩子，但引入了更多与Composition API相关的生命周期钩子，如`onBeforeMount`、`onMounted`等，这使得与React等其他现代前端框架的用法更为一致Θic-1Θ。- **Vue2**：在Vue2的模板中，只允许有一个根元素存在。
2024-05-28 07:54:32
443
原创 react 组件之间传参
选择哪种方式取决于你的具体需求和应用的结构。对于简单的父子组件间通信，props 通常是首选。对于跨多个层级的通信，Context API 或状态管理库可能更合适。而对于子组件需要通知父组件的情况，回调函数通常是一个好选择。
2024-05-25 09:21:51
252
原创 react 受控组件和非受控组件？ 纯函数？
React中的受控组件（Controlled Component）和非受控组件（Uncontrolled Component）是两种表单元素的状态管理方式。
2024-05-25 09:18:30
419
原创 react生命周期
React 的生命周期指的是组件从创建到销毁的过程，以及在此过程中 React 组件会经历的一系列状态。在 React 16.3 之前，React 类组件有三大生命周期阶段：挂载阶段（Mounting）、更新阶段（Updating）和卸载阶段（Unmounting），每个阶段都包含特定的生命周期方法。
2024-05-25 09:16:26
336
原创 react 如何实现dom更新和渲染
React 实现 DOM 更新和渲染的核心机制是其虚拟 DOM（Virtual DOM）和 React Diffing 算法。
2024-05-25 09:09:52
280
原创 usememo和usecallback 区别?场景
优化子组件的性能：当子组件接收到的某个依赖项发生改变时，useCallback可以用来创建一个只依赖于这个变量的回调函数，从而避免在每次父组件重新渲染时都重新创建函数。传递给子组件的回调函数：当需要将一个函数作为props传递给子组件时，useCallback可以确保每次渲染时都传递的是同一个函数，以避免不必要的组件重新渲染。优化子组件的渲染：在父组件中使用useMemo来缓存子组件的props，只有当props发生变化时才会重新渲染子组件，减少子组件的渲染次数。优化对象：主要用于缓存回调函数。
2024-05-25 09:06:38
396
原创 React组件性能优化中如何实现懒加载？
属性中定义的加载指示器。这种方式可以帮助提高应用的初始加载速度，因为只有当用户实际需要时才会加载组件。在React中实现组件的懒加载，可以使用动态导入（即代码分割）。组件，可以创建在需要时才加载的组件。是一个将被懒加载的组件。时，如果它尚未加载，
2024-05-25 09:01:40
392
原创 React组件性能优化中如何避免频繁更新？
在React开发中，避免组件的频繁更新是提升应用性能的关键手段之一。React提供了多种策略和工具来帮助开发者优化组件的更新频率。
2024-05-25 08:59:31
434
原创 如何优化React组件性能？
**可视区域渲染**：对于长列表或大量数据的场景，可以使用`react-window`或`react-virtualized`等库实现虚拟滚动，仅渲染可视区域内的元素，减少DOM节点数量，提高性能[^1^]。- **减少DOM操作**：尽量减少在组件的`render`方法中的DOM操作和计算量，避免在`render`中创建函数或绑定事件，以减少重绘和回流的次数。- **组件级懒加载**：对于某些非首屏展示的大型组件，可以使用`React.lazy`来实现组件级别的懒加载，提高首屏加载速度[^1^]。
2024-05-25 08:54:08
430
原创 react类组件和函数组件区别？
**类组件**：具有丰富的生命周期方法，如 `componentDidMount`、`componentDidUpdate` 等，这些方法在组件的不同阶段被自动调用，方便执行初始化或更新操作。- **函数组件**：虽然本身不支持状态，但通过 `useState` 和其他Hooks可以实现状态管理，使得代码更加简洁和模块化[^2^][^5^]。- **函数组件**：作为纯函数，每次渲染都创建新的实例，不重用之前的状态或实例，这可能在某些情况下带来性能优势[^2^]。2. **生命周期管理**
2024-05-25 08:52:20
262
原创 React中的useState和useEffect有什么区别？
它接受一个初始状态和一个可选的配置对象作为参数，返回一个包含当前状态和更新状态的函数的元组**。而**useEffect则是另一个重要的Hook，主要用于处理组件的副作用操作，比如数据获取、订阅事件等**。- **useEffect**：用于处理组件的副作用。- **useState**：允许在函数组件中维护状态。- **useEffect**：当组件需要响应状态或属性变化执行操作时，如发起网络请求、订阅事件、修改DOM等。- **useState**：当组件需要维护自己的状态时，如计数器、表单输入等。
2024-05-25 08:49:04
434
原创 react 中都有哪些hook？作用
它接收一个 reducer 函数和一个初始状态，并返回一个包含当前状态和一个 dispatch 函数的对象。它接收一个显示名称和一个格式化函数，并返回一个可用于调试的对象。它接收一个回调函数和一个依赖项数组，用于更新实例值。它接收一个回调函数和一个依赖项数组，并返回一个 memoized 版本的回调函数。它接收一个计算函数和一个依赖项数组，并返回一个 memoized 版本的计算结果。它接收一个上下文对象，并返回一个包含当前上下文值的函数。它返回一个包含当前状态和一个更新状态的函数的对象。
2024-05-25 08:47:05
503
原创 localstorage与seesionstorage区别
LocalStorage和SessionStorage是Web存储API的两个主要组成部分，它们允许在用户的浏览器中存储键值对数据。虽然它们看似相似，但在**生命周期、作用域以及容量限制**等方面存在一些关键的区别。
2024-05-24 21:10:35
739
原创 鸿蒙开发与H5开发有啥区别？
综上所述，鸿蒙开发与H5开发在技术栈、开发环境、生态系统以及应用特性等方面都存在明显的区别。鸿蒙开发注重于构建统一的操作系统和提供创新的分布式架构，而H5开发则强调跨平台兼容性和丰富的开发资源。选择哪种开发方式取决于具体的应用需求、目标平台以及开发者的技能与经验。
2024-05-22 18:08:08
422
原创 鸿蒙OS 路由跳转
2. **调用`Router`对象的`replace`或`push`方法**：在需要执行跳转的地方，调用`Router`对象的`replace`或`push`方法，并传入目标页面的路由路径。3. **使用`AbilitySlice`的`start`方法**：在自定义组件中，可以使用`AbilitySlice`的`start`方法来启动一个新的页面。1. **使用`@Route`装饰器**：在需要跳转的页面上添加`@Route`装饰器，并指定一个唯一的路由路径。）中定义路由路径，并指定参数。
2024-05-22 18:04:39
453
原创 鸿蒙OS生命周期
值得注意的是，从API version 9开始，允许在aboutToAppear函数中改变状态变量，这些更改将在后续执行build()函数中生效4。：页面创建时调用，用于完成页面的初始化工作。：页面变为可见状态时调用，此时页面已经与用户交互，可以进行一些与界面相关的操作。：当系统资源已经恢复到该页面时调用，通常用于恢复之前保存的状态、重新获取资源等。：页面销毁时调用，用于完成页面的清理工作，如释放资源、取消注册的事件监听器等。：页面变为非活动状态时调用，此时页面不能接受用户的输入，也不应响应事件。
2024-05-22 18:02:20
408
原创 鸿蒙OS LocalStorage 与AppStorage 区别？使用场景
比如，用户的登录状态或者应用的主题设置等信息，都可以通过 AppStorage 来存储，以确保这些数据在应用的任何地方都可以被访问和更新。例如，在一个购物应用的购物车页面中，可以使用 LocalStorage 来存储和更新购物车中商品的数量。AppStorage中的数据可以是双向同步的，这意味着当数据发生变化时，相关的UI组件可以实时更新，反之亦然。首先，你需要在你的鸿蒙项目中引入 LocalStorage 相关的模块。是全局的，所以请确保你的键（key）是唯一的，以避免与其他应用或组件的数据冲突。
2024-05-22 18:00:30
548
原创 ArkUI组件通信 面试题
CanvasCanvasRenderingContext2D对象CanvasGradient对象ImageBitmap对象ImageData对象OffscreenCanvasRenderingContext2D对象Path2D。
2024-05-22 17:56:15
741
原创 鸿蒙开发面试题
开发者只需编写一次代码，就能在手机、平板、手表、电视、汽车等多类型设备上运行，得益于鸿蒙OS统一的开发环境、语言与API，以及对设备能力的抽象封装。以及更易于维护和更新。开发者可以使用华为提供的开发工具和SDK，如DevEco Studio，进行多设备协同开发，实现一次开发，多端部署的目。鸿蒙操作系统支持无缝更新，可以在不影响用户使用的情况下，自动下载并安装系统更新，确保系统的安全性和最新性。鸿蒙操作系统通过微内核架构和先进的调度算法，实现了高效的多任务并发处理，保证了系统的流畅性和响应速度。
2024-05-22 17:48:30
198
原创 使用vue-cli（vue脚手架）快速搭建项目
1，使用 vue-cli 搭建项目下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下：(淘宝镜像命令)npm install cnpm -g --registry=https://registry.npm.taobao.org其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。（1）全局
2022-05-15 21:33:38
251
原创 JavaScript 输出
JavaScript 不提供任何内建的打印或显示函数。JavaScript 显示方案JavaScript 能够以不同方式“显示”数据：使用window.alert()写入警告框 使用document.write()写入 HTML 输出 使用innerHTML写入 HTML 元素 使用console.log()写入浏览器控制台使用 innerHTML如需访问 HTML 元素，JavaScript 可使用document.getElementById(id)方法。...
2021-10-31 18:22:57
89
原创 HTML时间
我先看看效果JavaScript 日期获取方法步骤分析：①HTML布局 ②JavaScript编辑变量 ③调试JavaScript代码日期方法允许您获取并设置日期值（年、月、日、时、分、秒、毫秒）日期获取方法获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：方法 描述 getDate() 以数值返回天（1-31） getDay() 以数值获取周名（0-6） getFullYear() 获取四位的年（..
2021-10-10 21:16:13
1861
1
原创 Visual Studio Code
Visual Studio Code 是一款轻量级但功能强大的源代码编辑器，可在您的桌面上运行，适用于 Windows、macOS 和 Linux。它内置了对 JavaScript、TypeScript 和 Node.js 的支持，并为其他语言（例如 C++、C#、Java、Python、PHP、Go）和运行时（例如 .NET 和 Unity）提供了丰富的扩展生态系统.通过这些介绍性视频开始您的 VS Code 之旅。 下载Windows Una Kravets@U..
2021-10-02 21:45:29
241
原创 HTML炫酷导航
先看一下效果图：HTML代码如下：<body> <div> <a href="#">首页</a> <a href="#">课程培训</a> <a href="#">视频教程</a> <a href="#">原创丛书</a> <a href="#">企业合作</a> <.
2021-10-01 15:09:03
233
原创 大学生金融职业生涯规划书
大学生金融职业生涯规划书 我是一个比较外向的女孩，性格开朗，很容易与人相处。我的父亲从事教育工作，从小就注重对我的文化素质培养，尤其是文学方面。我喜欢读文学气息强烈的书刊，逐渐形成了较强的分析、理解能力。但是我对于物理、化学没有太大的兴趣，导致物理化学成绩平平。 “吃得苦中苦，方为人上人。”这是我父亲教会我的第一句名言，也是陪我一次次克服成长经理的困难的信念。再大的风浪，只要有不怕困难的勇气和为理想拼搏的勇气，我都可以坚持。我认为，生活的意义在于不断的为社会、他人创造出价值。每个人都是社会的一分子，
2021-09-30 23:33:38
410
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人