Vue学习笔记:计算属性

计算属性

  • 入门
  • 进阶
  • 二次进阶
  • 三次进阶
  • 四次进阶
  • 结界
  • 五次进阶
  • 六次进阶
  • 七次进阶
  • 八次进阶
  • 九次进阶
  • 终章
  • 彩蛋

入门

Vue.js中,计算属性示例:

export default {data() {return {firstName: 'John',lastName: 'Doe'};},computed: {// 计算属性:全名fullName() {return this.firstName + ' ' + this.lastName;}}
}

在这个例子中,fullName是一个计算属性,它基于数据属性(data):firstNamelastName,进行计算。每当firstNamelastName发生变化时,Vue会自动重新计算并更新fullName的值。在模板中你只需引用{{fullName}}即可显示结果。

这个例子是最基础的计算属性实现,代码量最小且直观展示了计算属性的基本用法。

进阶

稍微进阶的示例:涉及更复杂的计算逻辑和条件判断

export default {data() {return {firstName: 'John',lastName: 'Doe',isFormal: false // 是否显示正式称呼};},computed: {// 计算属性:全名(根据是否正式展示不同的称呼)fullName() {if (this.isFormal) {return `${this.firstName.charAt(0).toUpperCase()}${this.firstName.slice(1)}. ${this.lastName.toUpperCase()}`;} else {return `${this.firstName} ${this.lastName}`;}}}
}

在这个例子中,fullName计算属性会根据isFormal数据属性的值来决定返回全名的不同格式。当isFormaltrue时,它将返回姓氏大写且名字仅显示首字母大写的正式称呼;否则,返回正常的全名。在模板中通过{{fullName}}引用该计算属性即可。

二次进阶

一个更进阶的Vue.js计算属性示例:涉及到对复杂对象或数组的处理,以及多个数据依赖项:

export default {data() {return {user: {firstName: 'John',lastName: 'Doe',addresses: [{ type: 'home', street: '123 Main St' },{ type: 'work', street: '456 Elm St' }]},currentAddressType: 'home'};},computed: {// 计算属性:当前地址全称currentAddress() {const selectedAddress = this.user.addresses.find(address => address.type === this.currentAddressType);if (selectedAddress) {return `${this.user.firstName} ${this.user.lastName}'s ${this.currentAddressType} Address: ${selectedAddress.street}`;} else {return 'No address found';}}}
}

在这个例子中,currentAddress计算属性基于user对象中的firstNamelastNameaddresses数组,以及currentAddressType数据属性进行计算。它会查找与currentAddressType匹配的地址,并返回包含用户姓名和所选地址类型的完整地址信息。当模板中引用{{currentAddress}}时,会根据这些数据的变化自动更新显示内容。

三次进阶

更进一步的计算属性示例:涉及嵌套对象的深度计算和条件过滤

export default {data() {return {users: [{ id: 1, name: 'John Doe', age: 30, roles: ['admin', 'user'] },{ id: 2, name: 'Jane Smith', age: 25, roles: ['user'] },// 更多用户...],searchName: '',roleFilter: ['admin']};},computed: {// 计算属性:过滤后的用户列表filteredUsers() {return this.users.filter(user => user.name.toLowerCase().includes(this.searchName.toLowerCase()) &&(this.roleFilter.length === 0 || this.roleFilter.some(role => user.roles.includes(role))));}}
}

在这个例子中,filteredUsers计算属性基于users数组、searchNameroleFilter数据属性进行计算。它首先通过filter()函数对用户列表进行过滤,满足以下两个条件的用户会被保留:

  1. 用户的名字包含搜索关键字(不区分大小写)。
  2. 如果roleFilter有值,则用户的角色列表需至少包含其中一个角色。

模板中引用{{filteredUsers}}时,会根据userssearchNameroleFilter的变化自动更新显示内容。

四次进阶

高阶的Vue.js计算属性示例:涉及到对异步数据处理,例如使用Promise或async/await

<template><div><!-- ... -->{{ formattedUser }}</div>
</template><script>
export default {data() {return {userId: null,user: {}};},computed: {// 计算属性:格式化用户信息(假设从API获取)async formattedUser() {try {if (!this.user.id && this.userId) {const response = await fetch(`/api/users/${this.userId}`);const userData = await response.json();this.$set(this.user, 'id', userData.id);this.$set(this.user, 'name', `${userData.firstName} ${userData.lastName}`);// 其他属性...}return `${this.user.name} (${this.user.id})`;} catch (error) {console.error('Error fetching user:', error);return '无法获取用户信息';}}},watch: {userId(newVal) {if (newVal) {// 当userId变化时,触发formattedUser的重新计算this.formattedUser;}}}
};
</script>

在这个例子中,formattedUser是一个异步计算属性,它会根据userId的变化去异步获取并格式化用户信息。这里使用了async/await和fetch API来模拟从服务器获取用户数据的过程。由于计算属性不支持直接返回Promise,所以我们需要在计算属性内部等待异步操作完成。

同时,通过在watch中监听userId的变化,并触发formattedUser的重新计算,确保当用户ID改变时能及时更新显示内容。注意,Vue并不会自动等待异步计算属性的结果,因此需要在模板中结合v-if等条件渲染或者在watch中进行处理以确保正确渲染结果。

结界

来到四阶的你,对于只负责处理前端,应该已经是够用了。接下来,就是精进的道路。如果还有兴趣,想要更加深入,欢迎继续下去。

五次进阶

涉及到更复杂的业务逻辑和数据处理,比如使用Vuex管理状态并根据多个store中的值进行计算:

import { mapState } from 'vuex';export default {computed: {...mapState(['user', 'settings']),// 计算属性:根据用户权限和应用设置决定是否显示特定功能showAdvancedFeatures() {return this.user.isAdmin && this.settings.showAdvancedOptions;},// 计算属性:处理复杂对象结构,并返回格式化后的数据formattedUserData() {if (this.user && this.user.data) {const { firstName, lastName, posts = [] } = this.user.data;const recentPost = posts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))[0];return `${firstName} ${lastName}'s recent post: "${recentPost.title}"`;}return 'No user data available';}}
}

在这个例子中:

  1. 使用mapState帮助器从Vuex store获取usersettings状态。
  2. showAdvancedFeatures计算属性基于用户是否为管理员以及应用设置来确定是否显示高级功能。
  3. formattedUserData计算属性则处理嵌套的对象结构,提取用户的名字、最近一篇博客的标题(按创建时间排序),并返回格式化后的字符串。如果用户数据不存在,则返回提示信息。

这些计算属性会自动响应关联的Vuex store状态变化,确保视图内容始终是最新的。

六次进阶

使用计算属性进行性能优化,如利用缓存结果和依赖追踪:

export default {data() {return {largeList: [...], // 假设这是一个非常大的数组filterKeyword: ''};},computed: {// 使用getter和setter实现带有缓存功能的复杂过滤逻辑filteredLargeList: {get() {if (this._cachedFilteredList && this.filterKeyword === this._lastFilterKeyword) {return this._cachedFilteredList;}const keyword = this.filterKeyword.toLowerCase();this._cachedFilteredList = this.largeList.filter(item => item.title.toLowerCase().includes(keyword) ||item.description.toLowerCase().includes(keyword));this._lastFilterKeyword = this.filterKeyword;return this._cachedFilteredList;},set(newList) {// 这里假设你允许通过外部直接设置过滤后的列表,但通常不推荐这样做this._cachedFilteredList = newList;}}},created() {// 初始化缓存变量this._cachedFilteredList = [];this._lastFilterKeyword = '';}
}

在这个例子中:

  1. filteredLargeList是一个具有getter和setter方法的计算属性。
  2. getter方法首先检查是否存在缓存(_cachedFilteredList)并且当前的过滤关键词是否与上次相同(_lastFilterKeyword)。如果满足条件,则直接返回缓存的结果,避免了对大型数据集的重复过滤操作,从而提高性能。
  3. 如果过滤关键词发生变化,计算属性会重新过滤数据,并更新缓存和关键词记录。
  4. setter方法用于在特殊情况下允许外部直接设置过滤后的列表,但这通常不是计算属性的标准用法。在大多数场景下,我们只需关注getter部分即可。

这个计算属性结合了响应式依赖追踪、业务逻辑处理以及性能优化策略,展示了Vue.js计算属性在实际项目中的高级应用。

七次进阶

涉及利用计算属性进行深度监听和数据转换,同时结合使用Vuex:

<template><div><!-- ... -->{{ formattedAndFilteredItems }}</div>
</template><script>
import { mapState, mapGetters } from 'vuex';export default {computed: {// 使用mapState获取store中的原始items...mapState(['items']),// 使用mapGetters获取全局的filterKeyword和formattingOptions...mapGetters(['filterKeyword', 'formattingOptions']),// 计算属性:深度监听并过滤、格式化itemsformattedAndFilteredItems() {const filteredItems = this.items.filter(item => item.title.toLowerCase().includes(this.filterKeyword.toLowerCase()));return filteredItems.map(item => ({...item,title: this.applyFormatting(item.title),description: this.applyFormatting(item.description)}));},// 计算属性方法:根据formattingOptions对文本进行格式化applyFormatting(text) {if (!text || !this.formattingOptions) return text;let formattedText = text;// 根据不同的formattingOptions对文本进行处理if (this.formattingOptions.uppercase) formattedText = formattedText.toUpperCase();if (this.formattingOptions.lowercase) formattedText = formattedText.toLowerCase();if (this.formattingOptions.capitalize) formattedText = formattedText.replace(/\b\w/g, l => l.toUpperCase());return formattedText;}}
};
</script>

在这个例子中:

  1. 使用mapState从Vuex store获取items数组。
  2. 使用mapGetters从Vuex store获取全局的过滤关键词(filterKeyword)和格式化选项(formattingOptions)。
  3. formattedAndFilteredItems计算属性首先基于filterKeyword过滤items数组,并对过滤后的结果应用applyFormatting函数来格式化每个项目的标题和描述字段。
  4. applyFormatting是一个计算属性方法,它根据formattingOptions动态地将文本转换为大写、小写或首字母大写。

这个计算属性不仅实现了深度监听、过滤以及复杂的数据转换,还展示了如何在组件内部与Vuex状态管理器紧密协作。

八次进阶

涉及动态计算CSS样式、响应式布局以及与第三方库的交互:

<template><div :style="dynamicStyles"><!-- ... --></div>
</template><script>
import axios from 'axios';export default {data() {return {windowWidth: window.innerWidth,theme: null,customFontSize: 16,};},computed: {// 计算属性:根据窗口宽度和主题动态生成CSS样式dynamicStyles() {return {color: this.theme ? `var(--${this.theme}-text)` : '#333',fontSize: `${this.customFontSize}px`,width: `${this.windowWidth}px`,transform: `scale(${this.calculateScaleFactor()})`,};},// 计算属性:根据用户设置和窗口大小计算缩放因子calculateScaleFactor() {if (this.windowWidth > 1200) {return 1;} else if (this.windowWidth <= 600) {return 0.8;} else {return 0.95 + (this.windowWidth - 600) * 0.01 / 600;}},// 计算属性:从API获取并解析主题信息async currentTheme() {if (!this.theme) {try {const { data } = await axios.get('/api/current-theme');this.$set(this, 'theme', data.name);} catch (error) {console.error('Error fetching theme:', error);}}return this.theme;},},mounted() {// 监听窗口大小变化,实时更新windowWidthwindow.addEventListener('resize', () => {this.windowWidth = window.innerWidth;});},
};
</script>

在这个例子中:

  1. dynamicStyles计算属性根据窗口宽度、当前主题和用户自定义字体大小生成CSS样式对象。
  2. calculateScaleFactor计算属性基于窗口宽度返回一个动态缩放因子,用于响应式布局调整。
  3. currentTheme是一个异步计算属性,它会从API获取当前主题,并在获取成功后将其设置到组件的本地状态。由于计算属性不支持直接返回Promise,因此这里使用了 $set 方法来更新数据。

此外,还监听了窗口大小变化事件以确保windowWidth始终是最新的值,进而影响到依赖它的计算属性结果。这个示例展示了计算属性如何在实际项目中进行复杂的数据处理、样式计算和API交互。

九次进阶

涉及到高级组件设计、Vuex状态管理、自定义指令、高级路由和过渡动画等。以下是一个包含这些概念的示例:

<template><div id="app"><!-- 使用全局主题状态 --><div :class="themeClass" @click="toggleTheme">主题切换({{ theme }})</<div><!-- 动态加载子组件,使用动态路由与过渡动画 --><transition :name="transitionName"><router-view :key="$route.fullPath"></router-view></transition><!-- 使用自定义指令调整元素透明度 --><p v-fadeInOut>这个文本会淡入淡出</p></div>
</template><script>
import { mapState } from 'vuex';
import axios from 'axios';
import FadeInOut from '@/directives/FadeInOut';export default {directives: {// 注册自定义指令fadeInOut: FadeInOut,},computed: {...mapState(['currentTheme']), // 从Vuex中映射当前主题状态// 根据主题计算CSS类名themeClass() {return this.currentTheme === 'light' ? 'theme-light' : 'theme-dark';},// 根据路由变化设置过渡动画名称transitionName() {return this.$route.meta.transition || 'fade';},},methods: {async toggleTheme() {const newTheme = this.currentTheme === 'light' ? 'dark' : 'light';try {await axios.post('/api/theme', { theme: newTheme });this.$store.commit('UPDATE_THEME', newTheme);} catch (error) {console.error('Error toggling theme:', error);}},},
};
</script><style scoped>
.theme-light { background-color: #fff; color: #333; }
.theme-dark { background-color: #333; color: #fff; }/* 过渡动画样式 */
.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

在这个例子中:

  1. 我们引入了Vuex并使用mapState帮助器来获取存储在全局状态管理中的当前主题。
  2. 定义了一个计算属性themeClass,根据当前主题动态地为元素添加相应的CSS类名。
  3. transitionName计算属性根据路由元信息设置页面切换时的过渡动画效果。
  4. 自定义指令v-fadeInOut用于控制文本内容的淡入淡出效果。
  5. 在方法toggleTheme中,我们通过调用API更新服务器端的主题,并且同步修改 Vuex 中的状态。

此外,通过观察$route对象的变化来实现路由过渡动画,并在点击事件中处理主题切换逻辑,展示了如何将多个Vue.js进阶特性整合到一起以构建一个更复杂的应用程序结构。

终章

如果你能掌握到这里,就算是踏入了新世界的大门。

进一步进阶Vue.js开发,我们可以探讨更复杂的场景和最佳实践,包括:

  1. 模块化和项目架构优化

    • 使用Vue CLI 3或4创建并配置多页面应用(MPA)或单页面应用(SPA)。
    • 按功能拆分组件,并组织成合理的目录结构,如原子组件、分子组件和容器组件等。
    • 引入模块化工具如Webpack或Vite进行资源管理和打包。
  2. 异步数据处理与API调用

    • 利用Vue Router的导航守卫(Navigation Guards)在路由切换时处理异步数据加载。
    • 结合axios或其他HTTP库实现API请求封装,支持拦截器、错误处理和响应式数据绑定。
    • 使用async/await或Promise配合Vue生命周期钩子进行数据预取和懒加载。
  3. 高级状态管理

    • 在大型应用中深度使用Vuex,设计模块化的store结构,利用getters、mutations和actions来管理全局状态。
    • 集成中间件(middleware)来监控action调用过程,实现日志记录、权限校验等功能。
  4. 性能优化

    • 使用Vue的v-ifv-show控制条件渲染,避免不必要的DOM操作。
    • 对于大量数据列表,采用虚拟滚动技术提高性能。
    • 利用Vue的keep-alive缓存组件实例以避免重复渲染。
    • 开启代码分割和动态导入减少初始加载时间。
  5. 测试驱动开发

    • 使用Jest、Mocha等单元测试框架结合Vue Test Utils编写组件单元测试。
    • 配合Selenium等工具进行端到端(E2E)测试,确保应用整体流程的正确性。
  6. 国际化和本地化

    • 应用Vue I18n插件实现多语言支持,根据用户偏好动态更改界面文字内容。
  7. SSR(服务器端渲染)和静态生成

    • 针对SEO友好和首屏加载速度要求高的场景,可以采用Nuxt.js搭建Vue SSR应用或者Next.js实现静态站点生成。
  8. Web Workers和Service Worker

    • 使用Web Workers将CPU密集型任务迁移到后台线程以改善用户体验。
    • 实现PWA特性,利用Service Worker缓存关键资源,使应用具备离线访问能力。
  9. 可复用的设计模式和最佳实践

    • 使用Composition API(Vue 3引入)重构逻辑,提升代码可读性和复用性。
    • 探索组合式API中的依赖注入、自定义渲染函数以及Suspense用于异步组件加载。

这些进阶实践能够构建出更为复杂、高性能且易于维护的Vue.js应用程序。

彩蛋

进阶实践不仅限于上述内容,还可以深入到更专业的领域和技术栈整合中。以下是进一步的进阶主题:

  1. Vue 3特性深入

    • 熟悉并掌握Composition API(组合式API)以替代Options API进行逻辑组织和复用。
    • 使用Teleport实现跨组件定位DOM元素。
    • 利用Suspense实现异步组件的高级加载策略。
    • 学习如何使用自定义渲染器拓展Vue应用至WebGL、Canvas或其他非DOM环境。
  2. TypeScript集成

    • 将TypeScript与Vue.js结合,利用类型系统提高代码质量及开发效率,编写强类型组件。
    • 配置Vue项目的TS配置文件,如shims-vue.d.tstsconfig.json
  3. 状态管理库升级

    • 探索Pinia(Vue 3推荐的状态管理库),它基于Composition API设计,提供更简洁直观的API来管理复杂状态。
  4. UI框架深度定制

    • 对流行的UI库如Element UI(Vue 2)或Vuetify、Quasar、Ant Design Vue(针对Vue 3)进行深度定制和二次开发。
  5. 微前端架构

    • 在大型企业级项目中采用微前端技术,比如通过Single-Spa或Qiankun将多个Vue应用集成在一个主壳应用内。
  6. Serverless SSR

    • 结合云服务提供的Serverless函数服务,构建无服务器端渲染解决方案,降低运维成本和提升资源利用率。
  7. DevOps工具链整合

    • CI/CD流程自动化,包括Git Hooks、GitHub Actions或Jenkins等持续集成/部署工具,实现自动化测试、打包和发布。
  8. 错误监控与性能分析

    • 集成Sentry、Bugsnag等错误追踪工具,实时收集线上错误信息并优化问题修复流程。
    • 利用Lighthouse、Webpack Bundle Analyzer等工具分析和优化应用性能。
  9. 移动端开发与响应式设计

    • 掌握Vue在移动端项目中的最佳实践,结合Vue Touch、Hammer.js处理手势交互。
    • 设计和实施自适应布局,确保应用在不同屏幕尺寸和设备上具有良好的用户体验。
  10. GraphQL集成

    • 将Vue应用与GraphQL后端服务对接,使用Apollo Client等库处理GraphQL查询、订阅以及缓存机制。

这些更为复杂的进阶实践能够应对更多挑战,构建出更加现代化、可扩展且高效率的Vue.js应用程序。

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

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

相关文章

(12)喝汽水

文章目录 每日一言题目解题思路一代码 解题思路二代码 结语 每日一言 长风沛雨&#xff0c;艳阳明月。田野被喜悦铺满&#xff0c;天地间充满着生的豪情。 题目 已知1瓶汽水1元&#xff0c;2个空瓶可以换一瓶汽水&#xff0c;输入整数n&#xff08;n>0&#xff09;&#x…

Maven工程的配置及使用

一、Maven章节 Maven 是 Apache 软件基金会组织维护的一款专门为 Java 项目提供构建和依赖管理支持的工具 1.1、maven的作用 1&#xff09;依赖管理&#xff1a; 方便快捷的管理项目依赖的资源包&#xff08;jar包&#xff09;避免版本冲突 2&#xff09;统一项目结构&…

机器学习算法之逻辑回归算法(Logistic Regression)

逻辑回归算法是一种用于分类问题的经典机器学习算法。虽然它的名字中带有“回归”,但实际上逻辑回归用于解决分类问题,特别是二分类问题。本篇博文将详细介绍逻辑回归算法的工作原理、应用领域以及Python示例。 算法背景 逻辑回归起源于20世纪初,用于分析生存率数据。随后…

Android studio打开md无法显示md渲染问题

Where is Android Studio Markdown support plugin preview preference? - Stack Overflow android studio开发无法选择markdown渲染功能的问题 原因是java runtime出了问题 搜索下面功能 Choose Boot Java Runtime for the IDE 选择带JCEF的 可以选最新的java版本 重启之…

Jvm FullGC 如何排查?

使用场景 我们在使用系统时&#xff0c;有时请求和响应会变得特别慢&#xff0c;系统也变得很卡。 有可能是FullGC的问题&#xff0c;可以逐步地进行排查。 使用jps和top确定进程号pid jps可以列出正在运行的jvm进程&#xff0c;并显示jvm执行主类名称( main()函数所在的类…

浙政钉(专有钉钉)

专有钉钉是浙政钉的测试版本&#xff0c;可在正式发布之前进行业务开发。 专有钉钉 原名政务钉钉 是高安全、强管控、灵活开放的面向大型组织专有独享的协同办公平台。支持专有云、混合云等多种方式灵活部署&#xff0c;以满足客户特定场景所需为目标&#xff0c;最大化以“平…

window 镜像---负载篇

前提&#xff1a;需要修改window的powershell执行脚本的策略 步骤&#xff1a;以管理员身份打开powershell&#xff0c;执行 Get-ExecutionPolicy查看当前执行策略&#xff0c;若返回值是Restricted&#xff0c;需执行Set-ExecutionPolicy RemoteSigned powershell 版本信息&am…

.NET Core已经开源好几年了, 为什么不像JVM那样很多人研究和调优其GC算法?

.NET Core的开源确实是微软近年来重要的一步&#xff0c;它不仅标志着.NET生态系统向更开放、更多样化的方向迈进&#xff0c;也为更广泛的社区参与和贡献提供了可能。然而&#xff0c;与JVM相比&#xff0c;研究和调优GC&#xff08;垃圾回收&#xff09;算法的工作似乎没有那…

gif格式图片是怎么做的?教你一招在线转换

常见的图片有jpg、png以及gif格式&#xff0c;其中&#xff0c;jpg和png格式的图片我们一般手机拍摄或是接受的都是这两种格式&#xff0c;但是gif格式的图片我们却需要从网上下载。那么&#xff0c;当我们想要自己制作gif动画的时候要怎么操作呢&#xff1f;只需要使用在线制作…

NDK Could NOT find OpenGL (missing: OPENGL_glx_LIBRARY) Ubuntu

1. update 该命令将安装一堆新包&#xff0c;包括gcc&#xff0c;g 和make。 sudo apt-get update sudo apt-get install -y build-essential2. install OpenGL依赖库 sudo apt-get install freeglut3-dev sudo apt-get install libgl1-mesa-dev sudo apt-get install libxt-…

MAE实战:使用MAE提高主干网络的精度(一)

摘要 MAE已经出来有几年了&#xff0c;很多人还不知道怎么去使用&#xff0c;本文通过两个例子说明一下。分两部分&#xff0c;一部分介绍一个简单的例子&#xff0c;让大家了解MAE训练的流程。一部分是一个新的模型&#xff0c;让大家了解如何将自己的模型加入MAE。 论文标…

【BBF系列协议】TR156 在TR101环境中使用GPON Access

TR-156 在TR-101环境中使用GPON Access 执行摘要 TR-101提供了一种基于以太网的体系结构,它已成为针对使用DSL作为宽带接入技术的住宅和企业客户的三联游戏部署的全球标准。然而,许多TR-101的体系结构规范都是与访问无关的,而且它们今天也与其他访问技术一起被广泛使用,特…

后端课程接口

路由&#xff1a;course/urls.py router.register(categories, views.CourseCategoryViewSet, categories) # 分类 router.register(free, views.CourseViewSet, free) # 课程视图&#xff1a;course/views.py from rest_framework.viewsets import GenericViewSet from re…

steam搬砖项目赚钱吗?操作流程看这一篇就够了

很多人应该听说过steam&#xff0c;它是国外一款知名的游戏社交平台&#xff0c;也是目前世界上最大的游戏平台之一。而steam搬砖项目&#xff0c;关键就是靠信息差。我们要做的就是在steam以低价买入道具装备&#xff0c;然后上架到网易buff卖出&#xff0c;赚取差价。 什么人…

【Mapstruct】MapStruct实战:简化Java Bean映射

虽然早就在用mapstruct了&#xff0c;但因为要快速原型开发&#xff0c;天天写builder模式&#xff0c;感觉太长了&#xff0c;不好看&#xff0c;&#xff08;然后最近被同事说丑了 &#xff09;&#xff0c;感觉还是做个总结&#xff0c;怒转mapstruct 问题背景或前提知识 …

【PLC一体机】PLC一体机中如何实现触摸屏和PC电脑的通讯

博主今天准备把之前买的PLC一体机拿出来玩一下&#xff0c;翻看以前的博文&#xff0c;发现没有记录分享PLC一体机中如何实现触摸屏程序下载的内容。 如之前博文介绍的那样&#xff0c;PLC一体机由PLC和触摸屏两部分集成的设备&#xff0c;因此设备内部已经做好了PLC和触摸屏之…

C++拷贝构造函数、赋值运算符重载

1.拷贝构造函数 拷贝构造函数的写法如图所示 调用方式如下 接下来我来说说它的特征 1.1特征 拷贝构造函数&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c;在用已存在的类类型对象创建新对象时由编译器自动调用。 拷贝构造函…

【SpringBoot1】Spring Boot是如何推断你的工程类型的

我们的工程一般都是基于java的Servlet的&#xff0c;但是除此之外还有其他类型的&#xff0c; 在WebApplicationType里定义了常见的类型&#xff1a; public enum WebApplicationType {/*** The application should not run as a web application and should not start an* e…

XGB-2: Boosted Trees(提升树)简介

XGBoost代表“Extreme Gradient Boosting”&#xff0c;其中术语“Gradient Boosting”来源于Friedman的论文《Greedy Function Approximation: A Gradient Boosting Machine》。 梯度提升树已经存在一段时间&#xff0c;关于这个主题有很多资料。本部分将使用监督学习的元素&…

【Chrono Engine学习总结】1-安装配置与程序运行

本文仅用于个人安装记录。 官方安装教程 https://api.projectchrono.org/8.0.0/tutorial_install_chrono.html Windows下安装 windows下安装就按照教程好了。采用cmake-gui进行配置&#xff0c;建议首次安装只安装核心模块。然后依此configure下irrlicht&#xff0c;sensor…