Vue关键知识点

watch侦听器

Vue.js 中的侦听器（Watcher）是 Vue提供的一种响应式系统的核心机制之一。
监听数据的变化，并在数据发生变化时执行相应的回调函数。
目的:数据变化能够自动更新到视图中

原理：

Vue 的侦听器通过观察对象的属性，并在属性值发生变化时触发回调函数来实现。在 Vue 内部，侦听器通过使用 JavaScript 对象的 Object.defineProperty 方法来实现对数据的监听，从而在数据发生变化时能够及时地通知相关的观察者（Watcher），进而更新视图。

功能：

  • 监听数据变化： 侦听器能够监听数据的变化，包括数据的添加、修改、删除等操作。
  • 执行回调函数： 当数据发生变化时，侦听器会执行事先注册的回调函数，从而触发相应的操作。

用法：

在 Vue 组件中，你可以使用侦听器来监视数据的变化，并执行相应的操作。你可以在 watch 选项中定义侦听器，也可以直接使用 $watch 方法来创建侦听器。

通过 watch 选项：
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newValue, oldValue) {
      console.log('Count changed from', oldValue, 'to', newValue);
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>
通过 $watch 方法：
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  mounted() {
    this.$watch('count', (newValue, oldValue) => {
      console.log('Count changed from', oldValue, 'to', newValue);
    });
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

优缺点：

优点：
  • 响应式更新： 侦听器能够实现数据的响应式更新，当数据发生变化时，相关的视图会自动更新。
  • 灵活性： 侦听器的使用非常灵活，你可以在任何地方监听任何数据的变化，并执行相应的操作。
缺点：
  • 性能消耗： 对大量数据进行监听可能会导致性能下降，因为每个被监听的数据都会创建一个侦听器，消耗一定的内存和 CPU 资源。
  • 复杂性： 当应用变得复杂时，过多的侦听器可能会导致代码难以维护和理解。

以下是一个简化的流程图来展示 Vue.js 中侦听器的底层原理：

+---------------------+
|     数据对象         |
|    (Data Object)    |
+----------+----------+
           |
           v
+----------+----------+
|   Observer 监听器     |
|    (Observer)        |
+----------+----------+
           |
           v
+----------+----------+
|   Watcher 侦听器      |
|    (Watcher)         |
+----------+----------+
           |
           v
+----------+----------+
|       更新视图       |
|    (Update View)     |
+---------------------+

在这个流程图中，有以下几个关键组件：

  1. 数据对象（Data Object）： 这是 Vue.js 中的数据对象，可以是一个 Vue 实例的数据对象，也可以是 Vue 组件中的数据对象。数据对象中的数据发生变化时，需要通知到相关的侦听器。

  2. Observer 监听器（Observer）： Observer 监听器负责监听数据对象中数据的变化。它通过递归遍历数据对象中的所有属性，并对每个属性使用 Object.defineProperty 方法添加 getter 和 setter，从而实现对数据的监控。

  3. Watcher 侦听器（Watcher）： Watcher 侦听器是 Vue.js 中的侦听器组件，负责订阅数据对象中的某个属性，并在该属性的值发生变化时执行回调函数。每个 Watcher 侦听器都与一个表达式相关联，当表达式的值发生变化时，Watcher 侦听器会得到通知，并执行相应的回调函数。

  4. 更新视图（Update View）： 更新视图是指当数据对象的某个属性发生变化时，需要更新对应的视图内容。这通常包括重新渲染组件或更新页面中的某个 DOM 元素。

具体流程如下：

  1. 当数据对象中的某个属性发生变化时，Observer 监听器会检测到变化，并通知相关的 Watcher 侦听器。

  2. Watcher 侦听器接收到变化通知后，会执行事先注册的回调函数。这个回调函数可以是更新视图的操作，也可以是其他需要在数据变化时执行的操作。

  3. 更新视图操作会根据具体情况执行，比如重新渲染组件或更新页面中的某个 DOM 元素，以反映数据变化后的最新状态。

数据变化能够自动更新到视图中

在 Vue 3 中，watch 函数用于监听响应式数据的变化，并在数据发生变化时执行回调函数。下面详细说明 watch 函数的原理、参数及其含义，以及返回结果：

原理

watch 函数的原理是通过创建一个响应式的 watcher（观察者），来监听数据的变化。当被监听的数据发生变化时，watcher 将会执行注册的回调函数。

参数及其含义

watch 函数接受三个参数：

  1. 要监听的数据（可选）： 这是一个可以是响应式数据对象、ref 对象、reactive 对象或计算属性等。当该数据发生变化时，触发监听器执行回调函数。

  2. 回调函数（必需）： 这是当被监听的数据发生变化时需要执行的函数。回调函数接受两个参数：新值（newValue）和旧值（oldValue），分别表示数据变化后的值和变化前的值。

  3. 选项对象（可选）： 这是一个可选的选项对象，用于配置监听器的行为。常见的选项包括：

    • deep：是否深度监听对象内部值的变化，默认为 false。
    • immediate：是否在初始化时立即执行回调函数，默认为 false。
    • flush：指定 watcher 的触发时机，默认为 'pre'，可选的值有 'pre'（在 DOM 更新之前触发）和 'post'（在 DOM 更新之后触发）。
    • 等等其他选项，可以根据具体需求进行配置。

返回结果

watch 函数的返回结果是一个取消监听的函数，可以通过调用该函数来停止对数据的监听。如果要停止监听多个数据，可以将返回的函数保存在变量中，然后在需要取消监听时调用它。

示例

下面是一个示例，演示了如何使用 watch 函数：

import { ref, watch } from 'vue';

const count = ref(0);

// 监听 count 的变化
const stopWatch = watch(count, (newValue, oldValue) => {
  console.log('Count changed from', oldValue, 'to', newValue);
}, {
  immediate: true,
  deep: true
});

// 修改 count 的值
count.value = 1; // 输出: "Count changed from 0 to 1"

// 停止监听 count 的变化
stopWatch();

在这个示例中，我们使用 watch 函数监听了 count 的变化，当 count 的值发生变化时，会执行回调函数并打印变化前后的值。同时，我们在选项中设置了 immediate: true，表示在初始化时立即执行回调函数。最后，我们调用返回的函数 stopWatch 来停止对 count 的监听。

reactive, ref响应式

reactive 函数是 Vue 3 中用于创建响应式对象的函数之一。它的作用是将普通的 JavaScript
对象转换为响应式对象，使得对象的属性可以被 Vue 追踪，并在属性发生变化时触发相应的更新。

原理

reactive 函数的原理是通过Proxy 对象来实现的。它会包装传入的普通对象，创建一个代理对象，这个代理对象拦截了对原对象属性的访问、赋值、删除等操作，在这些操作发生时，会通知相关的依赖进行更新。

参数

reactive 函数接受一个普通的 JavaScript 对象作为参数，将其转换为响应式对象。

返回值

reactive 函数的返回值是一个代理对象，这个代理对象拦截了对原对象属性的访问、赋值、删除等操作。

示例

下面是一个使用 reactive 函数创建响应式对象的示例：

import { reactive } from 'vue';

const obj = {
  count: 0
};

// 使用 reactive 函数将普通对象转换为响应式对象
const reactiveObj = reactive(obj);

// 修改响应式对象的属性
reactiveObj.count++; // 响应式地更新了 count 属性

console.log(reactiveObj.count); // 输出: 1

在这个示例中，首先定义了一个普通的 JavaScript 对象 obj，然后使用 reactive 函数将其转换为响应式对象 reactiveObj。接着，我们通过修改 reactiveObj 的属性 count，并在控制台输出结果，可以看到 count 的值被成功更新为 1，这说明 reactive 函数成功地创建了一个响应式对象，并实现了对属性的监听和更新。

ref 函数是 Vue 3 中用于创建响应式引用的函数之一。它的作用是将普通的 JavaScript 值转换为响应式对象，使得这个值可以被 Vue 追踪，并在值发生变化时触发相应的更新。下面是关于 ref 函数的详细说明：

原理

ref 函数的原理是通过一个封装了传入值的响应式对象来实现的。它返回的对象具有一个 value 属性，这个 value
属性存储着传入的值，并且这个对象上的 value 属性是响应式的，当这个属性的值发生变化时，相关的依赖会被触发更新。

参数

ref 函数接受一个普通的 JavaScript 值作为参数，将其转换为响应式引用。

返回值

ref 函数的返回值是一个包含 value 属性的对象，这个 value 属性存储着传入的值，并且是响应式的。

示例

下面是一个使用 ref 函数创建响应式引用的示例：

import { ref } from 'vue';

// 使用 ref 函数创建响应式引用
const count = ref(0);

// 修改响应式引用的值
count.value++; // 响应式地更新了值

console.log(count.value); // 输出: 1

在这个示例中，我们使用 ref 函数创建了一个响应式引用 count，并初始化其值为 0。然后，我们通过修改 count.value 的值，触发了响应式更新，并在控制台输出结果，可以看到 count.value 的值被成功更新为 1，这说明 ref 函数成功地创建了一个响应式引用，并实现了对值的监听和更新。

对比

reactive 和 ref 是 Vue 3 中常用的两种创建响应式数据的方式，它们各自有着不同的优缺点，适用于不同的场景：

reactive 的优缺点：

优点：
  1. 适用于复杂对象： reactive 可以将整个对象转换为响应式对象，适用于对复杂对象进行监听和更新。
  2. 自动深度响应式： reactive 会递归地将对象的所有属性转换为响应式，因此在嵌套对象中也能实现深度响应式。
  3. 直观性： 在处理对象时，reactive 更符合直觉，因为可以直接操作对象的属性。
缺点：
  1. 性能开销较大： 对于大型对象或嵌套层级较深的对象，reactive 的性能开销较大，因为它需要递归地追踪所有属性的变化。
  2. 不适合基本类型： reactive 更适用于对象类型，对于基本类型的数据并不是最佳选择。

ref 的优缺点：

优点：
  1. 性能优化： ref 只会追踪基本类型数据或简单对象的变化，因此性能开销相对较小。
  2. 直接访问值： 使用 ref 创建的对象，直接访问值更加方便，不需要通过 .value 来获取值。
  3. 更灵活： 可以在需要时将普通的 JavaScript 值转换为响应式值，非常灵活。
缺点：
  1. 不支持深度监听： ref 不支持深度监听，只能追踪其 value 属性的变化，对于嵌套对象的监听需要额外处理。
  2. 不适用于复杂对象： 对于复杂的对象结构，ref 并不直观，也不方便进行监听和更新。

总结：

  • 如果需要监听复杂对象或嵌套对象的变化，并且不在意性能开销，可以选择使用 reactive。
  • 如果需要更轻量级的响应式数据，并且关注性能优化，可以选择使用 ref。
  • 在实际开发中，根据具体的需求和场景来选择合适的响应式方式，有时也会同时使用 reactive 和 ref 来达到最佳效果。

计算属性computed

计算属性声明成一个方法, 实际是这个方法的返回值
computed 函数是 Vue.js
中一个非常重要的概念，它用于声明计算属性。计算属性是基于响应式依赖进行缓存的，只有在依赖发生变化时才会重新计算。

原理：

  1. 依赖追踪： 当组件渲染时，Vue 会执行 computed 函数，并在执行过程中访问所依赖的响应式属性或其他计算属性。Vue 会在内部追踪这些依赖关系。

  2. 缓存计算结果： Vue 会将计算属性的结果缓存起来，只有当其依赖发生变化时才会重新计算。这样可以确保在多次访问同一个计算属性时，只进行一次计算，提高性能。

  3. 响应式更新： 如果计算属性依赖的响应式属性发生变化，Vue 会自动重新计算计算属性的值，并触发相应的更新操作，确保视图与数据保持同步。

参数及含义：

computed 函数接收一个对象作为参数，对象的每个键值对都表示一个计算属性的定义，其中：

  • 键（key）： 计算属性的名称。
  • 值（value）： 计算属性的定义，可以是一个函数或包含 get 和 set 方法的对象。

如果值是一个函数，则该函数会被当作计算属性的 getter 方法。如果需要设置计算属性的值，可以通过定义 set 方法来实现。

返回结果：

计算属性的返回结果是根据其定义的 getter 函数或 get 方法计算得出的值。这个值会被缓存起来，并在其依赖发生变化时更新。计算属性的返回结果可以直接在模板中使用，就像普通的属性一样。

总的来说，computed 函数的原理是基于响应式依赖进行缓存的，参数包括计算属性的名称和定义，返回结果是根据定义计算得出的值。通过计算属性，我们可以方便地定义复杂的逻辑，并确保在需要时进行自动更新。

假设我们有一个 Vue 组件，其中包含一个计算属性来计算商品的总价，计算属性依赖于商品的价格和数量。下面是一个基本的示例代码：

<template>
  <div>
    <h2>商品信息</h2>
    <p>商品名称：{{ productName }}</p>
    <p>单价：{{ price }}</p>
    <p>数量：<input type="number" v-model="quantity"></p>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productName: '手机',
      price: 1000, // 单价
      quantity: 1, // 数量
    };
  },
  computed: {
    // 计算商品总价
    totalPrice() {
      return this.price * this.quantity;
    },
  },
};
</script>

