vue3-组合式API

news2024/9/22 6:47:15

​🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue3-组合式API

目录

组合式API

1.1 什么是组合式API

1.2 为什么使用它

1.2.1 更好的逻辑复用#

1.2.2更灵活的代码组织#

1.2.3 更好的类型推导#

1.2.4 更小的生产包体积#

1.3 第一个组合式API的例子

setup()函数

2.1 基本使用

2.2 访问 Prop

2.3 Setup的上下文

2.4 与渲染函数一起使用

组合式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 写成的。如果我们为相同的逻辑关注点标上一种颜色，那将会是这样：

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

而如果用组合式 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的例子

<!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">
    {{ count }}
    <button @click="add">加1</button>
    <button @click="count += 10">加10</button>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
​
   Vue.createApp({
     data () {
      return {
         count: 10
       }
     },
     methods: {
       add () {
        this.count++
       }
     }
   }).mount('#app')
​
  const { ref } = Vue
  Vue.createApp({
    setup () { // 组合式API的标识
​
      const count = ref(100)
      console.log(count.value)
      const add = () => {
        // ref 创建的状态，修改是需要借助它的value属性
        count.value = count.value + 1
      }
      return { // 返回页面模版中需要使用的数据 
        count,
        add
      }
    }
  }).mount('#app')
</script>
</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">
 {{ count }}
 <button @click="add">加1</button>
</div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
​
​
const { ref, onMounted, onUpdated } = Vue
 Vue.createApp({
  setup () { 
​
     const count = ref(0)
​
     const add = () => {
       count.value = count.value + 1
    }
​
     onMounted(() => {
       document.title = `点击了${count.value}次`
     })
​
    onUpdated(() => {
     document.title = `点击了${count.value}次`
    })
​
     return { 
       count,
      add
     }
   }
 }).mount('#app')
​
function useCount () {
 const count = ref(0)
​
 const add = () => {
   count.value = count.value + 1
 }
​
 return {
   count, add
 }
}
​
​
function useTitle (count) {
 onMounted(() => {
   document.title = `点击了${count.value}次`
 })
​
 onUpdated(() => {
   document.title = `点击了${count.value}次`
 })
}
Vue.createApp({
 setup () { 
​
   const { count, add } = useCount()
​
   useTitle(count)
​
   return { 
     count,
     add
   }
 }
}).mount('#app')
</script>
</html>

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 暴露的值，但反过来则不行。

<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">
    {{ count }}
    <button @click="add">加1</button>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const { ref, onMounted } = Vue
  Vue.createApp({
    setup () {
      const count = ref(0)
      const add = () => {
        count.value += 1
      }
      onMounted(() => {
        console.log(1111)
      })
      return {
        count,
        add
      }
    },
    data () {
      return {
        count: 10
      }
    },
    methods: {
      add () {
        this.count += 10
      }
    },
    mounted () {
      console.log('2222')
    }
  }).mount('#app')
</script>

生命周期先执行 组合式API 后执行选项式API，其余以组合式API为优先

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')
  }
}
<!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="num++">加1</button> {{ num }}
    <my-root :num="num"></my-root>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<template id="root">
<div>{{ num }} -- {{ test }}</div>
</template>
<script>
  const { ref, onMounted, computed } = Vue
​
  const Root = {
    props: ['num'],
    template: '#root',
    // setup (props) { // 千万不要对 props 解构
    //   console.log('111')
    //   return {
    //     test: computed(() => props.num) // 继续保持响应式
    //   }
    // }
    setup ({ num }) {
      console.log(num)
      return {
        test: computed(() => num) // 失去了响应式 - test的值不会发生改变
      }
    }
  }
  Vue.createApp({
    setup () {
      const num = ref(10000)
      return { num }
    },
    components: {
      MyRoot: Root
    }
  }).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 函数暴露出的内容

<!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="comref" class="myBox" style="color: red" id="box" msg="hello msg" @my-event="getData">
      <template #header>
        header
      </template>
      <div>content</div>
      <template #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) {
      // attrs 获取透传过来的值
      // slots 如果使用了插槽
      // emit  子组件给父组件传值
      // expose 子组件暴露给父组件可以调用的属性和方法  ---- options API  ref获取子组件的实例
​
      console.log(props)
      console.log(context.attrs) // ref 不在透传之列
      console.log(context.slots)
      const sendData = () => { // 子组件给父组件传值
        context.emit('my-event', 1000)
      }
​
      // 自定义的属性和方法，供给父组件使用
      const a = ref(1)
      const b = ref(2)
      const c = ref(3)
​
      const fn = () => {
        a.value = 100
      }
​
      // 暴露出去的是对象
      context.expose({
        a, b, fn
      })
​
      return {
        sendData
      }
    }
  }
