【Vue2.0源码学习】实例方法篇-数据相关方法

news2024/9/23 7:24:33

文章目录

    • 0. 前言
    • 1. vm.$watch
      • 1.1 用法回顾
      • 1.2 内部原理
    • 2. vm.$set
      • 2.1 用法回顾
      • 2.2 内部原理
    • 3. vm.$delete
      • 3.1 用法回顾
      • 3.2 内部原理

0. 前言

与数据相关的实例方法有 3 个，分别是vm.$set、vm.$delete和vm.$watch。它们是在stateMixin函数中挂载到Vue原型上的，代码如下：

import { set, del } from "../observer/index";

export function stateMixin(Vue) {
  Vue.prototype.$set = set;
  Vue.prototype.$delete = del;
  Vue.prototype.$watch = function(expOrFn, cb, options) {};
}

当执行stateMixin函数后，会向Vue原型上挂载上述 3 个实例方法。

接下来，我们就来分析这 3 个与数据相关的实例方法其内部的原理都是怎样的。

1. vm.$watch

1.1 用法回顾

在介绍方法的内部原理之前，我们先根据官方文档示例回顾一下它的用法。

vm.$watch(expOrFn, callback, [options]);

  • 参数：

    • {string | Function} expOrFn

    • {Function | Object} callback

    • {Object} [options]
      • {boolean} deep
      • {boolean} immediate

  • 返回值：{Function} unwatch

  • 用法：

    观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

    注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

  • 示例：

    // 键路径
vm.$watch("a.b.c", function(newVal, oldVal) {
  // 做点什么
});

// 函数
vm.$watch(
  function() {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b;
  },
  function(newVal, oldVal) {
    // 做点什么
  }
);

    vm.$watch 返回一个取消观察函数，用来停止触发回调：

    var unwatch = vm.$watch("a", cb);
// 之后取消观察
unwatch();

  • 选项：deep

    为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

    vm.$watch("someObject", callback, {
  deep: true
});
vm.someObject.nestedValue = 123;
// callback is fired

  • 选项：immediate

    在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

    vm.$watch("a", callback, {
  immediate: true
});
// 立即以 `a` 的当前值触发回调

    注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。

    // 这会导致报错
var unwatch = vm.$watch(
  "value",
  function() {
    doSomething();
    unwatch();
  },
  { immediate: true }
);

    如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：

    var unwatch = vm.$watch(
  "value",
  function() {
    doSomething();
    if (unwatch) {
      unwatch();
    }
  },
  { immediate: true }
);

1.2 内部原理

$watch的定义位于源码的src/core/instance/state.js中，如下：

Vue.prototype.$watch = function(expOrFn, cb, options) {
  const vm: Component = this;
  if (isPlainObject(cb)) {
    return createWatcher(vm, expOrFn, cb, options);
  }
  options = options || {};
  options.user = true;
  const watcher = new Watcher(vm, expOrFn, cb, options);
  if (options.immediate) {
    cb.call(vm, watcher.value);
  }
  return function unwatchFn() {
    watcher.teardown();
  };
};

可以看到，$watch方法的代码并不多，逻辑也不是很复杂。

在函数内部，首先判断传入的回调函数是否为一个对象，就像下面这种形式：

vm.$watch("a.b.c", {
  handler: function(val, oldVal) {
    /* ... */
  },
  deep: true
});

如果传入的回调函数是个对象，那就表明用户是把第二个参数回调函数cb和第三个参数选项options合起来传入的，此时调用createWatcher函数，该函数定义如下：

function createWatcher(vm, expOrFn, handler, options) {
  if (isPlainObject(handler)) {
    options = handler;
    handler = handler.handler;
  }
  if (typeof handler === "string") {
    handler = vm[handler];
  }
  return vm.$watch(expOrFn, handler, options);
}

可以看到，该函数内部其实就是从用户合起来传入的对象中把回调函数cb和参数options剥离出来，然后再以常规的方式调用$watch方法并将剥离出来的参数穿进去。

接着获取到用户传入的options，如果用户没有传入则将其赋值为一个默认空对象，如下：

options = options || {};

$watch方法内部会创建一个watcher实例，由于该实例是用户手动调用$watch方法创建而来的，所以给options添加user属性并赋值为true，用于区分用户创建的watcher实例和Vue内部创建的watcher实例，如下：

options.user = true;