在上面的示例中，我们定义了一个 totalPrice 计算属性，它通过 price 和 quantity 计算出商品的总价。当 price 或 quantity 发生变化时，totalPrice 会自动重新计算，并更新到视图中。

这个示例展示了 computed 函数的使用方式：定义一个计算属性，然后通过 getter 方法来计算属性的值。在模板中，我们可以直接使用计算属性的名称来获取其值，而不需要手动调用计算方法。

这样，Vue 会在内部自动追踪依赖关系，并确保在依赖发生变化时，及时更新计算属性的值。这种方式能够简化代码，并提高性能。

Vite

简单的类比，Vite相当于Maven或者Vue Cli可以快速的生成一个项目脚手架，并引入部分基础依赖

Vite（法语意为 “快速的”，发音 /vit/，发音同
“veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 是一个基于 Rollup 和浏览器原生 ES 模块支持的快速开发服务器，用于构建现代 Web 应用。它提供了一组命令行工具来帮助你初始化、开发、构建和测试你的项目。以下是 Vite 的常用命令及其参数、含义和作用：

1. vite init

  • 参数：

    • <app-name>：要创建的项目名称。
    • --template <template-name>：指定项目模板，默认为 vue，可选的模板有 vue、vue-ts、react、react-ts、preact、lit-element、svelte、vanilla。
    • --force：强制在非空目录中创建项目。

  • 含义： 初始化一个新的 Vite 项目。

