vue3 中的响应式设计原理

news2024/9/23 15:26:44

Vue 3 中的响应式原理可谓是非常之重要，通过学习 Vue3 的响应式原理，不仅能让我们学习到 Vue.js 的一些设计模式和思想，还能帮助我们提高项目开发效率和代码调试能力。

一、Vue 3 响应式使用

1. Vue 3 中的使用

当我们在学习 Vue 3 的时候，可以通过一个简单示例，看看什么是 Vue 3 中的响应式：

<!-- HTML 内容 -->
<div id="app">
    <div>Price: {{price}}</div>
    <div>Total: {{price * quantity}}</div>
    <div>getTotal: {{getTotal}}</div>
</div>
const app = Vue.createApp({ // ① 创建 APP 实例
    data() {
        return {
            price: 10,
            quantity: 2
        }
    },
    computed: {
        getTotal() {
            return this.price * this.quantity * 1.1
        }
    }
})
app.mount('#app')  // ② 挂载 APP 实例

通过创建 APP 实例和挂载 APP 实例即可，这时可以看到页面中分别显示对应数值： 

当我们修改 price 或 quantity 值的时候，页面上引用它们的地方，内容也能正常展示变化后的结果。这时，我们会好奇为何数据发生变化后，相关的数据也会跟着变化，那么我们接着往下看。

2. 实现单个值的响应式

在普通 JS 代码执行中，并不会有响应式变化，比如在控制台执行下面代码：

const app = Vue.createApp({ // ① 创建 APP 实例
    data() {
        return {
            price: 10,
            quantity: 2
        }
    },
    computed: {
        getTotal() {
            return this.price * this.quantity * 1.1
        }
    }
})
app.mount('#app')  // ② 挂载 APP 实例

从这可以看出，在修改 price 变量的值后， total 的值并没有发生改变。

那么如何修改上面代码，让 total 能够自动更新呢？我们其实可以将修改 total 值的方法保存起来，等到与 total 值相关的变量（如 price 或 quantity 变量的值）发生变化时，触发该方法，更新 total 即可。我们可以这么实现：

let price = 10, quantity = 2, total = 0;
const dep = new Set(); // ① 
const effect = () => { total = price * quantity };
const track = () => { dep.add(effect) };  // ②
const trigger = () => { dep.forEach( effect => effect() )};  // ③

track();
console.log(`total: ${total}`); // total: 0
trigger();
console.log(`total: ${total}`); // total: 20
price = 20;
trigger();
console.log(`total: ${total}`); // total: 40

上面代码通过 3 个步骤，实现对 total 数据进行响应式变化：

① 初始化一个 Set 类型的 dep 变量，用来存放需要执行的副作用（ effect 函数），这边是修改 total 值的方法；

② 创建 track() 函数，用来将需要执行的副作用保存到 dep 变量中（也称收集副作用）；

③ 创建 trigger() 函数，用来执行 dep 变量中的所有副作用；

在每次修改 price 或 quantity 后，调用 trigger() 函数执行所有副作用后， total 值将自动更新为最新值。 

（图片来源：Vue Mastery）

3. 实现单个对象的响应式

通常，我们的对象具有多个属性，并且每个属性都需要自己的 dep。我们如何存储这些？比如：

let product = { price: 10, quantity: 2 };

从前面介绍我们知道，我们将所有副作用保存在一个 Set 集合中，而该集合不会有重复项，这里我们引入一个 Map 类型集合（即 depsMap ），其 key 为对象的属性（如： price 属性）， value 为前面保存副作用的 Set 集合（如： dep 对象），大致结构如下图：

（图片来源：Vue Mastery）

实现代码：