接着，传入参数创建一个watcher实例，如下：

const watcher = new Watcher(vm, expOrFn, cb, options);

接着判断如果用户在选项参数options中指定的immediate为true，则立即用被观察数据当前的值触发回调，如下：

if (options.immediate) {
  cb.call(vm, watcher.value);
}

最后返回一个取消观察函数unwatchFn，用来停止触发回调。如下：

return function unwatchFn() {
  watcher.teardown();
};

这个取消观察函数unwatchFn内部其实是调用了watcher实例的teardown方法，那么我们来看一下这个teardown方法是如何实现的。其代码如下：

export default class Watcher {
  constructor(/* ... */) {
    // ...
    this.deps = [];
  }
  teardown() {
    let i = this.deps.length;
    while (i--) {
      this.deps[i].removeSub(this);
    }
  }
}

在之前介绍变化侦测篇的文章中我们说过，谁读取了数据，就表示谁依赖了这个数据，那么谁就会存在于这个数据的依赖列表中，当这个数据变化时，就会通知谁。也就是说，如果谁不想依赖这个数据了，那么只需从这个数据的依赖列表中把谁删掉即可。

在上面代码中，创建watcher实例的时候会读取被观察的数据，读取了数据就表示依赖了数据，所以watcher实例就会存在于数据的依赖列表中，同时watcher实例也记录了自己依赖了哪些数据，另外我们还说过，每个数据都有一个自己的依赖管理器dep，watcher实例记录自己依赖了哪些数据其实就是把这些数据的依赖管理器dep存放在watcher实例的this.deps = []属性中，当取消观察时即watcher实例不想依赖这些数据了，那么就遍历自己记录的这些数据的依赖管理器，告诉这些数据可以从你们的依赖列表中把我删除了。

举个例子：

vm.$watch(
  function() {
    return this.a + this.b;
  },
  function(newVal, oldVal) {
    // 做点什么
  }
);

例如上面watcher实例，它观察了数据a和数据b，那么它就依赖了数据a和数据b，那么这个watcher实例就存在于数据a和数据b的依赖管理器depA和depB中，同时watcher实例的deps属性中也记录了这两个依赖管理器，即this.deps=[depA,depB]，

当取消观察时，就遍历this.deps，让每个依赖管理器调用其removeSub方法将这个watcher实例从自己的依赖列表中删除。

下面还有最后一个问题，当选项参数options中的deep属性为true时，如何实现深度观察呢？

首先我们来看看什么是深度观察，假如有如下被观察的数据：

obj = {
  a: 2
};

所谓深度观察，就是当obj对象发生变化时我们会得到通知，通知当obj.a属性发生变化时我们也要能得到通知，简单的说就是观察对象内部值的变化。

要实现这个功能也不难，我们知道，要想让数据变化时通知我们，那我们只需成为这个数据的依赖即可，因为数据变化时会通知它所有的依赖，那么如何成为数据的依赖呢，很简单，读取一下数据即可。也就是说我们只需在创建watcher实例的时候把obj对象内部所有的值都递归的读一遍，那么这个watcher实例就会被加入到对象内所有值的依赖列表中，之后当对象内任意某个值发生变化时就能够得到通知了。

有了初步的思想后，接下来我们看看代码中是如何实现的。我们知道，在创建watcher实例的时候，会执行Watcher类中get方法来读取一下被观察的数据，如下：

export default class Watcher {
  constructor(/* ... */) {
    // ...
    this.value = this.get();
  }
  get() {
    // ...
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    if (this.deep) {
      traverse(value);
    }
    return value;
  }
}

可以看到，在get方法中，如果传入的deep为true，则会调用traverse函数，并且在源码中，对于这一步操作有个很形象的注释：

"touch" every property so they are all tracked as dependencies for deep watching

“触摸”每个属性，以便将它们全部作为深度监视的依赖项进行跟踪

所谓“触摸”每个属性，不就是将每个属性都读取一遍么？哈哈

回到代码，traverse函数定义如下：

const seenObjects = new Set();

export function traverse(val: any) {
  _traverse(val, seenObjects);
  seenObjects.clear();
}