2. vite dev

  • 参数：

    • 无

  • 含义： 启动开发服务器，用于开发模式下的实时预览和热模块替换。

3. vite build

  • 参数：

    • --base <path>：指定构建输出的基础路径，默认为 /。
    • --outDir <dir>：指定构建输出的目录，默认为 dist。
    • --assetsDir <dir>：指定构建输出的静态资源目录，默认为 _assets。
    • --assetsInlineLimit <num>：指定是否将小于指定大小的静态资源内联，默认为 4096 字节。
    • --sourcemap：是否生成 source map，默认为 false。

  • 含义： 打包生产环境的项目代码，生成优化过的静态资源文件。

4. vite serve

  • 参数：

    • 无

  • 含义： 启动生产服务器，用于在本地预览生产环境构建的应用。

5. vite preview

  • 参数：

    • 无

  • 含义： 在生产环境下预览应用。

6. vite inspect

  • 参数：

    • 无

  • 含义： 查看 Vite 配置的内部信息。

7. vite optimize

  • 参数：

    • 无

  • 含义： 优化项目的构建输出。

这些是 Vite 常用的命令及其参数、含义和作用。通过这些命令，你可以方便地进行项目初始化、开发、构建和测试。

Vite项目

Vite 项目通常具有以下目录结构：
在这里插入图片描述