let product = { price: 10, quantity: 2 }, total = 0;
const depsMap = new Map(); // ① 
const effect = () => { total = product.price * product.quantity };
const track = key => {     // ②
  let dep = depsMap.get(key);
  if(!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  dep.add(effect);
}

const trigger = key => {  // ③
  let dep = depsMap.get(key);
  if(dep) {
    dep.forEach( effect => effect() );
  }
};

track('price');
console.log(`total: ${total}`); // total: 0
effect();
console.log(`total: ${total}`); // total: 20
product.price = 20;
trigger('price');
console.log(`total: ${total}`); // total: 40

上面代码通过 3 个步骤，实现对 total 数据进行响应式变化：

① 初始化一个 Map 类型的 depsMap 变量，用来保存每个需要响应式变化的对象属性（key 为对象的属性， value 为前面 Set 集合）；

② 创建 track() 函数，用来将需要执行的副作用保存到 depsMap 变量中对应的对象属性下（也称收集副作用）；

③ 创建 trigger() 函数，用来执行 dep 变量中指定对象属性的所有副作用；

这样就实现监听对象的响应式变化，在 product 对象中的属性值发生变化， total 值也会跟着更新。

4. 实现多个对象的响应式

如果我们有多个响应式数据，比如同时需要观察对象 a 和对象 b 的数据，那么又要如何跟踪每个响应变化的对象？

这里我们引入一个 WeakMap 类型的对象，将需要观察的对象作为 key ，值为前面用来保存对象属性的 Map 变量。代码如下：

let product = { price: 10, quantity: 2 }, total = 0;
const targetMap = new WeakMap();     // ① 初始化 targetMap，保存观察对象
const effect = () => { total = product.price * product.quantity };
const track = (target, key) => {     // ② 收集依赖
  let depsMap = targetMap.get(target);
  if(!depsMap){
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key);
  if(!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  dep.add(effect);
}

const trigger = (target, key) => {  // ③ 执行指定对象的指定属性的所有副作用
  const depsMap = targetMap.get(target);
  if(!depsMap) return;
    let dep = depsMap.get(key);
  if(dep) {
    dep.forEach( effect => effect() );
  }
};

track(product, 'price');
console.log(`total: ${total}`); // total: 0
effect();
console.log(`total: ${total}`); // total: 20
product.price = 20;
trigger(product, 'price');
console.log(`total: ${total}`); // total: 40

上面代码通过 3 个步骤，实现对 total 数据进行响应式变化：

① 初始化一个 WeakMap 类型的 targetMap 变量，用来要观察每个响应式对象；

② 创建 track() 函数，用来将需要执行的副作用保存到指定对象（ target ）的依赖中（也称收集副作用）；

③ 创建 trigger() 函数，用来执行指定对象（ target ）中指定属性（ key ）的所有副作用；

这样就实现监听对象的响应式变化，在 product 对象中的属性值发生变化， total 值也会跟着更新。

大致流程如下图：

 （图片来源：Vue Mastery）

二、Proxy 和 Reflect

在上一节内容中，介绍了如何在数据发生变化后，自动更新数据，但存在的问题是，每次需要手动通过触发 track() 函数搜集依赖，通过 trigger() 函数执行所有副作用，达到数据更新目的。

这一节将来解决这个问题，实现这两个函数自动调用。

1. 如何实现自动操作

这里我们引入 JS 对象访问器的概念，解决办法如下：

  • 在读取（GET 操作）数据时，自动执行 track() 函数自动收集依赖；
  • 在修改（SET 操作）数据时，自动执行 trigger() 函数执行所有副作用；

那么如何拦截 GET 和 SET 操作？接下来看看 Vue2 和 Vue3 是如何实现的：

  • 在 Vue2 中，使用 ES5 的 Object.defineProperty() 函数实现；
  • 在 Vue3 中，使用 ES6 的 Proxy 和 Reflect API 实现；

需要注意的是：Vue3 使用的 Proxy 和 Reflect API 并不支持 IE。

Object.defineProperty() 函数这边就不多做介绍，可以阅读文档，下文将主要介绍 Proxy 和 Reflect API。

2. 如何使用 Reflect

通常我们有三种方法读取一个对象的属性：

  1. 使用 . 操作符：leo.name ；
  2. 使用 [] ： leo['name'] ；
  3. 使用 Reflect API： Reflect.get(leo, 'name') 。

这三种方式输出结果相同。

3. 如何使用 Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。语法如下：

const p = new Proxy(target, handler)

参数如下：

  • target : 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
  • handler : 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

我们通过官方文档，体验一下 Proxy API：

let product = { price: 10, quantity: 2 };
let proxiedProduct = new Proxy(product, {
    get(target, key){
      console.log('正在读取的数据：',key);
    return target[key];
  }
})
console.log(proxiedProduct.price); 
// 正在读取的数据： price
// 10

这样就保证我们每次在读取 proxiedProduct.price 都会执行到其中代理的 get 处理函数。其过程如下：

（图片来源：Vue Mastery）

然后结合 Reflect 使用，只需修改 get 函数：

    get(target, key, receiver){
      console.log('正在读取的数据：',key);
    return Reflect.get(target, key, receiver);
  }

输出结果还是一样。

接下来增加 set 函数，来拦截对象的修改操作：

let product = { price: 10, quantity: 2 };
let proxiedProduct = new Proxy(product, {
  get(target, key, receiver){
    console.log('正在读取的数据：',key);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver){
    console.log('正在修改的数据：', key, ',值为：', value);
    return Reflect.set(target, key, value, receiver);
  }
})
proxiedProduct.price = 20;
console.log(proxiedProduct.price); 
// 正在修改的数据： price ,值为： 20
// 正在读取的数据： price
// 20

这样便完成 get 和 set 函数来拦截对象的读取和修改的操作。为了方便对比 Vue 3 源码，我们将上面代码抽象一层，使它看起来更像 Vue3 源码：

function reactive(target){
  const handler = {  // ① 封装统一处理函数对象
    get(target, key, receiver){
      console.log('正在读取的数据：',key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver){
      console.log('正在修改的数据：', key, ',值为：', value);
      return Reflect.set(target, key, value, receiver);
    }
  }
  
  return new Proxy(target, handler); // ② 统一调用 Proxy API
}

let product = reactive({price: 10, quantity: 2}); // ③ 将对象转换为响应式对象
product.price = 20;
console.log(product.price); 
// 正在修改的数据： price ,值为： 20
// 正在读取的数据： price
// 20

这样输出结果仍然不变。

4. 修改 track 和 trigger 函数

通过上面代码，我们已经实现一个简单 reactive() 函数，用来将普通对象转换为响应式对象。但是还缺少自动执行 track() 函数和 trigger() 函数，接下来修改上面代码：

const targetMap = new WeakMap();
let total = 0;
const effect = () => { total = product.price * product.quantity };
const track = (target, key) => { 
  let depsMap = targetMap.get(target);
  if(!depsMap){
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key);
  if(!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  dep.add(effect);
}

const trigger = (target, key) => {
  const depsMap = targetMap.get(target);
  if(!depsMap) return;
    let dep = depsMap.get(key);
  if(dep) {
    dep.forEach( effect => effect() );
  }
};

const reactive = (target) => {
  const handler = {
    get(target, key, receiver){
      console.log('正在读取的数据：',key);
      const result = Reflect.get(target, key, receiver);
      track(target, key);  // 自动调用 track 方法收集依赖
      return result;
    },
    set(target, key, value, receiver){
      console.log('正在修改的数据：', key, ',值为：', value);
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if(oldValue != result){
         trigger(target, key);  // 自动调用 trigger 方法执行依赖
      }
      return result;
    }
  }
  
  return new Proxy(target, handler);
}

let product = reactive({price: 10, quantity: 2}); 
effect();
console.log(total); 
product.price = 20;
console.log(total); 
// 正在读取的数据： price
// 正在读取的数据： quantity
// 20
// 正在修改的数据： price ,值为： 20
// 正在读取的数据： price
// 正在读取的数据： quantity
// 40

（图片来源：Vue Mastery）

三、activeEffect 和 ref

在上一节代码中，还存在一个问题： track 函数中的依赖（ effect 函数）是外部定义的，当依赖发生变化， track 函数收集依赖时都要手动修改其依赖的方法名。

比如现在的依赖为 foo 函数，就要修改 track 函数的逻辑，可能是这样：

const foo = () => { /**/ };
const track = (target, key) => {     // ②
  // ...
  dep.add(foo);
}

那么如何解决这个问题呢？

1. 引入 activeEffect 变量

接下来引入 activeEffect 变量，来保存当前运行的 effect 函数。

const foo = () => { /**/ };
const track = (target, key) => {     // ②
  // ...
  dep.add(foo);
}

然后在 track 函数中将 activeEffect 变量作为依赖：

const track = (target, key) => {
    if (activeEffect) {  // 1. 判断当前是否有 activeEffect
        let depsMap = targetMap.get(target);
        if (!depsMap) {
            targetMap.set(target, (depsMap = new Map()));
        }
        let dep = depsMap.get(key);
        if (!dep) {
            depsMap.set(key, (dep = new Set()));
        }
        dep.add(activeEffect);  // 2. 添加 activeEffect 依赖
    }
}

使用方式修改为：

effect(() => {
    total = product.price * product.quantity
});

这样就可以解决手动修改依赖的问题，这也是 Vue3 解决该问题的方法。完善一下测试代码后，如下：

const targetMap = new WeakMap();
let activeEffect = null; // 引入 activeEffect 变量

const effect = eff => {
  activeEffect = eff; // 1. 将副作用赋值给 activeEffect
  activeEffect();     // 2. 执行 activeEffect
  activeEffect = null;// 3. 重置 activeEffect
}

const track = (target, key) => {
    if (activeEffect) {  // 1. 判断当前是否有 activeEffect
        let depsMap = targetMap.get(target);
        if (!depsMap) {
            targetMap.set(target, (depsMap = new Map()));
        }
        let dep = depsMap.get(key);
        if (!dep) {
            depsMap.set(key, (dep = new Set()));
        }
        dep.add(activeEffect);  // 2. 添加 activeEffect 依赖
    }
}

const trigger = (target, key) => {
    const depsMap = targetMap.get(target);
    if (!depsMap) return;
    let dep = depsMap.get(key);
    if (dep) {
        dep.forEach(effect => effect());
    }
};

const reactive = (target) => {
    const handler = {
        get(target, key, receiver) {
            const result = Reflect.get(target, key, receiver);
            track(target, key);
            return result;
        },
        set(target, key, value, receiver) {
            const oldValue = target[key];
            const result = Reflect.set(target, key, value, receiver);
            if (oldValue != result) {
                trigger(target, key);
            }
            return result;
        }
    }

    return new Proxy(target, handler);
}

let product = reactive({ price: 10, quantity: 2 });
let total = 0, salePrice = 0;
// 修改 effect 使用方式，将副作用作为参数传给 effect 方法
effect(() => {
    total = product.price * product.quantity
});
effect(() => {
    salePrice = product.price * 0.9
});
console.log(total, salePrice);  // 20 9
product.quantity = 5;
console.log(total, salePrice);  // 50 9
product.price = 20;
console.log(total, salePrice);  // 100 18

思考一下，如果把第一个 effect 函数中 product.price 换成 salePrice 会如何：

effect(() => {
    total = salePrice * product.quantity
});
effect(() => {
    salePrice = product.price * 0.9
});
console.log(total, salePrice);  // 0 9
product.quantity = 5;
console.log(total, salePrice);  // 45 9
product.price = 20;
console.log(total, salePrice);  // 45 18

得到的结果完全不同，因为 salePrice 并不是响应式变化，而是需要调用第二个 effect 函数才会变化，也就是 product.price 变量值发生变化。

代码地址： vue-3-reactivity/05-activeEffect.js at master · Code-Pop/vue-3-reactivity · GitHub

2. 引入 ref 方法

熟悉 Vue3 Composition API 的朋友可能会想到 Ref，它接收一个值，并返回一个响应式可变的 Ref 对象，其值可以通过 value 属性获取。

ref：接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。

官网的使用示例如下：

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

我们有 2 种方法实现 ref 函数：

  1. 使用 rective 函数
const ref = intialValue => reactive({value: intialValue});

这样是可以的，虽然 Vue3 不是这么实现。

  1. 使用对象的属性访问器（计算属性）

属性方式去包括：getter 和 setter。

const ref = raw => {
  const r = {
    get value(){
      track(r, 'value');
      return raw;
    },
    
    set value(newVal){
    	raw = newVal;
      trigger(r, 'value');
    }
  }
  return r;
}

使用方式如下：

let product = reactive({ price: 10, quantity: 2 });
let total = 0, salePrice = ref(0);
effect(() => {
    salePrice.value = product.price * 0.9
});
effect(() => {
    total = salePrice.value * product.quantity
});
console.log(total, salePrice.value); // 18 9
product.quantity = 5;
console.log(total, salePrice.value); // 45 9
product.price = 20;
console.log(total, salePrice.value); // 90 18

在 Vue3 中 ref 实现的核心也是如此。

代码地址： vue-3-reactivity/06-ref.js at master · Code-Pop/vue-3-reactivity · GitHub

四、实现简易 Computed 方法

用过 Vue 的同学可能会好奇，上面的 salePrice 和 total 变量为什么不使用 computed 方法呢？

没错，这个可以的，接下来一起实现个简单的 computed 方法。

const computed = getter => {
    let result = ref();
    effect(() => result.value = getter());
    return result;
}

let product = reactive({ price: 10, quantity: 2 });
let salePrice = computed(() => {
    return product.price * 0.9;
})
let total = computed(() => {
    return salePrice.value * product.quantity;
})

console.log(total.value, salePrice.value);
product.quantity = 5;
console.log(total.value, salePrice.value);
product.price = 20;
console.log(total.value, salePrice.value);

这里我们将一个函数作为参数传入 computed 方法，computed 方法内通过 ref 方法构建一个 ref 对象，然后通过 effct 方法，将 getter 方法返回值作为 computed 方法的返回值。

这样我们实现了个简单的 computed 方法，执行效果和前面一样。

五、源码学习建议

1. 构建 reactivity.cjs.js

这一节介绍如何去从 Vue 3 仓库打包一个 Reactivity 包来学习和使用。

准备流程如下：

  1. 从 Vue 3 仓库下载最新 Vue3 源码；
git clone https://github.com/vuejs/vue-next.git
  1. 安装依赖：
yarn install
  1. 构建 Reactivity 代码：
yarn build reactivity
  1. 复制 reactivity.cjs.js 到你的学习 demo 目录：

上一步构建完的内容，会保存在 packages/reactivity/dist目录下，我们只要在自己的学习 demo 中引入该目录的 reactivity.cjs.js 文件即可。

  1. 学习 demo 中引入：
const { reactive, computed, effect } = require("./reactivity.cjs.js");

2. Vue3 Reactivity 文件目录

在源码的 packages/reactivity/src目录下，有以下几个主要文件：

  1. effect.ts：用来定义 effect / track / trigger ；
  2. baseHandlers.ts：定义 Proxy 处理器（ get 和 set）；
  3. reactive.ts：定义 reactive 方法并创建 ES6 Proxy；
  4. ref.ts：定义 reactive 的 ref 使用的对象访问器；
  5. computed.ts：定义计算属性的方法；

（图片来源：Vue Mastery）

六、总结

本文带大家从头开始学习如何实现简单版 Vue 3 响应式，实现了 Vue3 Reactivity 中的核心方法（ effect / track / trigger / computed /ref 等方法），提高项目开发效率和代码调试能力。

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

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

相关文章

51单片机——动态数码管实验，小白讲解，相互学习

51单片机——动态数码管实验，小白讲解，相互学习

多位数码管介绍&#xff1a; 多位数码管&#xff0c;即两个或两个以上单个数码管并列集中在一起形成一体的数码管。当多位一体时&#xff0c;他们内部的公共端是独立的&#xff0c;二负责显示什么数字的段线&#xff08;a-dp&#xff09;全部是连接在一起的&#xff0c;独立的公…
阅读更多...
中国水文地质图集

中国水文地质图集

概述 水文地质图集部分来源于 《中华人民共和国水文地质图集》（地质出版社1979年版）的GIS数字化版（数据格式：JPEG），图集是由全国性、地区性和分省/自治区/直辖市等三类图幅组成，共68幅图（实际收集到55幅图）。 主要内容包括：水文地质图、地下热水分布图、水化学图、…
阅读更多...
数据结构C语言版 —— 栈的实现

数据结构C语言版 —— 栈的实现

文章目录栈1. 基本概念2. 栈的实现1) 初始化栈2) 栈的扩容3) 判断栈是否为空4) 入栈5) 出栈6) 获取栈顶元素7) 获取栈中元素个数8) 销毁栈栈 1. 基本概念 栈(Stack)&#xff1a;一种特殊的线性表&#xff0c;其只限定于在表尾进行插入或者删除操作。进行数据插入和删除操作的…
阅读更多...
RocketMq02_复制刷盘、Broker常用模式、磁盘阵列、集群搭建