function _traverse(val: any, seen: SimpleSet) {
  let i, keys;
  const isA = Array.isArray(val);
  if (
    (!isA && !isObject(val)) ||
    Object.isFrozen(val) ||
    val instanceof VNode
  ) {
    return;
  }
  if (val.__ob__) {
    const depId = val.__ob__.dep.id;
    if (seen.has(depId)) {
      return;
    }
    seen.add(depId);
  }
  if (isA) {
    i = val.length;
    while (i--) _traverse(val[i], seen);
  } else {
    keys = Object.keys(val);
    i = keys.length;
    while (i--) _traverse(val[keys[i]], seen);
  }
}

可以看到，该函数其实就是个递归遍历的过程，把被观察数据的内部值都递归遍历读取一遍。

首先先判断传入的val类型，如果它不是Array或object，再或者已经被冻结，那么直接返回，退出程序。如下：

const isA = Array.isArray(val);
if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
  return;
}

然后拿到val的dep.id，存入创建好的集合seen中，因为集合相比数据而言它有天然的去重效果，以此来保证存入的dep.id没有重复，不会造成重复收集依赖，如下：

if (val.__ob__) {
  const depId = val.__ob__.dep.id;
  if (seen.has(depId)) {
    return;
  }
  seen.add(depId);
}

接下来判断如果是数组，则循环数组，将数组中每一项递归调用_traverse；如果是对象，则取出对象所有的key，然后执行读取操作，再递归内部值，如下：

if (isA) {
  i = val.length;
  while (i--) _traverse(val[i], seen);
} else {
  keys = Object.keys(val);
  i = keys.length;
  while (i--) _traverse(val[keys[i]], seen);
}

这样，把被观察数据内部所有的值都递归的读取一遍后，那么这个watcher实例就会被加入到对象内所有值的依赖列表中，之后当对象内任意某个值发生变化时就能够得到通知了。

2. vm.$set

vm.$set 是全局 Vue.set 的别名，其用法相同。

2.1 用法回顾

在介绍方法的内部原理之前，我们先根据官方文档示例回顾一下它的用法。

vm.$set(target, propertyName / index, value);

  • 参数：

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value

  • 返回值：设置的值。

  • 用法：

    向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

  • 注意：对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

2.2 内部原理

还记得我们在介绍数据变化侦测的时候说过，对于object型数据，当我们向object数据里添加一对新的key/value或删除一对已有的key/value时，Vue是无法观测到的；而对于Array型数据，当我们通过数组下标修改数组中的数据时，Vue也是是无法观测到的；

正是因为存在这个问题，所以Vue设计了set和delete这两个方法来解决这一问题，下面我们就先来看看set方法的内部实现原理。

set方法的定义位于源码的src/core/observer/index.js中，如下：

export function set(target, key, val) {
  if (
    process.env.NODE_ENV !== "production" &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(
      `Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`
    );
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val;
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  const ob = (target: any).__ob__;
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== "production" &&
      warn(
        "Avoid adding reactive properties to a Vue instance or its root $data " +
          "at runtime - declare it upfront in the data option."
      );
    return val;
  }
  if (!ob) {
    target[key] = val;
    return val;
  }
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;
}

可以看到，方法内部的逻辑并不复杂，就是根据不同的情况作出不同的处理。

首先判断在非生产环境下如果传入的target是否为undefined、null或是原始类型，如果是，则抛出警告，如下：

if (
  process.env.NODE_ENV !== "production" &&
  (isUndef(target) || isPrimitive(target))
) {
  warn(
    `Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`
  );
}

接着判断如果传入的target是数组并且传入的key是有效索引的话，那么就取当前数组长度与key这两者的最大值作为数组的新长度，然后使用数组的splice方法将传入的索引key对应的val值添加进数组。这里注意一点，为什么要用splice方法呢？还记得我们在介绍Array类型数据的变化侦测方式时说过，数组的splice方法已经被我们创建的拦截器重写了，也就是说，当使用splice方法向数组内添加元素时，该元素会自动被变成响应式的。如下：

if (Array.isArray(target) && isValidArrayIndex(key)) {
  target.length = Math.max(target.length, key);
  target.splice(key, 1, val);
  return val;
}

如果传入的target不是数组，那就当做对象来处理。

首先判断传入的key是否已经存在于target中，如果存在，表明这次操作不是新增属性，而是对已有的属性进行简单的修改值，那么就只修改属性值即可，如下：

if (key in target && !(key in Object.prototype)) {
  target[key] = val;
  return val;
}

接下来获取到target的__ob__属性，我们说过，该属性是否为true标志着target是否为响应式对象，接着判断如果tragte是 Vue 实例，或者是 Vue 实例的根数据对象，则抛出警告并退出程序，如下：