my-vite-project/
├── node_modules/     # 依赖的 Node.js 模块
├── public/           # 公共静态资源
│   ├── favicon.ico   # 网站图标
├── src/              # 项目源代码
│   ├── assets/       # 静态资源文件（图片、字体等）
│   ├── components/   # 组件文件
│   ├── App.vue       # 根组件
│   └── main.js       # 项目入口文件
|—— index.html        # 入口html文件
├── .gitignore        # Git 忽略文件配置
├── package.json      # 项目配置文件
├── vite.config.js    # Vite 配置文件
└── README.md         # 项目说明文档

下面是各部分的作用：

  1. node_modules/：存放项目依赖的 Node.js 模块，通常使用 npm 或者 Yarn 等包管理工具进行安装。

  2. public/：存放公共静态资源文件，如网站图标（favicon.ico）。这里的内容会被直接复制到最终构建的输出目录中。

  3. src/：存放项目的源代码文件。

    • assets/：存放静态资源文件，如图片、字体等。
    • components/：存放 Vue 组件文件。
    • App.vue：根组件，是整个 Vue 应用的入口组件。
    • main.js：项目的入口文件，用于初始化 Vue 应用，并挂载根组件到 DOM 中。

  4. .gitignore：Git 忽略文件配置，指定哪些文件或目录不应纳入版本控制。

  5. package.json：项目配置文件，包含项目的元数据（如名称、版本号、作者等）以及项目依赖的 Node.js 模块列表。

  6. vite.config.js：Vite 的配置文件，用于配置构建、开发服务器等选项。

  7. README.md：项目说明文档，通常包含项目的简要介绍、使用方法、贡献指南等信息。

