Vue 3：功能全解析，探索前端新大陆的魔法之旅！

本论旨在研究和分析 Vue 3 的功能实现，深入探讨 Vue 3 作为下一代前端开发框架的特色与创新。论文首先介绍了 Vue 3 的背景和发展历程，随后重点讨论了其引入的核心功能和改进之处，包括响应式系统的全面重构、Composition API、性能优化、TypeScript 支持等。最后，论文还通过实例和案例分析，验证了 Vue 3 在实际项目应用中的效果。研究结果表明，Vue 3 的功能实现不仅能够大大提升开发效率和代码可维护性，还能够提供更好的性能和更丰富的开发体验。

文章目录

  • 1 Vue 3 的背景与发展历程
    • 1.1 Vue 的前世今生
    • 1.2 Vue 3 的诞生背景与动机
  • 2 Vue 3 的核心功能与改进
    • 2.1 响应式系统的全面重构
    • 2.2 Composition API
    • 2.3 性能优化
    • 2.4 TypeScript 支持
    • 2.5 其他功能改进
  • 3 Vue 3 的实际应用案例与效果验证
    • 3.1 实例分析：使用 Vue 3 开发一个简单的实时聊天应用
    • 3.2 案例分析：在大型企业级项目中应用 Vue 3 的性能优化功能

1 Vue 3 的背景与发展历程

1.1 Vue 的前世今生

Vue 是一种流行的 JavaScript 框架，用于构建用户界面。它在 2014 年由尤雨溪开发，并于同年发布。Vue 的设计目标是简单、灵活、可扩展，可用于构建单页面应用程序（SPA）和复杂的前端应用程序。

Vue 的前身可以追溯到尤雨溪在开发其他框架时的经验。在这之前，他参与开发了一个名为 AngularJS 的框架。然而，尤雨溪对 AngularJS 的一些决策感到不满意，尤其是其复杂性和学习曲线。因此，他开始思考如何创建一个更简单、更轻量级的框架。

在经历了一段时间的思考之后，尤雨溪开始着手开发自己的框架，并在 2014 年发布了 Vue 的第一个版本。Vue 的设计目标是通过提供一些简单但强大的工具，让开发人员可以更轻松地构建用户界面。它采用了一种基于组件的架构，从而使开发人员可以将 UI 拆分为可重用的组件，并以声明式的方式将这些组件组合起来。

随着时间的推移，Vue 获得了越来越多的关注和使用。它的简单性和灵活性使得它成为了许多开发人员和企业的首选框架之一。Vue 的社区也迅速发展，为开发人员提供了大量的资源和支持。

近年来，随着前端技术的不断发展和前端应用程序的复杂性的提高，Vue 也在不断演进。Vue 2 的发布带来了更好的性能和更多的功能。同时，Vue 也继续推出新的版本，改进性能、增加功能，并解决先前版本中的问题。Vue 3 是最新的主要版本，带来了一些重大改进，如更好的静态类型支持和更好的 TypeScript 集成。

总的来说，Vue 作为一种现代的 JavaScript 框架，通过其简单性、灵活性和可扩展性赢得了越来越多开发人员的青睐。它的前身可以追溯到尤雨溪

1.2 Vue 3 的诞生背景与动机

Vue 3 的诞生背景和动机可以从以下几个方面来解释：

  1. 响应式系统的重构：Vue.js 的核心特性之一就是响应式系统，它使得开发者可以方便地处理数据的变化，并将变化自动反映到应用程序的视图上。然而，Vue 2.x 版本的响应式系统存在一些限制，比如无法检测到数组和对象的动态属性的变化等。Vue 3 重构了响应式系统，引入了 Proxy API，解决了这些限制，提供了更强大和灵活的响应式能力。

  2. 更好的性能：Vue 3 在性能方面进行了优化，采用了优化后的虚拟 DOM 算法（Fragments），减少了渲染时的内存开销，并且支持根据变更的部分进行局部更新，从而提升了应用程序的渲染性能。

  3. 更好的 TypeScript 支持：Vue 3 对 TypeScript 进行了全面支持，通过 TypeScript 的类型检查和代码提示，使得开发者能够更早地发现潜在的错误，并提供更好的开发体验。

  4. 更少的包体积：Vue 3 引入了静态标记，可在编译时进行分析，从而消除了 Vue 2.x 版本中的某些运行时代码，减小了包体积，提升了应用程序的性能。

  5. 更好的开发体验：Vue 3 提供了一些新的开发工具和 API，比如 Composition API，使组件的逻辑更容易测试和重用，同时还添加了一些新的调试工具，如 Devtools，从而提供了更好的开发体验。