RocketMq02_复制刷盘、Broker常用模式、磁盘阵列、集群搭建

文章目录①. 单机版本安装与启动②. 控制台的安装与启动③. 复制刷盘、Broker集群模式④. 磁盘阵列 - RAID⑤.JBOD、RAID0⑥. RAID1、RAID10、01⑦. 搭建集群 - 异步两主两从①. 单机版本安装与启动 ①. 系统要求是64位的,JDK要求是1.8及其以上版本的 ②. 将下载的安装包上传到…
阅读更多...
NFT及智能合约开发

NFT及智能合约开发

文章目录1.Web3.01.1 GameFi1.2 DeFi1.3 dApp2.NFT2.1 NFT Applications2.2 NFT Earning2.3 NFT结构2.3 IPFS2.4 Wallet3.Smart Contract3.1 Smart Contract System3.2 Smart Contract Development3.2.1 Language3.2.2 IDE3.2.3 BlockChain3.2.4 FrontEnd3.2.5 NFT Test WebSit…
阅读更多...
《Mysql是怎样运行的》

《Mysql是怎样运行的》

客户端查询mysql版本&#xff1a;select version(); 1 第1章 装作自己是个小白-重新认识MySQL 1.1 MySQL的客户端&#xff0f;服务器架构每个进程都有一个唯一的编号&#xff0c;称为 进程ID &#xff0c;英文名叫 PID &#xff0c;这个编号是在我们启动程序的时候由操作系统随…
阅读更多...
IDEA运行SpringBoot项目常见问题【统一答疑】

