Vue 3 功能实现

Vue 3 功能实现

本论旨在研究和分析 Vue 3 的功能实现,深入探讨 Vue 3 作为下一代前端开发框架的特色与创新。论文首先介绍了 Vue 3 的背景和发展历程,随后重点讨论了其引入的核心功能和改进之处,包括响应式系统的全面重构、Composition API、性能优化、TypeScript 支持等。最后,论文还通过实例和案例分析,验证了 Vue 3 在实际项目应用中的效果。研究结果表明,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.mzph.cn/news/3669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

性能测试之性能问题分析

开始性能测试前需要了解的内容&#xff1a; 1、项目具体需求。 2、指标&#xff1a;响应时间在多少以内&#xff0c;并发数多少&#xff0c;tps多少&#xff0c;总tps多少&#xff0c;稳定性交易总量多少&#xff0c;事务成功率&#xff0c;交易波动范围&#xff0c;稳定运行时…

浅谈chatgpt如何改变人们生活

ChatGPT&#xff0c;作为一种自然语言处理模型&#xff0c;确实有潜力改变人们的生活。以下是ChatGPT如何可能改变人们生活的几个方面&#xff1a;1.智能助手和客户支持&#xff1a;ChatGPT可以作为智能助手嵌入到各种应用中&#xff0c;为用户提供即时的帮助和解答问题。在客户…

【iOS】—— 面向对象,Runtime,ARC等问题总结

对于暑假学习大多数是对之前学习的一个复习&#xff0c;在这里只做对之前学习欠缺知识的补充以及这些知识点涉及的一些问题&#xff0c;从问题入手学习。 文章目录 面向对象1.一个NSObject对象占多少内存&#xff1f;2.对象的isa指针指向哪里&#xff1f;3.OC的类信息存放在哪…

spring复习:(41)全注解方式的事务

一、创建事务、数据源相关的配置类&#xff1a; package cn.edu.tju.study.service.transaction;import com.zaxxer.hikari.HikariDataSource; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import or…

诚迈科技子公司智达诚远精耕智能驾驶,为商用落地注入创新力量

近期&#xff0c;工业和信息化部副部长辛国斌在新闻发布会上表示&#xff0c;将启动智能网联汽车准入和上路通行试点&#xff0c;组织开展城市级“车路云一体化”示范应用&#xff0c;将支持L3级及更高级别的自动驾驶功能商业化应用。根据工信部最新消息&#xff0c;《智能网联…

使用matlab中的SVM进行数据回归预测

在MATLAB中使用支持向量机&#xff08;SVM&#xff09;进行数据回归预测&#xff0c;你可以遵循以下步骤&#xff1a; 准备数据集&#xff1a; 将你的特征矩阵X和目标变量向量y加载到MATLAB工作空间中。确保X和y的维度匹配。 拆分数据集&#xff1a; 将数据集划分为训练集和测…

AI编程助手体验

一、背景 最近在接触各种AI插件&#xff0c;用copilot的话要10美元每月&#xff0c;太贵&#xff0c;就下载了清华的CodeGeeX 刚好&#xff0c;有个需求&#xff0c;需要将枚举的所有值&#xff0c;随机组合求和&#xff0c;并返回所有组合之和。 ”假设你有一个名为 enum_v…

实际上手体验maven面对冲突Jar包的加载规则 | 京东云技术团队

一、问题背景 相信大家在日常的开发过程中都遇到过Jar包冲突的问题&#xff0c;emm&#xff0c;在最近处理业务需求时我也遇到了不同版本jar包冲突导致项目加载出错的问题。主要是一个完整的项目会不可避免的使用第三方的Jar包来实现功能开发&#xff0c;各种第三方包之间可能…

大数据篇Kafka消息队列指定Topic打印Key、Value、Offset和Partition

1、概念简介 说到Apache Kafka消息传递系统时&#xff0c;以下是一些关键概念的解释&#xff1a; Key&#xff08;键&#xff09;&#xff1a;Kafka消息由Key和Value组成。Key是一个可选的字段&#xff0c;它通常用于消息的路由和分区策略。Key的目的是确保具有相同Key的消息…

Python 3 拷贝、浅拷贝、直接引用