Vite 项目是如何运行起来的呢？

  1. 当执行 vite dev 命令时，Vite 会读取项目中的 vite.config.js 文件，并根据配置启动开发服务器。

  2. 开发服务器会监听文件变化，当文件发生变化时，会重新构建相关的模块，并通过浏览器的热模块替换功能实时更新页面。

  3. 当执行 vite build 命令时，Vite 会读取项目中的 vite.config.js 文件，并根据配置进行项目的打包构建。

  4. 构建完成后，Vite 会生成优化过的静态资源文件，并将其输出到指定的输出目录中，供部署到生产环境使用。

通过以上步骤，Vite 项目就可以成功运行起来，并且可以在开发和生产环境中高效地构建和运行。

运行流程

npm run dev之后，vite会依据main.js中的逻辑，执行一系列初始化操作，最终会将各种组件渲染到index.html页面上

自定义组件

在企业级项目中，不再以视图作为单元，而是组件
需要将操作，数据和视图都封装成一个组件，可以在项目的其他地方调用

全局注册组件

组件需要先注册才能够使用
通过全家注册，就能在任意位置使用组件了
要在 Vue.js 中全局注册组件，你可以在项目的入口文件（通常是 main.js）或者在一个单独的文件中注册组件，然后在入口文件中引入这个文件。

以下是在入口文件中全局注册组件的示例：

// main.js

import Vue from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue'; // 引入要注册的组件

Vue.component('my-component', MyComponent); // 全局注册组件，可以使用 <my-component> 标签

new Vue({
  render: h => h(App),
}).$mount('#app');