IDEA运行SpringBoot项目常见问题【统一答疑】

【辰兮要努力】&#xff1a;hello你好我是辰兮&#xff0c;很高兴你能来阅读&#xff0c;昵称是希望自己能不断精进&#xff0c;向着优秀程序员前行&#xff01; 博客来源于项目以及编程中遇到的问题总结&#xff0c;偶尔会有读书分享&#xff0c;我会陆续更新Java前端、后台、…
阅读更多...
PRISEMI芯导科技推出PDG7115直驱型E-Mode氮化镓功率IC

PRISEMI芯导科技推出PDG7115直驱型E-Mode氮化镓功率IC

PRISEMI芯导科技推出PDG7115直驱型E-Mode氮化镓功率IC 氮化镓以开关速度快&#xff0c;导阻低&#xff0c;低输入输出电荷的优势&#xff0c;应用在快充上逐渐取代了传统的高压硅MOS管。使用氮化镓取代硅MOS管&#xff0c;不仅降低了开关损耗&#xff0c;提高充电器的转换效率…
阅读更多...
SpringBoot RabbitMq 六大模式

SpringBoot RabbitMq 六大模式

目录 依赖、配置 简单队列 模型 代码示例 工作队列 模型 代码示例 订阅模式 模型 代码示例 路由模式 模型 代码示例 主题模式 模型 代码示例 RPC 依赖、配置 依赖&#xff1a; <dependency> <groupId>org.springframework.boot</groupId&g…
阅读更多...
三分查找算法