Vue 3 的诞生背景和动机主要是为了提供更好的响应式能力、性能优化、TypeScript 支持、包体积减小以及更好的开发体验。

2 Vue 3 的核心功能与改进

2.1 响应式系统的全面重构

Vue 3 对响应式系统进行了全面重构，主要是通过使用 Proxy 来替代 Vue 2.x 中使用的 Object.defineProperty，以实现更高效和更全面的响应式能力。以下是 Vue 3 响应式系统的一些重要改进：

  1. 使用 Proxy 替代 Object.defineProperty：Vue 2.x 使用 Object.defineProperty 来拦截数据的读取和修改，通过递归遍历对象属性实现响应式。然而，这种方式有一些局限性和性能问题。Vue 3 引入了 Proxy，它可以以一种更直接和灵活的方式拦截对象的操作，提供了更好的性能和更全面的响应式支持。

  2. 懒递归和缓存：Vue 3 响应式系统在追踪依赖时使用了懒递归的策略。它会延迟依赖的追踪，只有在实际需要时才进行依赖收集。这个策略减少了不必要的计算和更新，提高了性能。同时，Vue 3 还对依赖的缓存机制进行了优化，避免重复追踪和更新。

  3. 嵌套数据的改进：Vue 3 的响应式系统更好地支持嵌套对象和数组的响应式。它能够在嵌套对象中正确地进行依赖追踪和更新，解决了 Vue 2.x 在此方面的一些限制。

  4. 可选的弱映射：Vue 3 的响应式系统允许开发者通过标记一些属性为“非跟踪”来创建可选的弱映射。这样的属性不会被追踪为依赖关系，这对于大型数据结构或需要频繁更改但不需要响应式的属性非常有用。

这些重构和改进使得 Vue 3 的响应式系统更高效、灵活和全面。它能够更准确地捕捉到数据的操作，并自动追踪依赖，保持视图与数据的同步更新。同时，它也提供了更好的性能和更好的支持嵌套数据的能力，使得 Vue 3 在性能和开发体验方面都有了显著提升。

2.2 Composition API

Composition API 是 Vue 3 引入的一种新的编写组件逻辑的方式。它是基于函数的 API，旨在解决 Vue 2.x 中组件逻辑复用和代码组织的一些限制和挑战。

通过使用 Composition API，可以将组件的相关逻辑组织在一起，并以更直观和易读的方式呈现。相比于 Vue 2.x 中的选项式 API，Composition API 提供了更多的灵活性和可读性。

下面是一些 Composition API 的特点和优势：

  1. 函数组织：通过使用 Composition API，可以使用函数来组织和封装组件的逻辑。每个函数都可以只关注一个特定的功能或行为，这使得代码更可读、维护性更好，并支持更好的代码复用。

  2. 逻辑封装：使用 Composition API 可以更好地封装和共享组件逻辑。可以将一组相关的功能逻辑封装在一个函数中，并在需要时进行重用。这有助于减少冗余代码，提高代码的复用度。

  3. 组合式功能：Composition API 允许将多个逻辑组合在一起，形成更复杂的功能。通过将组件逻辑分解为小的可组合函数，可以更灵活地组合和重用这些函数来构建更复杂的功能。

  4. 更好的 TypeScript 支持：Composition API 对 TypeScript 有更好的支持，可以提供更准确的类型推导和代码提示。TypeScript 可以更好地理解函数参数和返回值的类型，使开发过程更可靠和高效。

  5. 更好的代码组织：Composition API 提供了一种更直观的方式来组织组件代码。通过将逻辑分解为函数，可以更清晰地划分出每个功能的职责，使代码更易于维护和扩展。

Composition API 提供了一种更灵活、可读性更高、代码组织更好的方式来编写组件逻辑。它是 Vue 3 中一个重要的改进，是开发者在构建复杂组件和提高代码复用性方面的有力工具。

2.3 性能优化

