vue入门到精通（四）

news2025/1/16 14:09:21

三、vue3组合式API

1、组合式API

1.1 什么是组合式API

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

  • 响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
  • 生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
  • 依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

组合式 API 是 Vue 3 及 Vue 2.7 的内置功能。对于更老的 Vue 2 版本，可以使用官方维护的插件 @vue/composition-api。在 Vue 3 中，组合式 API 基本上都会配合 <script setup> 语法在单文件组件中使用。

1.2 为什么使用它

1.2.1 更好的逻辑复用#

组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins，而组合式 API 解决了 mixins 的所有缺陷。

组合式 API 提供的逻辑复用能力孵化了一些非常棒的社区项目，比如 VueUse，一个不断成长的工具型组合式函数集合。组合式 API 还为其他第三方状态管理库与 Vue 的响应式系统之间的集成提供了一套简洁清晰的机制，例如 RxJS。

1.2.2更灵活的代码组织#

许多用户喜欢选项式 API 的原因是因为它在默认情况下就能够让人写出有组织的代码：大部分代码都自然地被放进了对应的选项里。然而，选项式 API 在单个组件的逻辑复杂到一定程度时，会面临一些无法忽视的限制。这些限制主要体现在需要处理多个逻辑关注点的组件中，这是我们在许多 Vue 2 的实际案例中所观察到的。

我们以 Vue CLI GUI 中的文件浏览器组件为例：这个组件承担了以下几个逻辑关注点：

  • 追踪当前文件夹的状态，展示其内容
  • 处理文件夹的相关操作 (打开、关闭和刷新)
  • 支持创建新文件夹
  • 可以切换到只展示收藏的文件夹
  • 可以开启对隐藏文件夹的展示
  • 处理当前工作目录中的变更

这个组件最原始的版本是由选项式 API 写成的。如果我们为相同的逻辑关注点标上一种颜色，那将会是这样：

folder component before

你可以看到，处理相同逻辑关注点的代码被强制拆分在了不同的选项中，位于文件的不同部分。在一个几百行的大组件中，要读懂代码中的一个逻辑关注点，需要在文件中反复上下滚动，这并不理想。另外，如果我们想要将一个逻辑关注点抽取重构到一个可复用的工具函数中，需要从文件的多个不同部分找到所需的正确片段。

而如果用组合式 API 重构这个组件，将会变成下面右边这样：

重构后的文件夹组件

现在与同一个逻辑关注点相关的代码被归为了一组：我们无需再为了一个逻辑关注点在不同的选项块间来回滚动切换。此外，我们现在可以很轻松地将这一组代码移动到一个外部文件中，不再需要为了抽象而重新组织代码，大大降低了重构成本，这在长期维护的大型项目中非常关键。

1.2.3 更好的类型推导#

近几年来，越来越多的开发者开始使用 TypeScript 书写更健壮可靠的代码，TypeScript 还提供了非常好的 IDE 开发支持。然而选项式 API 是在 2013 年被设计出来的，那时并没有把类型推导考虑进去，因此我们不得不做了一些复杂到夸张的类型体操才实现了对选项式 API 的类型推导。但尽管做了这么多的努力，选项式 API 的类型推导在处理 mixins 和依赖注入类型时依然不甚理想。

因此，很多想要搭配 TS 使用 Vue 的开发者采用了由 vue-class-component 提供的 Class API。然而，基于 Class 的 API 非常依赖 ES 装饰器，在 2019 年我们开始开发 Vue 3 时，它仍是一个仅处于 stage 2 的语言功能。我们认为基于一个不稳定的语言提案去设计框架的核心 API 风险实在太大了，因此没有继续向 Class API 的方向发展。在那之后装饰器提案果然又发生了很大的变动，在 2022 年才终于到达 stage 3。另一个问题是，基于 Class 的 API 和选项式 API 在逻辑复用和代码组织方面存在相同的限制。