三分查找算法

目录 一 算法简介 详细介绍 两种基本方法 二 算法实践 1&#xff09;实数三分 拓展&#xff1a;秦九韶算法计算多项式 方法1&#xff1a;直接模拟累加 方法二&#xff1a;根据秦九韶算法 1&#xff09;模板三分法 题目描述 解法 2&#xff09;三分求极值 题目描述 …
阅读更多...
3D激光里程计其四：点云线面特征提取

3D激光里程计其四：点云线面特征提取

3D激光里程计其四&#xff1a;点云线面特征提取1. 点云线面特征提取1.1 按线数分割1.2 计算曲率1.3 按曲率大小筛选特征点2. 基于线面特征的位姿变化2.1 帧间关联2.1.1 点云位姿转换2.1.2 线特征关联2.1.3 面特征关联2.2 残差函数2.2.1 线特征2.2.2 面特征2.3 位姿优化2.3.1 线…
阅读更多...
数据结构——二叉树2.0

数据结构——二叉树2.0

✅<1>主页&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;数据结构——二叉树 &#x1f525;<3>创作者&#xff1a;我的代码爱吃辣 ☂️<4>开发环境&#xff1a;Visual Studio 2022 &#x1f4ac;<5>前言&#xff1a;上期讲了…
阅读更多...
尚医通-医院接口设置（七）