在上面的例子中，我们先引入了要注册的组件 MyComponent.vue，然后使用 Vue.component 方法将其全局注册为 my-component 组件。这样在整个应用中就可以直接使用 <my-component> 标签来引用这个组件了。

另外，如果你希望在单独的文件中注册组件，可以按照以下步骤进行：

  1. 创建一个新的文件，比如 globalComponents.js。

  2. 在这个文件中注册组件并导出：

    // globalComponents.js

import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';

Vue.component('my-component', MyComponent);

  3. 在入口文件中引入这个文件即可：

    // main.js

import Vue from 'vue';
import App from './App.vue';
import './globalComponents'; // 引入全局组件注册文件

new Vue({
  render: h => h(App),
}).$mount('#app');

这样就可以在 Vue.js 中全局注册组件了。

props

将组件类比成方法，那么props就是传入方法的参数
在 Vue.js 中，props 是用于父组件向子组件传递数据的一种机制。它允许父组件通过属性的形式向子组件传递数据，子组件可以接收并在其内部使用这些数据。以下是关于 props 的详细说明：

原理

当父组件向子组件传递数据时，可以通过在子组件的标签上使用属性的形式传递数据。子组件通过在自己的选项中定义 props 属性，来接收传递过来的数据。

作用

  • 在父子组件之间传递数据。
  • 实现组件的可复用性，使得组件可以接受不同的数据，从而达到灵活配置的目的。

使用方法

  1. 在子组件中通过 props 属性定义接收的数据：

    // ChildComponent.vue

<script>
export default {
  props: {
    message: String, // 接收一个名为 message 的 String 类型的 prop
    count: {
      type: Number, // 接收一个名为 count 的 Number 类型的 prop
      default: 0, // 默认值为 0
    },
    items: { // 接收一个名为 items 的 Array 类型的 prop
      type: Array,
      required: true, // 必传 prop
    },
  },
  // 组件逻辑...
}
</script>

  2. 在父组件中通过子组件的标签属性传递数据：

    <!-- ParentComponent.vue -->

<template>
  <div>
    <child-component :message="parentMessage" :count="parentCount" :items="parentItems" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent',
      parentCount: 10,
      parentItems: ['item1', 'item2', 'item3'],
    };
  },
};
</script>

代码示例

下面是一个简单的例子，演示了如何在父组件中向子组件传递数据：

<!-- ParentComponent.vue -->

<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent',
    };
  },
};
</script>

<!-- ChildComponent.vue -->

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>

在这个例子中，父组件 ParentComponent 中定义了一个 parentMessage 数据，并通过 child-component 标签的 message 属性向子组件传递了这个数据。子组件 ChildComponent 中通过 props 接收并使用了这个数据，最终渲染到页面上。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

正排索引 vs 倒排索引 - 搜索引擎具体原理

正排索引 vs 倒排索引 - 搜索引擎具体原理

阅读导航 一、正排索引1. 概念2. 实例 二、倒排索引1. 概念2. 实例 三、正排 VS 倒排1. 正排索引优缺点2. 倒排索引优缺点3. 应用场景 三、搜索引擎原理1. 宏观原理2. 具体原理 一、正排索引 1. 概念 正排索引是一种索引机制&#xff0c;它将文档或数据记录按照某种特定的顺序…
阅读更多...
分布式锁实战

分布式锁实战

4、分布式锁 4.1 、基本原理和实现方式对比 分布式锁&#xff1a;满足分布式系统或集群模式下多进程可见并且互斥的锁。 分布式锁的核心思想就是让大家都使用同一把锁&#xff0c;只要大家使用的是同一把锁&#xff0c;那么我们就能锁住线程&#xff0c;不让线程进行&#x…
阅读更多...
【鲜货】企业数据治理的首要一步：数据溯源

【鲜货】企业数据治理的首要一步：数据溯源