性能优化是在应用程序开发中非常重要的一个方面，它旨在提升应用程序的响应速度、资源利用率和用户体验。下面是一些常见的性能优化技巧：

  1. 减少网络请求：减少页面加载所需的网络请求数量，可以显著提高页面加载速度。可以通过合并、压缩和缓存静态资源，使用懒加载和按需加载来降低请求数量。

  2. 优化图片和多媒体资源：图片和多媒体资源通常是页面加载速度的瓶颈。优化这些资源的大小和格式，使用适当的压缩和缩放，可以减少加载时间并提高用户体验。

  3. 使用缓存机制：合理使用浏览器缓存、CDN 缓存和服务器端缓存，可以减少对服务器的请求次数，加快页面加载速度。

  4. 延迟加载和懒加载：将页面上一些不是立即可见或不重要的内容进行延迟加载或懒加载，以降低页面初始加载时间和所需资源。

  5. 代码优化：优化 JavaScript 代码，包括减少不必要的重复计算、优化循环和递归，使用节流和防抖函数来控制事件触发频率，减少资源的消耗。

  6. 使用虚拟列表和虚拟滚动：对于大量数据的列表或长内容的滚动区域，使用虚拟列表和虚拟滚动技术可以减少 DOM 元素的数量，提高渲染性能。

  7. 避免强制同步布局：避免频繁修改 DOM 元素并触发布局回流，可以减少页面重绘和回流的成本。使用 CSS3 动画和过渡效果代替 JavaScript 来实现动画效果。

  8. 使用生产环境构建：在生产环境中使用压缩和混淆的代码，关闭开发者工具中的调试信息和警告，减小资源文件的体积。

  9. 性能监测和分析：使用浏览器开发者工具、性能分析工具和监控工具，对应用程序进行性能分析和测试，找出性能瓶颈并进行优化。

以上是一些常见的性能优化技巧，根据具体开发场景和需求，还有其他优化策略可供选择。值得注意的是，性能优化是一个持续的过程，需要在开发过程中进行不断的测试、分析和调整，以达到最佳的性能效果。

2.4 TypeScript 支持

Vue 3 对 TypeScript 的支持进行了显著改进，使得在使用 TypeScript 开发 Vue 应用时能够获得更好的类型推导和类型检查。

下面是一些 Vue 3 对 TypeScript 的支持方面的改进：

  1. 类型推导：Vue 3 使用了更强大的类型推导算法，能够准确地推导出组件中的数据类型、属性类型和事件类型。这使得开发者无需显式地指定类型，也能获得很好的类型检查。

  2. 透明状态类型：Vue 3 改进了响应式状态的类型推导，可以自动推导出状态的类型。这意味着在组件中使用响应式数据时，可以准确地获得数据的类型，并进行类型检查。

  3. TSX 支持：Vue 3 对 TSX 的支持也得到了增强，使得在使用 JSX 或 TSX 编写组件时，可以获得更好的类型检查和代码提示。

  4. Composition API 的类型支持：Vue 3 中的 Composition API 提供了更好的 TypeScript 支持。通过 Composition API，可以更好地定义函数的参数类型和返回值类型，并获得准确的类型检查。

  5. 改进的错误提示：Vue 3 在类型相关的错误提示方面也进行了改进，可以更详细和准确地指示出类型错误的位置和原因，帮助开发者更快地发现和修复问题。

除了以上改进，Vue 3 还提供了一些 TypeScript 相关的工具和辅助函数，如 defineProps、defineEmits 和 withDefaults 等，用于更好地定义组件的属性、事件和默认值，并进行类型检查。

Vue 3 对 TypeScript 的支持得到了显著改进，使得在使用 TypeScript 开发 Vue 应用时能够获得更好的类型推导、类型检查和错误提示。这提高了开发效率，减少了潜在的类型相关的问题，并使得代码更可靠和易于维护。

2.5 其他功能改进