const ob = (target: any).__ob__;
if (target._isVue || (ob && ob.vmCount)) {
  process.env.NODE_ENV !== "production" &&
    warn(
      "Avoid adding reactive properties to a Vue instance or its root $data " +
        "at runtime - declare it upfront in the data option."
    );
  return val;
}

接着判断如果ob属性为false，那么表明target不是一个响应式对象，那么我们只需简单给它添加上新的属性，不用将新属性转化成响应式，如下：

if (!ob) {
  target[key] = val;
  return val;
}

最后，如果target是对象，并且是响应式，那么就调用defineReactive方法将新属性值添加到target上，defineReactive方会将新属性添加完之后并将其转化成响应式，最后通知依赖更新，如下：

defineReactive(ob.value, key, val);
ob.dep.notify();

以上，就是set方法的内部原理。其逻辑流程图如下：

在这里插入图片描述

3. vm.$delete

vm.$delete 是全局 Vue.delete的别名，其用法相同。

3.1 用法回顾

在介绍方法的内部原理之前，我们先根据官方文档示例回顾一下它的用法。

vm.$delete(target, propertyName / index);

  • 参数：

    • {Object | Array} target
    • {string | number} propertyName/index

    仅在 2.2.0+ 版本中支持 Array + index 用法。

  • 用法：

    删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。

    在 2.2.0+ 中同样支持在数组上工作。

  • 注意： 目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。

3.2 内部原理

delete方法是用来解决 Vue 不能检测到属性被删除的限制，该方法的定义位于源码的src/core.observer/index.js中，如下：

export function del(target, key) {
  if (
    process.env.NODE_ENV !== "production" &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(
      `Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`
    );
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.splice(key, 1);
    return;
  }
  const ob = (target: any).__ob__;
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== "production" &&
      warn(
        "Avoid deleting properties on a Vue instance or its root $data " +
          "- just set it to null."
      );
    return;
  }
  if (!hasOwn(target, key)) {
    return;
  }
  delete target[key];
  if (!ob) {
    return;
  }
  ob.dep.notify();
}

该方法的内部原理与set方法有几分相似，都是根据不同情况作出不同处理。

首先判断在非生产环境下如果传入的target不存在，或者target是原始值，则抛出警告，如下：

if (
  process.env.NODE_ENV !== "production" &&
  (isUndef(target) || isPrimitive(target))
) {
  warn(
    `Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`
  );
}

接着判断如果传入的target是数组并且传入的key是有效索引的话，就使用数组的splice方法将索引key对应的值删掉，为什么要用splice方法上文中也解释了，就是因为数组的splice方法已经被我们创建的拦截器重写了，所以使用该方法会自动通知相关依赖。如下：

if (Array.isArray(target) && isValidArrayIndex(key)) {
  target.splice(key, 1);
  return;
}

如果传入的target不是数组，那就当做对象来处理。

接下来获取到target的__ob__属性，我们说过，该属性是否为true标志着target是否为响应式对象，接着判断如果tragte是 Vue 实例，或者是 Vue 实例的根数据对象，则抛出警告并退出程序，如下：

const ob = (target: any).__ob__;
if (target._isVue || (ob && ob.vmCount)) {
  process.env.NODE_ENV !== "production" &&
    warn(
      "Avoid adding reactive properties to a Vue instance or its root $data " +
        "at runtime - declare it upfront in the data option."
    );
  return val;
}

接着判断传入的key是否存在于target中，如果key本来就不存在于target中，那就不用删除，直接退出程序即可，如下：

if (!hasOwn(target, key)) {
  return;
}

最后，如果target是对象，并且传入的key也存在于target中，那么就从target中将该属性删除，同时判断当前的target是否为响应式对象，如果是响应式对象，则通知依赖更新；如果不是，删除完后直接返回不通知更新，如下：

delete target[key];
if (!ob) {
  return;
}
ob.dep.notify();

以上，就是delete方法的内部原理。

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

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

相关文章

MMDeploy SDK使用记录（ncnn）

MMDeploy SDK使用记录（ncnn）

参考：mmpose/projects/rtmpose at main open-mmlab/mmpose GitHub MMDeploy 提供了一系列工具，帮助我们更轻松的将 OpenMMLab 下的算法部署到各种设备与平台上。目前，MMDeploy 可以把 PyTorch 模型转换为 ONNX、TorchScript 等和设备无关的…
阅读更多...
RabbitMQ 能保证消息可靠性吗