尚医通-医院接口设置（七）

&#xff08;1&#xff09;后台系统-医院设置接口-需求和准备 &#xff08;2&#xff09;后台系统-医院设置接口-创建基础类 &#xff08;3&#xff09;医院设置接口-查询和逻辑删除 &#xff08;4&#xff09;医院的设置接口-统一返回结果定义 &#xff08;5&#xff09;医…
阅读更多...
[附源码]Python计算机毕业设计Django校园代取快递系统

[附源码]Python计算机毕业设计Django校园代取快递系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
知到/智慧树——大学生心理健康（华东政法大学）参考答案

知到/智慧树——大学生心理健康（华东政法大学）参考答案

目录 注&#xff1a;有些图片上传异常&#xff0c;请以参考答案为准&#xff0c;不要以蓝色选项为全部答案。 第一章测试 第二章测试 第三章测试 第四章测试 第五章测试 第六章测试 第七章测试 第八章测试 第九章测试 第十章测试 第十一章测试 第十二章测试 第一章…
阅读更多...
传统技术如何阻碍零信任以及如何应对

传统技术如何阻碍零信任以及如何应对

随着组织采用零信任安全模型&#xff0c;传统技术制造了一些障碍。事实上&#xff0c;根据最近的一项研究&#xff0c;更换或重建现有的遗留基础设施是实施零信任的最大挑战。 通用动力公司的 2022 年零信任研究报告对美国联邦、民事和国防机构的 300 名 IT 和项目经理进行了调…
阅读更多...
计算机毕设Python+Vue兴澜幼儿园管理系统（程序+LW+部署）