除了 Composition API 和对 TypeScript 支持的改进之外，Vue 3 还有其他许多功能上的改进。下面是一些重要的功能改进：

  1. 更快的渲染性能：Vue 3 在渲染性能方面进行了优化，使用了新的编译器和运行时模块，减少了生成的代码大小并提高了执行效率。

  2. 更小的包大小：Vue 3 引入了 Tree-shaking 支持，可以更好地优化构建的包大小。这意味着只有使用到的代码会被包含在最终的构建结果中，减少了应用程序的加载时间。

  3. 更好的递归组件支持：Vue 3 在递归组件方面进行了改进，能够很好地支持无限嵌套的组件结构，并且有更低的内存消耗。

  4. Teleport（传送门）：Vue 3 引入了 Teleport，它允许将组件渲染到 DOM 树的不同位置。这对于创建模态框、弹出窗口和通知组件等场景非常有用。

  5. 全局 API 的重构：Vue 3 对全局 API 进行了重构和改进，在全局上下文中更一致和可控地暴露 API，提供了更好的开发体验和可维护性。

  6. Fragment（片段）：Vue 3 引入了 Fragment，允许组件返回多个根元素，而不需要额外的包裹元素。

  7. 改进的响应式系统：除了 Composition API 之外，Vue 3 对响应式系统进行了其他改进，提供了更好的性能和更全面的功能支持。

Vue 3 在性能、包大小、开发体验和功能方面进行了多项改进，使得开发者能够更高效、更可靠地构建现代化的 Web 应用程序。同时，Vue 3 保持了向后兼容性，使得迁移到新版本相对较为顺畅。

3 Vue 3 的实际应用案例与效果验证

3.1 实例分析：使用 Vue 3 开发一个简单的实时聊天应用

当使用 Vue 3 来开发一个简单的实时聊天应用时，下面是一个简单的示例，展示了如何使用 Vue 3 开发一个实时聊天应用：

  1. 创建一个 Vue 3 应用：

    npm install -g @vue/cli
vue create chat-app

  2. 安装 Vue Router 和 Socket.io-client：

    cd chat-app
npm install vue-router socket.io-client

  3. 创建一个 Chat 组件，用于显示聊天消息：

    <template><div><div v-for="message in messages" :key="message.id"><strong>{{message.user}}:</strong> {{message.text}}</div><form @submit="sendMessage"><input v-model="text" type="text" placeholder="Type your message" /><button type="submit">Send</button></form></div>
</template><script>
import { ref } from 'vue';
import io from 'socket.io-client';export default {name: 'Chat',setup() {const messages = ref([]);const text = ref('');const socket = io('http://localhost:3000');socket.on('message', (message) => {messages.value.push(message);});const sendMessage = () => {if (text.value) {socket.emit('message', { user: 'Me', text: text.value });text.value = '';}};return {messages,text,sendMessage,};},
};
</script>

  4. 创建一个 ChatApp 组件，用于创建用户和聊天会话：

    <template><div><h1>Chat App</h1><div v-if="!username"><input v-model="tempUsername" type="text" placeholder="Enter your username" /><button @click="createUser">Join Chat</button></><div v-else><p>Logged in as {{username}}</p><Chat /></div></div>
</template><script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import io from 'socket.io-client';import Chat from './Chat.vue';export default {name: 'ChatApp',components: {Chat,},setup() {const tempUsername = ref('');const username = ref('');const router = useRouter();const socket = io('http://localhost:3000');const createUser = () => {if (tempUsername.value) {username.value = tempUsername.value;socket.emit('user', username.value);}};socket.on('user-created', () => {router.push('/chat');});return {tempUsername,username,createUser,};},
};
</script>

  5. 创建一个 router.js 文件，用于设置路由：

    import { createRouter, createWebHistory } from 'vue-router';import ChatApp from './components/ChatApp.vue';