​
  Vue.createApp({
    setup () {
      const getData = (val) => { // 接收子组件的值
        console.log('666', val)
      }
​
      const comref = ref() //  comref 就是模版中ref="comref"
​
      onMounted(() => {
        console.log('com', comref.value) // {}
        console.log('a', comref.value.a) // 1
        console.log('b', comref.value.b) // 2
        console.log('c', comref.value.c) // undefined 因为没有暴露
        comref.value.fn()
        console.log('a', comref.value.a) // 100
      })
​
      return {
        getData,
        comref
      }
    },
    components: {
      MyCom: Com
    }
  }).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)
  }
}
<!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-child ref="child"></my-child>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const { h, ref } = Vue
  const Child = {
    // 写法1:
    // template: `<div>child</div>`
    // 写法2:
    // render () {
    //   return [
    //     h('div', 'child!')
    //   ]
    // }
    // 写法3
    setup (props, { expose }) {
      const count = ref(10)
​
      const increment = () => {
        count.value += 1
      }
​
      expose({
        increment
      })
​
      // 返回一个函数  函数返回 渲染函数的结果
      return () => h('div', 'child!!' + count.value)
    }
  }
​
  Vue.createApp({
    components: {
      MyChild: Child
    },
    setup () {
      const child = ref()
​
      const add = () => {
        child.value.increment()
      }
​
      return {
        child,
        add
      }
    }
  }).mount('#app')
</script>
</html>

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

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

相关文章

AutoSAR CANIF层配置代码分析

AutoSAR CANIF层配置代码分析

CAN物理控制单元 配置&#xff1a; 生成的代码&#xff1a; CanIf_CtrlStates 解析 类型&#xff1a; typedef union CanIf_CtrlStatesUTag {CanIf_CtrlStatesType raw[3];CanIf_CtrlStatesStructSType str; }CanIf_CtrlStatesUType;typedef struct sCanIf_CtrlStatesType {C…
阅读更多...
Sublime Text：代码编辑器的卓越典范

Sublime Text：代码编辑器的卓越典范

Sublime Text是一款高效、强大且灵活的代码编辑器&#xff0c;在开发社区中广受欢迎。它不仅提供了丰富的功能&#xff0c;还具备美观的界面和卓越的性能&#xff0c;成为了众多开发者的首选工具。 Sublime Text的优点 高性能&#xff1a;Sublime Text具有极高的启动速度和响…
阅读更多...
软件测试入门很容易，但想要深造就还是要费功夫

软件测试入门很容易，但想要深造就还是要费功夫

现如今&#xff0c;越来越多的外行人员开始转战到软件测试岗位&#xff0c;而这也让许多不了解软件测试人疑惑“软件测试有那么好学吗&#xff1f;为什么都开始转行到软件测试呢&#xff1f;” 而关于这两个问题的答案&#xff0c;作者在以下为大家进行了讲解&#xff0c;希望…
阅读更多...
ts学习04-Es5中的类和静态方法 继承

ts学习04-Es5中的类和静态方法 继承

最简单的类 function Person() {this.name "张三";this.age 20; } var p new Person(); console.log(p.name);//张三构造函数和原型链里面增加方法 function Person(){this.name张三; /*属性*/this.age20;this.runfunction(){console.log(this.name在运动);} }…
阅读更多...
公网环境下使用VNC远程连接Ubuntu系统桌面

公网环境下使用VNC远程连接Ubuntu系统桌面

文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…
阅读更多...
ARCGIS网络分析

ARCGIS网络分析

一、实验名称&#xff1a; 网络分析 二、实验目的&#xff1a; 通过本实验练习&#xff0c;掌握空间数据网络分析的基本方法。 三、实验内容和要求&#xff1a; 实验内容&#xff1a; 利用ARCGIS软件网络分析工具及相关空间数据&#xff0c;查找距离“名人故居”、“博物…
阅读更多...
open3d ICP 配准

open3d ICP 配准

文章目录 Three common registration techniquesPoint-to-point techniquePoint-to-plane registration ICP registrationHelper visualization functionInputGlobal registrationExtract geometric featureInputRANSAC Point-to-point ICPPoint-to-plane ICP References Three…
阅读更多...
2023年Java核心技术大会（Core Java Week 2023）-核心PPT资料下载

2023年Java核心技术大会（Core Java Week 2023）-核心PPT资料下载

一、峰会简介 人工智能在22年、23年的再次爆发让Python成为编程语言里最大的赢家&#xff1b;云原生的持续普及令Go、Rust等新生的语言有了进一步叫板传统技术体系的资本与底气。我们必须承认在近几年里&#xff0c;Java阵营的确受到了前所未有的挑战&#xff0c;出现了更多更…
阅读更多...
解决 Python requests 库中 SSL 错误转换为 Timeouts 问题

解决 Python requests 库中 SSL 错误转换为 Timeouts 问题

解决 Python requests 库中 SSL 错误转换为 Timeouts 问题&#xff1a;理解和处理 SSL 错误的关键 在使用Python的requests库进行HTTPS请求时&#xff0c;可能会遇到SSL错误&#xff0c;这些错误包括但不限于证书不匹配、SSL层出现问题等。如果在requests库中设置verifyFalse&…
阅读更多...
RAID技术复习笔记

RAID技术复习笔记