计算机毕设Python+Vue兴澜幼儿园管理系统（程序+LW+部署）

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
重定向和缓冲区

重定向和缓冲区

文章目录一个奇怪的现象缓冲区详解如何理解缓冲区缓冲区是谁给我提供的&#xff1f;缓冲区的源码体现案例&#xff1a;模拟实现FILE结构体第二个奇怪的现象重定向命令行上使用重定向操作dup2系统调用接口stdout和stderror一个奇怪的现象 首先&#xff0c;我们来看这样一段代码…
阅读更多...
毕业设计 - 基于Java的聊天室系统设计与实现【源码+论文】

毕业设计 - 基于Java的聊天室系统设计与实现【源码+论文】

文章目录前言一、项目设计1. 模块设计服务器模块设计客户端模块设计2. 实现效果二、部分源码项目源码前言 今天学长向大家分享一个 java 设计项目: 基于Java聊天室系统的设计与实现 一、项目设计 1. 模块设计 服务器模块设计 服务端的功能主要如下&#xff1a; 一&#xf…
阅读更多...
R语言绘制森林图

R语言绘制森林图

在绘制森林图之前当然需要先下载RStudio软件啦&#xff0c;在下载后需要安装对应的rtool,最后将两者关联起来才能使用其中对应的包&#xff0c;否则只安装了软件很多功能不能使用而且还会报错&#xff0c;这篇文章主要是总结怎么使用forestploter包绘制森林图&#xff0c;本来是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023