目录 背景 一、数据探索溯源的定义 二、数据探索溯源的重要性 1、提高数据质量 2、增强数据信任度 3、促进数据合规性 三、数据溯源的主要方法 1、标注法 2、反向查询法 3、双向指针追踪法 四、数据探索溯源的主要步骤 1、确定溯源目标 2、收集元数据 3、分析数据…
阅读更多...
微信小程序uniapp+vue.js旅游攻略系统9krxx

微信小程序uniapp+vue.js旅游攻略系统9krxx

实现了一个完整的旅游攻略小程序系统&#xff0c;其中主要有用户模块、用户表模块、token表模块、收藏表模块、视频信息模块、视频类型模块、景点资讯模块、门票购买模块、旅游攻略模块、景点信息模块、论坛表模块、视频信息评论表模块、旅游攻略评论表模块、景点信息评论表模块…
阅读更多...
噪声的力量：重新定义 RAG 系统的检索

噪声的力量：重新定义 RAG 系统的检索

该文得到了一个反常识的结论&#xff0c;当无关的噪声文档放在正确的位置时&#xff0c;实际上有助于提高RAG的准确性。 摘要 检索增强生成&#xff08;RAG&#xff09;系统代表了传统大语言模型&#xff08;大语言模型&#xff09;的显着进步。 RAG系统通过整合通过信息检索…
阅读更多...
CSS基础：插入CSS样式的3种方法

CSS基础：插入CSS样式的3种方法

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生&#xff0c;2年时间从1800到月入过万&#xff0c;工作5年买房。 分享成长心得。 262篇原创内容-公众号 后台回复“前端工具”可获取开发工具&#xff0c;持续更新中 后台回复“前端基础…
阅读更多...
【UnityRPG游戏制作】Unity_RPG项目之界面面板分离和搭建

【UnityRPG游戏制作】Unity_RPG项目之界面面板分离和搭建

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…
阅读更多...
2_5.Linux存储的基本管理

2_5.Linux存储的基本管理

实验环境&#xff1a; 系统里添加两块硬盘 ##1.设备识别## 设备接入系统后都是以文件的形式存在 设备文件名称&#xff1a; SATA/SAS/USB /dev/sda,/dev/sdb ##s SATA, dDISK a第几块 IDE /dev/hd0,/dev/hd1 ##h hard VIRTIO-BLOCK /de…
阅读更多...
stm32开发之threadx使用记录(主逻辑分析)

stm32开发之threadx使用记录(主逻辑分析)

前言 threadx的相关参考资料 论坛资料、微软官网本次使用的开发板为普中科技–麒麟&#xff0c;核心芯片为 stm32f497zgt6开发工具选择的是stm32cubemx(代码生成工具)clion(代码编写工具)编译构建环境选择的是arm-none-gcc编译 本次项目结构 CMakeList对应的配置 set(CMAKE_…
阅读更多...
Seata（分布式事务集成测试和总结）

Seata（分布式事务集成测试和总结）

文章目录 1.集成测试1.集成测试正常下单1.步骤2.浏览器访问 http://localhost:10008/order/save?userId666&productId1&nums1&money1003.注意事项和细节 2.集成测试模拟异常1.步骤1.com/sun/springcloud/controller/StorageController.java 休眠12s&#xff0c;模…
阅读更多...
虚拟机打不开

虚拟机打不开

问题 另一个程序已锁定文件的一部分&#xff0c;进程无法访问 打不开磁盘“G:\centeros\hadoop104kl\hadoop100-cl2.vmdk”或它所依赖的某个快照磁盘。 模块“Disk”启动失败。 未能启动虚拟机。 原因 前一次非正常关闭虚拟机导致.lck 文件是VMWare软件的一种磁盘锁文件&…
阅读更多...
线性数据结构

线性数据结构