相比之下，组合式 API 主要利用基本的变量和函数，它们本身就是类型友好的。用组合式 API 重写的代码可以享受到完整的类型推导，不需要书写太多类型标注。大多数时候，用 TypeScript 书写的组合式 API 代码和用 JavaScript 写都差不太多！这也让许多纯 JavaScript 用户也能从 IDE 中享受到部分类型推导功能。

1.2.4 更小的生产包体积#

搭配 <script setup> 使用组合式 API 比等价情况下的选项式 API 更高效，对代码压缩也更友好。这是由于 <script setup> 形式书写的组件模板被编译为了一个内联函数，和 <script setup> 中的代码位于同一作用域。不像选项式 API 需要依赖 this 上下文对象访问属性，被编译的模板可以直接访问 <script setup> 中定义的变量，无需一个代码实例从中代理。这对代码压缩更友好，因为本地变量的名字可以被压缩，但对象的属性名则不能。

1.3 第一个组合式API的例子

18_composition/74_composition.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第一个组合式API案例</title>
</head>
<body>
  <div id="app">
    <button @click="add">点击了{{ count }}次</button>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const { createApp, ref, onMounted, onUpdated } = Vue

  createApp({
    setup () { // 组合式API标识
      // 定义初始化数据，使用  ref 函数
      const count = ref(10) // 定义了初始化 数据 count 的数值为10

      const add = () => {
        console.log(count)
        count.value += 1 // ref 定义的初始值，修改状态用其 value 属性
      }
      // 生命周期钩子函数的使用
      onMounted(() => { // mounted
        document.title = `点击次数为${count.value}`
      })

      onUpdated(() => { // updated
        document.title = `点击次数为${count.value}`
      })

      // 必须要有返回值，返回数据以及相应的事件
      return {
        count,
        add
      }
    }
  }).mount('#app')
</script>
</html>

体验提取公共部分

18_composition/75_composition_hooks.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个组合式API案例</title>
</head>
<body>
    <div id="app">
       <button @click="add">点击了{{ count }}次</button>
    </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
    const { createApp, ref, onMounted, onUpdated } = Vue

    // 自定义hooks 一般以 use 开头
     const useCount = () => {
       const count = ref(10) // 定义了初始化 数据 count 的数值为10
   
       const add = () => {
         console.log(count)
         count.value += 1 // ref 定义的初始值，修改状态用其 value 属性
       }
   
       return {
         count, add
       }
    }

    const useTitle = (count) => {
       // 生命周期钩子函数的使用
       onMounted(() => { // mounted
         document.title = `点击次数为${count.value}`
       })
   
    		onUpdated(() => { // updated
         document.title = `点击次数为${count.value}`
       })
     }
    
    createApp({
       setup () { // 组合式API标识
         const { count, add } = useCount()
            
         useTitle(count)

         // 必须要有返回值，返回数据以及相应的事件
         return {
           count,
           add
      }
       }
    }).mount('#app')
</script>
  </html>

2、setup()函数

setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

  1. 需要在非单文件组件中使用组合式 API 时。
  2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

其他情况下，都应优先使用 <script setup> 语法。

2.1 基本使用

我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其它的选项也可以通过组件实例来获取 setup() 暴露的属性

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

请注意在模板中访问从 setup 返回的 ref 时，它会自动浅层解包，因此你无须再在模板中为它写 .value。当通过 this 访问时也会同样如此解包。

setup() 自身并不含对组件实例的访问权，即在 setup() 中访问 this 会是 undefined。你可以在选项式 API 中访问组合式 API 暴露的值，但反过来则不行。

18_composition/76_composition_setup_base.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>76_setup的基本使用</title>
</head>
<body>
  <div id="app">
    <!-- 0 -->
    {{ count }}
  </div>
</body>
<script src="lib/vue.global.js"></script>
<script>
  const { createApp, ref, onMounted, onUpdated } = Vue

  const app = createApp({
    setup () { // 组合式API
      // 创建了响应式变量
      const count = ref(0)
     
      // 返回值会暴露给模板和其他的选项式 API 钩子
      return {
        count
      }
    },
    data () { // 虽然设置了同名的变量，但是显示的是 组合式API中的数据
      return {
        count: 100
      }
    },
    mounted () {
      console.log(this.count) // 0
    }
  })

  app.mount('#app')