诸神缄默不语-个人CSDN博文目录 复杂的以后再补。 总的来说&#xff0c;像常数、字符串这种比较简单的变量无所谓&#xff0c;但是对于一些复杂对象&#xff08;比如list等&#xff09;&#xff0c;如果直接使ba&#xff0c;相当于直接把a的路径给了b&#xff0c;b这个对象的…

day35-Postman/ajax

0目录 1.postman 2.ajax 1.Postman 1.1 定义&#xff1a;postman用于测试http协议接口&#xff0c;无论是开发还是测试人员 1.2 Servlet中的doGet&#xff08;&#xff09;/doPost…

建造者模式-复杂对象的组装与创建

生产一辆车&#xff0c;主要有以下步骤&#xff1a;安装骨架、安装发动机及安装轮胎。这些步骤有指定的执行顺序&#xff0c;步骤缺一不可。 图 传统方案 传统方案存在的问题&#xff1a; 传参不便&#xff0c;虽可在构造函数那传参&#xff0c;但是传参时需要注意参数顺序等…

出租屋智能电表系统

随着科技的不断发展&#xff0c;智能化逐渐成为人们生活中不可或缺的一部分。在房屋租赁市场中&#xff0c;智能电表系统成为越来越多出租屋的标配&#xff0c;为房东和租户带来了便捷和安全。本文将从以下几个方面介绍出租屋智能电表系统的特点和优势。 一、出租屋智能电表系统…

LCD-STM32液晶显示中英文-(7.字模及显示原理)

目录 字模介绍 什么是字模 字模的构成 字模显示原理 字模制作 如何制作字模 字模寻址公式 存储字模文件 字模介绍 什么是字模 有了编码&#xff0c;我们就能在计算机中处理、存储字符了&#xff0c;但是如果计算机处理完字符后直接以编码的形式输出&#xff0c;人类将难…

Flutter:网络图像缓存插件——cached_network_image

前言 为什么要使用这个插件&#xff0c;有什么用呢&#xff1f;毕竟官方提供了Image.network来进行网络图片加载 Image.network和CachedNetworkImage都可以用于在Flutter中加载网络图片&#xff0c;但它们之间有一些区别。 Image.network是Flutter核心库提供的一个构造函数&…

体外诊断相关介绍-博迈伦IVD原料供应商

摘要&#xff1a;体外诊断是在人体之外进行检测而获取临床诊断信息的一种诊断方法&#xff0c;它是现代医学广泛使用的诊断方法。体外诊断的范畴很广&#xff0c;按照检测原理或检测方法&#xff0c;体外诊断可以分为生化诊断、免疫诊断、分子诊断、微生物诊断、血液体液诊断五…

Java性能优化-测试try-catch放在循环内和外的性能对比与业务区别

场景 Java中使用JMH(Java Microbenchmark Harness 微基准测试框架)进行性能测试和优化&#xff1a; Java中使用JMH(Java Microbenchmark Harness 微基准测试框架)进行性能测试和优化_霸道流氓气质的博客-CSDN博客 使用如上方式测试Java中try-catch放在循环内和循环外是否有性…

Unity游戏源码分享-Unity手游射击横版游戏

Unity游戏源码分享-Unity手游射击横版游戏 战斗场景 项目地址&#xff1a; https://download.csdn.net/download/Highning0007/88050256

实训笔记7.18

实训笔记7.18 7.18一、座右铭二、Hadoop大数据技术 大数据软件一般都要求7*24小时不宕机三、Hadoop的组成3.1 HDFS3.2 MapReduce3.3 YARN3.4 Hadoop Common 四、Hadoop生态圈五、Hadoop的安装问题5.1 Hadoop的本地安装模式-基本不用5.2 Hadoop的伪分布安装模式5.3 Hadoop的完全…

MySQL(十):MySQL语法-进阶

MySQL语法-进阶 数据类型Text 类型Number 类型Date 类型 ASALTER TABLEconcat、group_concatSQL注入阻止SQL注入方案一方案二方案三 HAVING 子句临时表正则表达式获取服务器元数据事务导出数据导出数据导出表作为原始数导出SQL格式的数据 导入数据解决无法导入问题使用 LOAD DA…