1.数组 数组使用一块连续的内存来存储元素&#xff0c;并且元素的类型都是相同的。可以通过索引来访问。 2.链表 链表由一系列节点组成&#xff0c;每个节点包含两部分&#xff1a;数据部分和指针部分。数据部分用于存储元素的值&#xff0c;指针部分则指向下一个节点。没有使…
阅读更多...
机器学习 - multi-class 数据集训练 (含代码)

机器学习 - multi-class 数据集训练 (含代码)

直接上代码 # Multi-class datasetimport numpy as np RANDOM_SEED 42 np.random.seed(RANDOM_SEED) N 100 # number of points per class D 2 # dimensionality K 3 # number of classes X np.zeros((N*K, D)) y np.zeros(N*K, dtypeuint8) for j in range(K):ix rang…
阅读更多...
多线程的入门（二）线程实现与初步使用

多线程的入门（二）线程实现与初步使用

1.实现Runable接口 实现Runable接口&#xff0c;实现run方法&#xff1b; 这种方式创建的线程实现类执行时需要创建Thread实例去运行该任务 示例如下&#xff1a; package com.example.springbootdamo.Thread;import org.apache.logging.log4j.LogManager; import org.apach…
阅读更多...
三子棋游戏----C语言版【超级详细 + 视频演示 + 完整源码】

三子棋游戏----C语言版【超级详细 + 视频演示 + 完整源码】

㊙️小明博客主页&#xff1a;➡️ 敲键盘的小明 ㊙️ ✅关注小明了解更多知识☝️ 文章目录 前言一、三子棋的实现思路二、三子棋的实现步骤2.1 先显示游戏的菜单2.2 游戏的具体实现2.2.1 棋盘的初始化2.2.2 展示棋盘2.2.3 下棋&#x1f534;玩家下棋&#x1f534;电脑下棋2.2…
阅读更多...
二叉树进阶——手撕二叉搜索树

二叉树进阶——手撕二叉搜索树

troop主页&#xff1a;troop 手撕二叉搜索树 1.二叉搜索树的定义2.实现&#xff08;非递归&#xff09;补充结构2.1查找2.2插入2.3删除&#xff08;重要&#xff09;情况1(无孩子&&一个孩子&#xff09; 3.二叉搜索树的应用3.1K模型3.2KV模型3.2.1KV模型的实现 总结二叉…
阅读更多...
RUST语言值所有权之内存复制与移动

RUST语言值所有权之内存复制与移动

1.RUST中每个值都有一个所有者,每次只能有一个所有者 String::from函数会为字符串hello分配一块内存 内存示例如下: 在内存分配前调用s1正常输出 在分配s1给s2后调用报错 因为s1分配给s2后,s1的指向自动失效 s1被move到s2 s1自动释放 字符串克隆使用
阅读更多...
I2C驱动实验：读取AP3216C设备中寄存器的数据

I2C驱动实验：读取AP3216C设备中寄存器的数据

一. 简介 经过前面几篇文章的学习&#xff0c;已经完成了I2C驱动框架&#xff0c;字符设备驱动框架&#xff0c;编写了 读写 I2C设备中寄存器的数据的代码&#xff0c;文章如下&#xff1a; I2C驱动实验&#xff1a;实现读/写I2C设备寄存器的函数-CSDN博客 本文在此基础上&a…
阅读更多...
C#开发中一些常用的工具类分享

C#开发中一些常用的工具类分享

一、配置文件读写类 用于在开发时候C#操作配置文件读写信息 1、工具类 ReadIni 代码 using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices; using System.Text; using System.Threading.Tasks;namesp…
阅读更多...
不同设备使用同一个Git账号

不同设备使用同一个Git账号

想要在公司和家里的电脑上用同一个git账号来pull, push代码 1. 查看原设备的用户名和邮箱 第1种方法&#xff0c; 依次输入 git config user.name git config user.email第2种方法&#xff0c; 输入 cat ~/.gitconfig2. 配置新设备的用户名和邮箱 用户名和邮箱与原设备保持…
阅读更多...
最新文章

Copyright @ 2022~2023