Raid&#xff08;Redundant Array of independent Disks&#xff09;独立磁盘冗余阵列&#xff1a;磁盘阵列 Raid 分为:软raid、硬raid、软硬混合三种。 软Raid&#xff1a;所有的功能均有操作系统和CPU来完成&#xff0c;没有独立的raid控制、处理芯片和IO处理处理芯片。 硬R…
阅读更多...
5.1异常处理

5.1异常处理

5.1异常处理 1. 什么是异常2. 异常分类2.1 Error2.2 Exception 3. 异常处理3.1 try-catch-finally终止finally执行的方法return关键字在异常处理的作用 1. 什么是异常 2. 异常分类 2.1 Error 2.2 Exception 2.2.1 非检查异常 2.2.2 检查异常 3. 异常处理 3.1 try-catch-fina…
阅读更多...
R语言：利用biomod2进行生态位建模

R语言：利用biomod2进行生态位建模

在这里主要是分享一个不错的代码&#xff0c;喜欢的可以慢慢研究。我看了一遍&#xff0c;觉得里面有很多有意思的东西&#xff0c;供大家学习和参考。 利用PCA轴总结的70个环境变量&#xff0c;利用biomod2进行生态位建模&#xff1a; #------------------------------------…
阅读更多...
旋极携手西班牙SoC-e公司，为中国客户提供高效可靠TSN通讯解决方案

旋极携手西班牙SoC-e公司，为中国客户提供高效可靠TSN通讯解决方案

2023年2月&#xff0c;旋极信息与西班牙SoC-e公司正式签订战略合作协议&#xff0c;成为其在中国区重要合作伙伴。 SoC-e是一家世界领先的基于FPGA技术的以太网通讯解决方案供应商&#xff0c;是一系列IP核开发领域的先锋&#xff0c;为关键任务实施网络化、同步性和安全性提供…
阅读更多...
2023年【高处安装、维护、拆除】模拟考试题及高处安装、维护、拆除模拟考试题库

2023年【高处安装、维护、拆除】模拟考试题及高处安装、维护、拆除模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年【高处安装、维护、拆除】模拟考试题及高处安装、维护、拆除模拟考试题库&#xff0c;包含高处安装、维护、拆除模拟考试题答案和解析及高处安装、维护、拆除模拟考试题库练习。安全生产模拟考试一点通结合国家…
阅读更多...
客户管理系统大盘点！推荐这五款

客户管理系统大盘点！推荐这五款

客户管理系统大盘点&#xff01;推荐这五款。 客户管理系统也就是CRM&#xff0c;可以说是企业刚需&#xff0c;国内外的客户管理系统也是数不胜数&#xff0c;到底有哪些是真正好用&#xff0c;值得推荐的呢&#xff1f;本文将为大家推荐这5款好用的客户管理系统&#xff1a;…
阅读更多...
nvm：轻松管理多个 Node 版本 | 开源日报 No.80

nvm：轻松管理多个 Node 版本 | 开源日报 No.80

nvm-sh/nvm Stars: 67.6k License: MIT Node Version Manager&#xff0c;是一个 POSIX 兼容的 bash 脚本&#xff0c;用于管理多个活动 node.js 版本。nvm 可以让你通过命令行快速安装和使用不同版本的 Node。它可以在任何符合 POSIX 标准的 shell&#xff08;sh、dash、ksh…
阅读更多...
城市生命线丨市政综合管廊监测系统的效果

城市生命线丨市政综合管廊监测系统的效果

市政综合管廊&#xff0c;又被称为城市生命线&#xff0c;是我们在地下建造的一个智慧而高效的空间。它把市政、电力、通讯、燃气、给排水等各种管线集于一体&#xff0c;解决了城市中反复开挖路面、架空线网密集、管线事故频发等问题&#xff0c;为城市运行提供了重要的基础设…
阅读更多...
python_面向对象中的特殊成员

python_面向对象中的特殊成员

一、几个常见的特殊成员 # 都只是语法&#xff0c;无特殊意义 class Foo(object):def __init__(self,a1,a2):self.a1 a1self.a2 a2def __call__(self,*args,**kwargs):print(11111,args,kwargs)return 123def __getitem__(self, item):print(item)return 8def __setitem__(s…
阅读更多...
DGL创建异构图

DGL创建异构图

利用DGL创建具有3种节点类型和3种边类型的异构图 graph_data {# (src_type, edge_type, dst_type)(drug, interacts, drug): (th.tensor([0, 1]), th.tensor([1, 2])),(drug, interacts,, disease): (th.tensor([1]), th.tensor([2])) }g dgl.heterograph(graph_data)上述代…
阅读更多...
C编译环境和预处理（非常详细，建议收藏）

C编译环境和预处理（非常详细，建议收藏）

C编译环境和预处理&#xff08;非常详细&#xff0c;建议收藏&#xff09; 一、程序的翻译环境和执行环境二、 详解编译链接2.1 翻译环境2.2 编译本身的几个阶段符号汇总、符号表、合并段表、符号表的合并和重定位分别是什么&#xff1f; 2.2 运行环境 三、预处理详解3.1 预定义…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023