</script>
</html>

2.2 访问 Prop

setup 函数的第一个参数是组件的 props。和标准的组件一致，一个 setup 函数的 props 是响应式的，并且会在传入新的 props 时同步更新。

{
  props: {
    title: String,
    count: Number
  },
  setup(props) {
    console.log(props.title)
    console.log(props.count)
  }
}

请注意如果你解构了 props 对象，解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。

如果你确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs() 和 toRef() 这两个工具函数：

{
  setup(props) {
    // 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)

    // 或者，将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
  }
}

18_composition/77_composition_setup_props.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>访问props</title>
</head>
<body>
  <div id="app">
    {{ count }} <button @click="count++">加1</button>
    <my-com :count="count"></my-com>
  </div>
</body>
<template id="com">
  <div>
    <h1>子组件</h1>
    {{ count }} -- {{ doubleCount }}
  </div>
</template>
<script src="../lib/vue.global.js"></script>
<script>
  const { createApp, ref, computed, toRef } = Vue

  const Com = {
    template: '#com',
    props: {
      count: Number
    },
    mounted () { // 在选项式API 可以借助this 访问父组件传递过来的数据
      console.log('test', this.count)
    },
    // 在组合式API中， 不能使用this，因为this指向了 Window
    setup (props) {
      // 如果想要访问到父组件传递给子组件的数据，需要通过 props 参数来访问
      console.log(props)

      // const doubleCount = props.count * 2 // ❌
      // const doubleCount = computed(() => props.count * 2) // ✅


      // 使用props内数据时，切记不要解构值，解构后 会丢失响应式
      // const { count } = props // 模版中的 doubleCount 始终为0，
      // const doubleCount = computed(() => count * 2) // ❌

      // toRef 可以保持响应式
      const count = toRef(props, 'count')
      const doubleCount = computed(() => count.value * 2) // ✅


      return {
        doubleCount
      }
    }
  }

  createApp({
    components: {
      MyCom: Com
    },
    setup () {
      const count = ref(0)

      return {
        count
      }
    }
  }).mount('#app')
</script>
</html>

2.3 Setup的上下文

传入 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值：

{
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)

    // 暴露公共属性（函数）
    console.log(context.expose)
  }
}

该上下文对象是非响应式的，可以安全地解构：