import Chat from './components/Chat.vue';const routes = [{ path: '/', component: ChatApp },{ path: '/chat', component: Chat },
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

  6. 修改 main.js 文件，加载路由和创建 Vue 应用：

    import { createApp } from 'vue';
import App from './App.vue';
import router from './router';createApp(App).use(router).mount('#app');

  7. 创建一个 server.js 文件，用于启动 Socket.io 服务器：

    const http = require('http');
const socketIo = require('socket.io');const server = http.createServer();
const io = socketIo(server);const activeUsers = [];io.on('connection', (socket) => {console.log('A user connected');socket.on('user', (username) => {console activeUsers.push(username);io.emit('user-created');});socket.on('message', (message) => {console.log('Message:', message);io.emit('message', message);});socket.on('disconnect', () => {console.log('A user disconnected');});
});server.listen(3000, () => {console.log('Server started on port 3000');
});

  8. 启动服务器：

    node server.js

  9. 启动 Vue 应用：

    npm run serve

这个简单的实时聊天应用将允许用户输入一个用户名并加入聊天会话。用户可以发送聊天消息，该消息将即时显示在所有连接的客户端上。

3.2 案例分析：在大型企业级项目中应用 Vue 3 的性能优化功能

当在大型企业级项目中应用 Vue 3 的性能优化功能时，以下是一个简单的案例分析，包括一些常见的性能优化功能和代码示例：

  1. 组件懒加载（Lazy Loading）：
    代码示例：
const HomePage = () => import('./pages/HomePage.vue');
const AboutPage = () => import('./pages/AboutPage.vue');const routes = [{ path: '/', component: HomePage },{ path: '/about', component: AboutPage }
];const router = createRouter({history: createWebHistory(),routes
});

这里通过动态导入（dynamic import）的方式来按需加载组件，只有在访问对应路由时才会加载相应的组件。

  1. 按需引用（Tree-shaking）：
    代码示例：
import { createStore } from 'vuex';const store = createStore({// ...store configuration
});export default store;

在使用 Vue 3 的 Vuex 时，只引入需要的部分库，而不是整个库。这样可以减小打包后的文件体积。在 Webpack 等构建工具中配置 Tree-shaking，可以自动将未使用的代码进行剪裁。

  1. 缓存机制：
    代码示例：
import { ref } from 'vue';// 缓存计算结果
const cachedResult = ref(null);function expensiveCalculation() {if (cachedResult.value) {return cachedResult.value;}// 执行较为耗时的计算const result = /* ... */;cachedResult.value = result;return result;
}

在这个示例中，通过使用 Vue 3 的响应式数据 ref，将较为耗时的计算结果缓存起来。下次调用时可以直接返回已缓存的结果，避免重复计算。

  1. 使用虚拟滚动（Virtual Scrolling）：
    代码示例：
<template><virtual-scroller :items="data" :item-height="itemHeight" />
</template><script>
import { ref } from 'vue';
import VirtualScroller from 'vue-virtual-scroller';export default {components: {VirtualScroller},setup() {const data = ref(/* ... */);const itemHeight = ref(50); // 每项的高度return {data,itemHeight};}
};
</script>

在这个示例中，使用 Vue 3 的虚拟滚动组件（如 vue-virtual-scroller），只渲染可见区域的列表项，提升渲染性能，尤其在处理大数据量的情况下。

  1. 使用 SSR（服务器端渲染）：
    可以使用 Vue 3 的 SSR 功能来将页面的初次渲染放在服务器端完成，以提供更快的首次加载速度和更好的 SEO。使用 Vue 的createSSRApp方法创建一个 SSR 应用程序，确保在服务器和客户端之间共享相同的代码和状态。

  2. 使用 Memoization 进行计算结果缓存：
    使用 Vue 3 的 Composition API，可以使用 Memoization 技术缓存较为复杂或耗时的计算结果，以减少计算的开销。可以使用computed函数或 Vue 3 的ref来定义一个计算属性，并使用memoize库来进行缓存操作，如下所示：

import { ref } from 'vue';
import memoize from 'lodash.memoize';const expensiveCalculation = memoize((param) => {// 执行较为复杂或耗时的计算// 使用 param 进行计算return result;
});export default {setup() {const param = ref(/* 参数 */);const result = computed(() => expensiveCalculation(param.value));return {param,result};}
};
  1. 使用 CDN 加速：
    将 Vue 3 及其相关的资源（如 Vue Router、Vuex）发布到 CDN 上，以充分利用 CDN 的缓存和分发能力来加速资源的加载。在 HTML 文件中直接引用 CDN 上的资源链接，如下所示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>My Vue 3 App</title><script src="https://cdn.jsdelivr.net/npm/vue@3.2.2/dist/vue.runtime.min.js"></script><!-- 引入其他 CDN 资源 -->
</head>
<body><div id="app"><!-- 应用代码 --></div><script src="main.js"></script>
</body>
</html>

请注意，以上示例只是演示了一些常见的性能优化功能和代码示例，实际的应用中需要根据具体需求和项目情况进行深入的分析和优化。同时，使用性能监测工具进行性能测试和评估也是重要的步骤，以确保优化策略的有效性和稳定性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/142509.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

flv怎么转换成mp4格式？准备3个方法给大家

flv怎么转换成mp4格式？准备3个方法给大家

flv怎么转换成mp4格式&#xff1f;FLV是一种流行的视频文件格式&#xff0c;最初由Adobe公司开发&#xff0c;用于在Web上播放和传输视频内容。FLV格式以其较小的文件大小和较高的压缩比而闻名&#xff0c;并广泛应用于在线视频分享平台、流媒体服务和网络广告等领域。能够提供…
阅读更多...
驱动开发---基于gpio子系统编写LED灯的驱动

驱动开发---基于gpio子系统编写LED灯的驱动

一、GPIO子系统相关API 1.解析GPIO相关的设备树节点 struct device_node *of_find_node_by_path(const char *path) 功能&#xff1a;根据设备树节点路径解析设备树节点信息 参数&#xff1a; path&#xff1a;设备树所在的节点路径 /mynode0X12345678 返回值&#xff1a;成…
阅读更多...
JS的基本组成

JS的基本组成

JavaScript的实现包括以下3个部分&#xff1a; 模块功能ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 &#xff08;DOM&#xff09;处理网页内容的方法和接口浏览器对象模型&#xff08;BOM&#xff09;与浏览器交互的方法和接口 javascript 有三部分构成&#…
阅读更多...
腾讯mini项目-【指标监控服务重构-会议记录】2023-07-26

腾讯mini项目-【指标监控服务重构-会议记录】2023-07-26

2023-07-26组长会议纪要 A组 项目对齐和问题 分配需求&#xff0c;SLI指标上报&#xff0c;暂时没有实际效果 每个人负责一条指标&#xff0c;同步代码&#xff0c;时间问题还是难题跟B组同学请教&#xff0c;答疑 问题&#xff1a;启动 Tracer 【已解决】 环境问题&#xf…
阅读更多...
Python读取Excel每一行为列表—大PK(openpyxl\pandas\xlwings\xlrd)看谁用时少？

Python读取Excel每一行为列表—大PK(openpyxl\pandas\xlwings\xlrd)看谁用时少？

目录 背景使用—openpyxl&#xff08;耗时89秒输出&#xff09;使用—pandas&#xff08;耗时44秒输出&#xff09;使用—xlwings&#xff08;耗时15秒输出&#xff09;使用—xlrd&#xff08;耗时47秒输出&#xff09;总结 背景 我们在平常办公的时候&#xff0c;尤其是财务人…
阅读更多...
asisctf 2023 web hello wp

asisctf 2023 web hello wp

hello 开题&#xff0c;直接给了源码。 <?php /* Read /next.txt Hint for beginners: read curls manpage. */ highlight_file(__FILE__); $url file:///hi.txt; if(array_key_exists(x, $_GET) &&!str_contains(strtolower($_GET[x]),file) && !str_c…
阅读更多...
ElementUI之动态树+数据表格+分页

ElementUI之动态树+数据表格+分页

目录 前言 一.ElementUI之动态树 1.前端模板演示 2.数据绑定 2.1 通过链接获取后台数据 2.2 对链接进行绑定 2.3添加动态路由 2.4 配置路由 3.效果演示 二.数据表格动态分页 1.前端模板 2.通过JS交互获取后端数据 3 效果演示 前言 Element UI 是一个基于 Vue.js 的开…
阅读更多...
64位Ubuntu20.04.5 LTS系统安装32位运行库

64位Ubuntu20.04.5 LTS系统安装32位运行库

背景&#xff1a; 在ubutu&#xff08;版本为20.04.5 LTS&#xff09;中运行./arm-none-linux-gnueabi-gcc -v 后提示“no such device”。 经多方查证&#xff0c;是ubutu的版本是64位的&#xff0c;而需要运行的编译工具链是32位的&#xff0c;因此会不兼容。 解决方法就是在…
阅读更多...
反射学习笔记

反射学习笔记

反射学习笔记 一、反射入门案例 在反射中&#xff0c;万物皆对象&#xff0c;方法也是对象。反射可以在不修改源码的情况下&#xff0c;只需修改配置文件&#xff0c;就能实现功能的改变。 实体类 /*** 动物猫类*/ public class Cat {private String name;public void hi()…
阅读更多...
系统安全测试要怎么做？

系统安全测试要怎么做？

进行系统安全测试时&#xff0c;可以按照以下详细的步骤进行&#xff1a; 1、信息收集和分析&#xff1a; 收集系统的相关信息&#xff0c;包括架构、部署环境、使用的框架和技术等。 分析系统的安全需求、威胁模型和安全策略等文档。 2、威胁建模和风险评估&#xff1a; …
阅读更多...
gitee-快速设置

gitee-快速设置

快速设置— 如果你知道该怎么操作&#xff0c;直接使用下面的地址 HTTPS SSH: gitgitee.com:liuzl33078235/esp-idf.git 我们强烈建议所有的git仓库都有一个README, LICENSE, .gitignore文件 初始化 readme 文件 Git入门&#xff1f;查看 帮助 , Visual Studio / TortoiseG…
阅读更多...
el-table 指定层级展开

el-table 指定层级展开

先来看看页面默认全部展开时页面的显示效果&#xff1a;所有节点被展开&#xff0c;一眼望去杂乱无章&#xff01; 那么如何实现只展开指定的节点呢&#xff1f;最终效果如下&#xff1a;一眼看去很舒爽。 干货上代码&#xff1a; <el-table border v-if"refreshTabl…
阅读更多...
软件测试-测试用例

软件测试-测试用例

软件测试-测试用例 1.什么是测试用例 为了实施测试而向被测系统提供的一组集合。这组集合包括测试环境、操作步骤、测试数据、预期结果等要素。 举例&#xff1a;对一个垃圾桶设计测试用例 2.设计测试用例的万能公式 设计测试用例的万能公式&#xff1a;功能测试性能测试界…
阅读更多...
卤制品配送经营商城小程序的用处是什么

卤制品配送经营商城小程序的用处是什么

卤制品也是食品领域重要的分支&#xff0c;尤其对年轻人来说&#xff0c;只要干净卫生好吃价格合理&#xff0c;那复购率宣传性自是不用说&#xff0c;而随着互联网发展&#xff0c;传统线下门店也须要通过线上破解难题或进一步扩大生意。 而商城小程序无疑是商家通过线上私域…
阅读更多...
【漏洞复现】企望制造 ERP命令执行

【漏洞复现】企望制造 ERP命令执行

漏洞描述 由于企望制造 ERP comboxstore.action接口权限设置不当&#xff0c;默认的配置可执行任意SQL语句&#xff0c;利用xp_cmdshell函数可远程执行命令&#xff0c;未经认证的攻击者可通过该漏洞获取服务器权限。 免责声明 技术文章仅供参考&#xff0c;任何个人和组织…
阅读更多...
Maven项目package为jar包后在window运行报A JNI error has occurred

Maven项目package为jar包后在window运行报A JNI error has occurred

原因&#xff1a;本地java版本与项目结构中使用的java版本不一致&#xff08;之前因为别的需求把idea的java版本改为了18&#xff09; 解决方法 打开项目结构&#xff0c;将idea的java版本改为与本地一致 再修改项目中的pom.xml 重新编译&#xff0c;package即可
阅读更多...
Spark集成ClickHouse(笔记)

Spark集成ClickHouse(笔记)

目录 前言&#xff1a; 一.配置环境 1.安装clickhouse驱动 2.配置clickhouse环境 二.spark 集成clickhouse 直接上代码&#xff0c;里面有一些注释哦&#xff01; 前言&#xff1a; 在大数据处理和分析领域&#xff0c;Spark 是一个非常强大且广泛使用的开源分布式计算框架…
阅读更多...
uni-app：实现页面效果1

uni-app：实现页面效果1

效果 代码 <template><view><view class"add"><image :src"add_icon" mode""></image></view><view class"container_position"><view class"container_info"><view c…
阅读更多...
【SQL server】数据库入门基本操作教学

【SQL server】数据库入门基本操作教学

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 前言 数据库是计算机系统中用于存储和管理数据的一种软件系统。它通常由一个或多个数据集合、管理系统和应用程序组成&#xff0c;被广泛应用于企业、政府和个人等各种领域。目前常用的数…
阅读更多...
服务器搭建(TCP套接字)-epoll版(服务端)

服务器搭建(TCP套接字)-epoll版(服务端)

epoll 是一种在 Linux 系统上用于高效事件驱动编程的 I/O 多路复用机制。它相比于传统的 select 和 poll 函数具有更好的性能和扩展性。 epoll 的主要特点和原理&#xff1a; 1、事件驱动&#xff1a;epoll 是基于事件驱动的模型&#xff0c;它通过监听事件来触发相应的回调函…
阅读更多...
最新文章

Copyright @ 2022~2023