RabbitMQ 能保证消息可靠性吗

系列文章目录 消息队列选型——为什么选择RabbitMQ RabbitMQ 五种消息模型 RabbitMQ 能保证消息可靠性吗 系列文章目录前言一、消息可靠性的定义二、几种不可靠的场景三、防意外丢失1. 消息持久化2. 队列持久化3. 发布确认3.1 简单发布确认3.2 批量发布确认3.3 异步发布确认 4…
阅读更多...
Vector - CAPL - CAPL入门 - 01

Vector - CAPL - CAPL入门 - 01

前面已经介绍了很多CAPL相关的函数极其应用，今天CAPL能够完成的功能来介绍在车载网络测试中都能够帮助测试工程师完成哪些工作？让我们对它有一个最基础的认识。 CAPL在总线中的应用 > 分析特定消息或特定数据 > 分析数据流量 > 创建和修改工具…
阅读更多...
智慧班牌系统源码，相关技术：springboot，elmentui ，Quartz，jpa，jwt

智慧班牌系统源码，相关技术：springboot，elmentui ，Quartz，jpa，jwt

电子班牌系统的主要功能包括：班级管理、学生信息管理、教师管理、课程管理、作业管理、考试管理、公告管理、评价管理、学校消息发布等。在班级管理方面，该系统可以实现教师对班级的整体管理以及学生个人信息的管理，包括个人信息、考试成绩、…
阅读更多...
【Java】Java核心 72：XML (上)

【Java】Java核心 72：XML (上)

文章目录 1 XML概述什么是XMLXML作用 2 编写第1个XML文件需求效果步骤 3 XML的组成：声明和元素XML组成文档声明元素（标签、标记） 4 XML的组成：属性、注释和转义字符属性的语法注释转义字符[实体字符]小结 1 XML概述 什么是XML 英…
阅读更多...
rabbitmq设置允许外部访问

rabbitmq设置允许外部访问

rabbitmq默认端口为15672,用户名和密码都为guest,是不允许外部访问的. 允许外部访问设置需要操作两步: 第一步:添加其它用户,guest只能用于本机 第二步:Virtual Host允许添加的用户访问,点击下图红色部分. spring配置 spring:rabbitmq:host: 192.168.101.57port: 5672username…
阅读更多...
idea中有个目录不显示，磁盘中是有的

idea中有个目录不显示，磁盘中是有的

java项目src下有个目录data不显示 通过打开D盘看目录是有的，运行项目的时候报错，找不到目录下的文件。 解决方案： idea -> file -> seetings -> EDitor -> file types 打开页面后右侧显示有ignore files and folders 查看这里面有…
阅读更多...
【Visual Studio】关于rc文件预处理器宏

【Visual Studio】关于rc文件预处理器宏

问题 VS工程调试遇到一个问题：明明在 项目\属性，C/C\预处理器 页面定义了宏，为什么rc编译时没有影响？ 百度后发现，和下方链接中问题很相似。 https://bbs.csdn.net/topics/50485796https://bbs.csdn.net/topics/50…
阅读更多...
【运维】查询数据库每张表的数据及索引占用大小

【运维】查询数据库每张表的数据及索引占用大小