{
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

attrs 和 slots 都是有状态的对象，它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们，并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。此外还需注意，和 props 不同，attrs 和 slots 的属性都不是响应式的。如果你想要基于 attrs 或 slots 的改变来执行副作用，那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

expose 函数用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容

18_composition/78_composition_setup_context.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>setup上下文对象</title>
</head>
<body>
  <div id="app">
    <my-com ref="child" class="active" style="color: red" id="box" msg="hello msg" @my-event="getData">
      <template #header>
        <header>header</header>
      </template>
      <div>content</div>
      <template #footer>
        <footer>footer</footer>
      </template>
    </my-com>
  </div>
</body>
<template id="com">
  <div>
    <h1>子组件</h1>
    <button @click="sendData">发送数据</button>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
<script src="../lib/vue.global.js"></script>
<script>
  const { createApp, ref, onMounted } = Vue

  const Com = {
    template: '#com',
    setup (props, context) {
      // {class: 'active', style: {…}, id: 'box', msg: 'hello msg', onMyEvent: }
      console.log(context.attrs)
      // { header: fn, default: fn, footer: fn}
      console.log(context.slots)

      const sendData = () => {
        // 选项式API中 使用的是 this.$emit('my-event', 参数)
        context.emit('my-event', 1000)
      }

      const a = ref(1)
      const b = ref(2)
      const c = ref(3)

      const fn = () => {
        a.value = 100
      }

      context.expose({ // 父组件通过 ref 获取到子组件实例时，可以访问到的内容
        a, b, fn
      })

      return {
        sendData
      }
    }
  }

  createApp({
    components: {
      MyCom: Com
    },
    setup () {
      const getData = (val) => {
        console.log(val) // 1000
      }
      const child = ref() // child 就是模版中ref="child"
      onMounted(() => {
        console.log('child', child)
        console.log('a', child.value.a) // 1
        console.log('b', child.value.b) // 2
        child.value.fn()
        console.log('a', child.value.a) // 100
      })
      return {
        child,
        getData
      }
    }
  }).mount('#app')
</script>
</html>

在父组件通过ref获取子组件的实例的属性和方法的需求中，需要注意：

1.如果子组件是 选项式API组件，基本不需要做任何操作

2.如果子组件是 组合式API组件，需要通过 context.expose 暴露给父组件需要使用的属性和方法

3.如果父组件使用 选项式API, 可以通过 this.$refs.refName 访问到子组件想要你看到的属性和方法

4.如果父组件使用 组合式API,需要在setup中先创建 refName，然后再访问子组件想要你看到的属性和方法（const refName = ref() refName.value.X）

2.4 与渲染函数一起使用

setup 也可以返回一个渲染函数，此时在渲染函数中可以直接使用在同一作用域下声明的响应式状态：

{
  setup() {
    const count = ref(0)
    return () => h('div', count.value)
  }
}

返回一个渲染函数将会阻止我们返回其他东西。对于组件内部来说，这样没有问题，但如果我们想通过模板引用将这个组件的方法暴露给父组件，那就有问题

我们可以通过调用 expose() 解决这个问题：

{
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}

18_composition/79_composition_setup_render_function.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>渲染函数</title>
</head>
<body>
  <div id="app">
    <button @click='add'>加1</button>
    <my-com ref="child" ></my-com>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const { createApp, ref, onMounted, h } = Vue

  const Com = {
    setup (props, context) {
      const count = ref(0)

      const increment = () => {
        count.value += 1
      }

      context.expose({
        increment
      })

      return () => h('div', { class: 'box' }, count.value)
    }
  }

  createApp({
    components: {
      MyCom: Com
    },
    setup () {
      const child = ref()

      const add = () => {
        child.value.increment()
      }
      return {
        child,
        add
      }
    }
  }).mount('#app')
</script>
</html>

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

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

相关文章

【安卓学习笔记】Activity的生命周期和加载模式

【安卓学习笔记】Activity的生命周期和加载模式

Activity的生命周期 Activity是安卓应用的重要组成单元之一&#xff0c;其对于安卓的作用类似于Servlet对于Web应用的作用。 整个Activity生命周期的图解如下 具体的生命周期可以总结成如下几个步骤 onCreate()&#xff1a;Activity启动后第一个被调用的函数&#xff0c;常用…
阅读更多...
1819. 序列中不同最大公约数的数目

1819. 序列中不同最大公约数的数目

插&#xff1a; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家一起学习鸭~~~ 题目&#xff1a; 给你一个由正整数组成的数组 nums …
阅读更多...
四信5G工业路由器全面支持中国移动研究院5G专网质量探针，满足5G专网高质保障需求

四信5G工业路由器全面支持中国移动研究院5G专网质量探针，满足5G专网高质保障需求

面向工业4.0时代&#xff0c;5G行业应用也在不断拓展&#xff0c;大量的5G专网兴起&#xff0c;“一业带百业”效果显著&#xff0c;截至2022年9月&#xff0c;我国5G行业虚拟专网数量已超过1万张&#xff0c;5G已在全国200余家智慧矿山、1700余家智慧工厂、250余个智慧电网项目…
阅读更多...
SOFA Weekly｜铜锁探「密」、本周贡献 issue 精选

SOFA Weekly｜铜锁探「密」、本周贡献 issue 精选

SOFA WEEKLY | 每周精选 筛选每周精华问答&#xff0c;同步开源进展欢迎留言互动&#xff5e;SOFAStack&#xff08;Scalable Open Financial Architecture Stack&#xff09;是蚂蚁集团自主研发的金融级云原生架构&#xff0c;包含了构建金融级云原生架构所需的各个组件&#…
阅读更多...
Shiro【授权、整合Spirng、Shiro过滤器】

Shiro【授权、整合Spirng、Shiro过滤器】

前言 本文主要讲解的知识点有以下&#xff1a; Shiro授权的方式简单介绍与Spring整合初始Shiro过滤器 一、Shiro授权 上一篇我们已经讲解了Shiro的认证相关的知识了&#xff0c;现在我们来弄Shiro的授权 Shiro授权的流程和认证的流程其实是差不多的&#xff1a; 1.1Shiro支…
阅读更多...
React相关扩展二（Fragment、Content、useContext、组件优化、render props、错误边界）（十）

React相关扩展二（Fragment、Content、useContext、组件优化、render props、错误边界）（十）

系列文章目录 第一章&#xff1a;React基础知识&#xff08;React基本使用、JSX语法、React模块化与组件化&#xff09;&#xff08;一&#xff09; 第二章&#xff1a;React基础知识&#xff08;组件实例三大核心属性state、props、refs&#xff09;&#xff08;二&#xff0…
阅读更多...
本周推荐 | AB实验低响应情景解决实践

本周推荐 | AB实验低响应情景解决实践

推荐语&#xff1a;本文针对AB实验低响应情景下的增量效果不显著问题&#xff0c;提出通过倾向得分匹配方案来衡量策略增量效果的方法&#xff0c;并将相关方案融入一休平台科学评估体系中。文章理论与实践相结合&#xff0c;深入浅出&#xff0c;强烈推荐。——大淘宝技术数据…
阅读更多...
9个非常有趣的HTML5 Canvas动画特效合集

9个非常有趣的HTML5 Canvas动画特效合集

HTML5技术正在不断的发展和更新&#xff0c;越来越多的开发者也正在加入HTML5阵营&#xff0c;甚至在移动开发上HTML5的地位也是越来越重要了。HTML5中的大部分动画都是通过Canvas实现&#xff0c;因为Canvas就像一块画布&#xff0c;我们可以通过调用脚本在Canvas上绘制任意形…
阅读更多...
计算机视觉OpenCv学习系列：第一部分、绪论

计算机视觉OpenCv学习系列：第一部分、绪论

第一部分、绪论第一节、计算机视觉发展历程1.计算机视觉发展历史2.计算机视觉的主要任务3.计算机视觉的应用场景第二节、计算机视觉框架1.早期计算机视觉框架概述2.当前主流的框架与路线3.计算机视觉框架的未来趋势第三节、OpenCV框架1.OpenCV的发展历史2.OpenCV模块架构3.Open…
阅读更多...
深入理解Disruptor

深入理解Disruptor

Disruptor通过缓存行填充&#xff0c;利用CPU高速缓存&#xff0c;只是Disruptor“快”的一个因素&#xff0c;快的另一因素是“无锁”&#xff0c;尽可能发挥CPU本身的高速处理性能。 1 缓慢的锁 Disruptor作为一个高性能的生产者-消费者队列系统&#xff0c;核心就是通过Ri…
阅读更多...
面向对象的好处

面向对象的好处

提到面向对象的好处&#xff0c;一些人脑中可能会冒出&#xff1a;封装继承多态封装 封装&#xff1a;通过类&#xff0c;为数据和方法&#xff0c;提供统一的上下文 但是&#xff0c;函数名&#xff0c;同样也可以提供上下文&#xff0c;并且可以通过一种叫柯里化的技巧&…
阅读更多...
比特位计数[动态规划 || bitCount计数]

比特位计数[动态规划 || bitCount计数]

二进制计数前言一、二进制计数二、动态规划 & bitCount分治统计1、bitCount分治统计2、动态规划总结参考文献前言 二进制计数可以直接基于分治去快速统计&#xff0c;如果是连续数的二进制计数&#xff0c;可以利用前面已经计算出的状态进行递推求解&#xff0c;即动态规划…
阅读更多...
Python NumPy 连接数组

Python NumPy 连接数组

前言NumPy&#xff08;Numerical Python的缩写&#xff09;是一个开源的Python科学计算库。使用NumPy&#xff0c;就可以很自然地使用数组和矩阵。NumPy包含很多实用的数学函数&#xff0c;涵盖线性代数运算、傅里叶变换和随机数生成等功能。本文主要介绍Python NumPy 连接数组…
阅读更多...
使用Java为何总写出C风格的代码？

使用Java为何总写出C风格的代码？

“你看你所有代码都是把字段取出来计算&#xff0c;然后&#xff0c;再塞回去。各种不同层面的业务计算混在一起&#xff0c;将来有一点调整&#xff0c;所有代码都得跟着变。” 在实际的开发过程中&#xff0c;有不少人都这么写代码的。Java写的代码应该有Java的风格&#xf…
阅读更多...
Karl Guttag：Quest Pro透视效果差，并不适合商用

Karl Guttag：Quest Pro透视效果差，并不适合商用

AR/VR光学专家Karl Guttag曾指出&#xff0c;基于VST透视的AR虽然绕开了光学透视AR的一些局限&#xff0c;但VST透视依然存在运动延迟、余光视觉透视效果、分辨率、IPD不匹配等多种问题。的确&#xff0c;VST透视AR的结构、原理比光学透视AR更简单&#xff0c;但它同样需要解决…
阅读更多...
(二十)正则表达式

(二十)正则表达式

目录 前言: 1.概述: 2.正则表达式体验: 3.正则表达式字符 4.正则表达式在字符串方法中的使用 5.代码演示: 6.正则表达式支持爬取信息 7.代码演示: 前言: 正则表达式&#xff0c;又称规则表达式,&#xff08;Regular Expression&#xff0c;在代码中常简写为regex、regex…
阅读更多...
SpringCloud-Netflix学习笔记05——Eureka模拟实现简单集群

SpringCloud-Netflix学习笔记05——Eureka模拟实现简单集群

前言 对于Eureka注册中心来说&#xff0c;如果只有一个注册中心的话&#xff0c;如果注册中心崩了&#xff0c;那么里面的服务全部用不了&#xff0c;系统就会崩溃。为了避免这个问题&#xff0c;我们可以搭建一个注册中心的集群&#xff0c;几个注册中心互相关联&#xff0c;如…
阅读更多...
程序员别死背面试八股文了，这种面试题才是未来主流。。。

程序员别死背面试八股文了，这种面试题才是未来主流。。。

目录&#xff1a; 面试官为啥要出这样一个开放式问题生产消费模型及核心数据结构支撑TB级数据写入的分布式架构数据宕机场景下的高可用架构支持数据不丢失的ack机制最后的总结 1、面试官为啥要出这样一个开放式问题 这篇文章简单给大家来聊一个互联网大厂的Java面试题&#x…
阅读更多...
【Git 从入门到精通】一文摸透Git中的分支操作

【Git 从入门到精通】一文摸透Git中的分支操作

文章目录一、什么是分支&#xff1f;二、分支中的常用命令三、上手分支1.查看分支2.创建分支3.修改分支4.切换分支5.合并分支6.解决冲突四、分支操作原理分析一、什么是分支&#xff1f; 在版本控制过程中&#xff0c;同时推进多个任务&#xff0c;为每个任务&#xff0c;我们…
阅读更多...
肠道核心菌——戴阿利斯特杆菌属 （Dialister）

肠道核心菌——戴阿利斯特杆菌属 （Dialister）

谷禾健康 戴阿利斯特杆菌属 &#xff08;Dialister&#xff09; ✦ Dialister&#xff08;戴阿利斯特杆菌属&#xff09;是小的、厌氧或微需氧的革兰氏阴性球状或杆状菌&#xff0c;因次也被翻译成小杆菌属。 Dialister菌是人体肠道菌群中的一种常见菌种。该菌属物种被发现出现…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023