【SQL】查询数据库每张表的数据及索引占用大小 SELECTa.*,CONCAT( a.总大小 / 1024000000, G ) 总大小G FROM(SELECTTABLE_SCHEMA,TABLE_NAME,sum( DATA_LENGTH ) 数据大小,sum( INDEX_LENGTH ) 索引大小,( sum( DATA_LENGTH ) sum( INDEX_LENGTH ) ) 总大小FROMinformation_s…
阅读更多...
C# [unity]求顶点数量不等的两条曲线的中线

C# [unity]求顶点数量不等的两条曲线的中线

好久没写了.最近在尝试重写lgsvl导入地图数据的方式,地图同学提供的opendrive车道线计算不准,所以直接让他们导出经纬度的高精地图json数据,但是这种数据只有车道边界线,没有车道中心线, 基于只是想小改而非大改的前提下,还是要算出车道中心线.搞个小demo传上来,代码写的很拙劣…
阅读更多...
宝塔定时任务实现磁盘使用率超阀值后自动发送邮件

宝塔定时任务实现磁盘使用率超阀值后自动发送邮件

服务器磁盘使用空间不足会产生各种不可预知的灾难，服务器上的应用几乎全部不能用，如果没有遇到过磁盘占满的问题，可能很难发现它。 步骤 安装邮件发送工具sendEmail磁盘检测并发送邮件shell脚本宝塔配置计划任务 安装邮件发送工具sendEmail …
阅读更多...
【ROS】TF2坐标转换及实战示例

【ROS】TF2坐标转换及实战示例

Halo，这里是Ppeua。平时主要更新C，数据结构算法…感兴趣就关注我吧！你定不会失望。 文章目录 0.ROS中的坐标转换消息包0.1 geometry_msgs/TransformStamped0.2 geometry_msgs/PointStamped1.静态坐标转换1.1导入所需功能包1.2发布方实现1.3 …
阅读更多...
多元分类预测 | Matlab粒子群算法(PSO)优化极限学习机(ELM)的分类预测，多特征输入模型。PSO-ELM分类预测模型

多元分类预测 | Matlab粒子群算法(PSO)优化极限学习机(ELM)的分类预测，多特征输入模型。PSO-ELM分类预测模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元分类预测 | Matlab粒子群算法(PSO)优化极限学习机(ELM)的分类预测，多特征输入模型。PSO-ELM分类预测模型 多特征输入单输出的二分类及多分类模型。程序内注释详细，直接替换数据就可以用。程序语言为matlab，…
阅读更多...
DALL-E2原理解读——大模型论文阅读笔记五

DALL-E2原理解读——大模型论文阅读笔记五

论文：https://cdn.openai.com/papers/dall-e-2.pdf 项目：https://openai.com/dall-e-2 一. 主要思想 利用CLIP提取的文本特征，级联式的生成图片。第一阶段通过prior将文本特征与图像特征进行对齐，第二阶段用扩散模型将视觉特征转…
阅读更多...
简单demo演示Tomcat中Servlet

简单demo演示Tomcat中Servlet

挺好玩的,有利于初学对容器和servlet接口规范的理解 具体代码 package org.apache;import javax.servlet.Servlet; import java.io.FileReader; import java.io.IOException; import java.util.Properties; import java.util.ResourceBundle; import java.util.Scanner;/*** a…
阅读更多...
一文了解HTTP协议

一文了解HTTP协议

文章目录 前言概念协议传输超文本 HTTP 协议的格式HTTP 请求HTTP 响应 总结 前言 在这之前，可以看看我之前的文章，也是关于协议的。 TCP/IP 协议详解 UDP协议详解 我们在打开一个网页的时候通常都会注意到网址的前面有一个统一的标识http://&#xf…
阅读更多...
智慧校园电子班牌系统源码

智慧校园电子班牌系统源码

电子班牌系统的主要功能包括：班级管理、学生信息管理、教师管理、课程管理、作业管理、考试管理、公告管理、评价管理、学校消息发布等。在班级管理方面，该系统可以实现教师对班级的整体管理以及学生个人信息的管理，包括个人信息、考试成绩、…
阅读更多...
Long型参数传到前端精度丢失，后两位变为00，导致传值错误，解决方案

Long型参数传到前端精度丢失，后两位变为00，导致传值错误，解决方案

问题： 后端id字段为Long型，起初采用自增主键，没有问题；由于业务需要改为雪花id，后端可正常运行，传递到前端精度丢失，后两位变为00。 解决方案： 后端将属性转为字符串传递&#xff0…
阅读更多...
Spring学习笔记---上篇

Spring学习笔记---上篇

文章目录 1、Spring1.1、简介1.2、优点1.3、Spring的组成1.4、拓展 2、IOC理论推导3、IOC的本质3.1、IOC概念3.2、IoC是Spring框架的核心内容 3、HelloSpring3.1、实现3.2、思考 4、IOC创建对象的方式5、Spring配置5.1、别名（alias）5.2、Bean的配置5.3、…
阅读更多...
单图换脸roop源码与环境配置

单图换脸roop源码与环境配置

前言 1.roop是新开源了一个单图就可以进行视频换脸的项目，只需要一张所需面部的图像。不需要数据集，不需要训练。 2.大概的测试了一下，正脸换脸效果还不错，融合也比较自然。但如果人脸比较大，最终换出的效果可能会有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023