【Vue.js设计与实现】第二篇:响应系统-阅读笔记(持续更新)

news2024/11/30 0:27:06

从高层设计的角度去探讨框架需要关注的问题。

系列目录:

标题博客
第一篇:框架设计概览【Vue.js设计与实现】第一篇:框架设计概览-阅读笔记
第二篇:响应系统【Vue.js设计与实现】第二篇:响应系统-阅读笔记
第三篇:渲染器【Vue.js设计与实现】第三篇:渲染器-阅读笔记
第四篇:组件化【Vue.js设计与实现】第四篇:组件化-阅读笔记
第五篇:编译器【Vue.js设计与实现】第五篇:编译器-阅读笔记
第六篇:服务端渲染【Vue.js设计与实现】第六篇:服务端渲染-阅读笔记

第二篇 响应系统

  • 第 4 章 响应系统的作用与实现
  • 第 5 章 非原始值的响应式方案
  • 第 6 章 原始值的响应式方案

文章目录

    • 第四章:响应系统的作用与实现
      • 4.1 响应式数据与副作用函数
      • 4.2 响应式数据的基本实现
      • 4.3 设计一个完善的响应系统
      • 4.4 分支切换与 cleanup
      • 4.5 嵌套的 effect 与 effect 栈
      • 4.6 避免无限递归循环
      • 4.7 调度执行
      • 其他
      • 响应式数据
      • 调度系统
      • 计算属性
      • 懒惰执行
      • watch的实现原理
      • 过期的副作用
    • 第七章:渲染器的设计
    • 第八章:挂载与更新
      • DOM节点操作
      • 属性节点操作
      • 事件

第四章:响应系统的作用与实现

4.1 响应式数据与副作用函数

副作用函数,即会产生副作用的函数。

如:effect 函数的执行会直接或间接影响其他函数的执行,如修改了全局变量,它就是一个副作用函数。

function effect() {
	document.body.innerHTML = obj.text;
}

响应式数据:若obj.text变化了,我们希望副作用函数effect 重新执行,如果能实现这个目标,就是响应式。

const obj = { text: "hello world" };

function effect() {
	document.body.innerHTML = obj.text;
}

4.2 响应式数据的基本实现

如何让obj实现响应式?我们发现:

  • 当副作用函数 effect 执行时,会触发字段 obj.text 的读取操作
  • 当修改 obj.text 的值时,会触发字段 obj.text 的设置操作

也就是说,我们可以通过拦截一个对象的读取和设置操作来实现响应式:

  • 设置一个桶,来存放与响应式数据相关的副作用函数
  • 读取数据时,把与这个响应式数据相关的副作用函数放进一个桶里
  • 设置数据时(即修改数据时),桶里所有的函数都是与这个响应式数据相关的函数,因此 执行桶中所有函数

在这里插入图片描述
在这里插入图片描述

拦截一个对象属性的读取和设置操作,在vue2用Object.defineProperty实现,在vue3用代理对象Proxy实现。

我们根据上述思路,简单地用proxy实现响应式数据:

桶与响应式数据:

// 存储副作用函数的桶
const bucket = new Set();

// 原始数据
const data = { text: "hello world" };
// 对原始数据的代理
const obj = new Proxy(data, {
	// 拦截读取操作
	get(target, key) {
		// 将副作用函数 effect 添加到存储副作用函数的桶中
		bucket.add(effect);
		// 返回属性值
		return target[key];
	},
	// 拦截设置操作
	set(target, key, newVal) {
		// 设置属性值
		target[key] = newVal;
		// 把副作用函数从桶里取出并执行
		bucket.forEach((fn) => fn());
		// 操作成功
		return true;
	},
});

具体调用:

// 副作用函数
function effect() {
	document.body.innerHTML = obj.text;
}

// 执行副作用函数,触发读取
effect();

 // 1 秒后修改响应式数据
setTimeout(() => {
	obj.text = "hello vue3";
}, 1000);

在浏览器中运行,可以看到字符串的闪动。

4.3 设计一个完善的响应系统

由上一节可知,一个响应系统的工作流程如下:

  • 读取操作发生时,将副作用函数收集到“桶”中;
  • 设置操作发生时,从“桶”中取出副作用函数并执行

但是,上一节的操作有些缺陷:我们硬编码了副作用函数的名字(effect),导致一旦副作用函数的名字不叫 effect,那么这段代码就不能正确地工作了。我们希望,哪怕副作用函数是一个匿名函数,也能够被正确地收集到“桶”中。因此,我们需要提供用来注册副作用函数的机制

// 用一个全局变量存储被注册的副作用函数
let activeEffect;

// effect 函数用于注册副作用函数
function effect(fn) {
	activeEffect = fn;
	fn();
}

这样一来,就可以使用一个匿名的副作用函数作为 effect 函数的参数。 响应系统就不依赖副作用函数的名字了

const obj = new Proxy(data, {
	get(target, key) {
        // 新增
		if(activeEffect){
            bucket.add(activeEffect)
        }

		return target[key];
	},

	set(target, key, newVal) {
		target[key] = newVal;
		bucket.forEach((fn) => fn());
		return true;
	},
});

然而,上述代码还有缺陷:假设我们给obj的其他字段赋值,也会触发proxyset,这是不对的,我们的初衷是只obj.text有响应式。这个问题的根本原因:没有在副作用函数与被操作的目标字段之间建立明确的联系。

解决方法:重新设计“桶”的数据结构。

观察下面代码:

function effect() {
	document.body.innerHTML = obj.text;
}

此副作用函数中有3个角色:

  • 被读取的代理对象obj
  • 被读取的字段text
  • 副作用函数effect

如果用 target 来表示一个代理对象所代理的原始对象,用 key 来表示被操作的字段名,用 effectFn 来表示被注册的副作用函数,则他们的数据结构为树形数据结构,关系如下:

target
	-- key
		--effectFn

举个例子:

两个副作用函数同时读取同一个对象的属性值

target
	-- key
		--effectFn1
		--effectFn2

一个副作用函数中读取了一个对象的两个属性

target
	-- key1
		--effectFn
	-- key2
		--effectFn

不同的副作用函数中读取了两个不同对象的不同属性

target1
	-- key1
		--effectFn1
		
target2
	-- key2
		--effectFn2

构建数据结构与代码:

  • 桶:WeakMap 由 target --> Map 构成
  • 桶里的target: Map 由 key --> Set 构成
const bucket = new WeakMap();

const obj = new Proxy(data, {
	get(target, key) {
		if (!activeEffect) return target[key];

		// key -> effects
		let depsMap = bucket.get(target);
		if (!depsMap) {
			bucket.set(target, (depsMap = new Map()));
		}

		// deps 存储所有与[target,key]相关的副作用函数
		let deps = depsMap.get(key);
		if (!deps) {
			depsMap.set(key, (deps = new Set()));
		}

		deps.add(activeEffect);

		return target[key];
	},
	set(target, key, newVal) {
		target[key] = newVal;
		const depsMap = bucket.get(target);
		if (!depsMap) return;

		const effects = depsMap.get(key);

		effects && effects.forEach((effect) => effect());
	},
});

WeakMap 的键是原始对象 target,WeakMap 的值是一个Map 实例,而 Map 的键是原始对象 target 的 key,Map 的值是一个由副作用函数组成的 Set。

我们把下图中 Set 数据结构所存储的副作用函数集合称为 key 的依赖集合

在这里插入图片描述
为什么桶要使用WeakMap?

const map = new Map();
const weakMap = new WeakMap()

(function () {
	const foo = { foo: 1 };
	const bar = { bar: 2 };

	map.set(foo, 1);
	weakMap.set(bar, 2);
})()

上述代码定义了一个立即执行的函数表达式(IIFE),当它执行完时,map的key 强引用 foo,则它不会被垃圾回收器回收;而WeakMap的 key 是弱引用,垃圾回收器就会把对象 bar 从内存中移除。

简单地说,WeakMap 对 key 是弱引用,不影响垃圾回收器的工作。 常用于存储那些只有当 key 所引用的对象存在时(没有被回收)才有价值的信息,如上述场景:若 target 对象没有引用了,说明用户不需要它了,此时垃圾回收器会完成回收任务。

如果使用 Map 来代替 WeakMap, 那么即使用户的代码对 target 没有任何引用,这个 target 也不会被回收,最终可能导致内存溢出

最后,把收集、触发副作用函数封装到tracktrigger中:

const bucket = new WeakMap();

const obj = new Proxy(data, {
	get(target, key) {
		track(target, key);
		return target[key];
	},
	set(target, key, newVal) {
		target[key] = newVal;
        trigger(target, key)
	},
});

function track(target, key) {
	if (!activeEffect) return;

	let depsMap = bucket.get(target);
	if (!depsMap) {
		bucket.set(target, (depsMap = new Map()));
	}

	let deps = depsMap.get(key);
	if (!deps) {
		depsMap.set(key, (deps = new Set()));
	}

	deps.add(activeEffect);
}

function trigger(target, key) {
	const depsMap = bucket.get(target);
	if (!depsMap) return;

	const effects = depsMap.get(key);

	effects && effects.forEach((effect) => effect());
}

4.4 分支切换与 cleanup

分支切换:当字段 obj.ok 的值发生变化时,代码执行的分支会跟着变化,这就是分支切换

document.body.innerHTML = obj.ok ? obj.text : "not";

分支切换可能会产生遗留的副作用函数。obj.ok的初始值为true时,会读取字段obj.text,则副作用函数与响应式数据之间的联系如下:

data
	--ok
		--effectFn
	--text
		--effectFn
	

在这里插入图片描述

当obj.ok的值为false时,obj.text不会被读取,此时副作
用函数 effectFn 应该被字段 obj.text 所对应的依赖集合收集:

在这里插入图片描述

然而,在obj.ok改为false时,我们并没有删除key为text的副作用函数,这就产生了遗留的副作用函数

遗留的副作用函数会导致不必要的更新。即,会调用不必要的副作用函数。举个例子:

effect(function effectFn(){
    document.body.innerHTML = obj.ok ? obj.text : "not";
})

若此时obj.ok为false,但修改了obj.text的值,副作用函数仍然会执行,尽管我们已经不再读取obj.text了。

解决这个问题的方法:每次副作用函数执行时,我们可以 先把它从所有与之关联的依赖集合中删除。当副作用函数执行完毕后,会重新建立联系,但在新的联系中不会包含遗留的副作用函数。如图:

在这里插入图片描述

要将一个副作用函数从所有与之关联的依赖集合中移除,就需要知道哪些依赖集合中包含它,即,需要一个数组来存储包含当前副作用函数的依赖集合

effectFn 添加一个属性deps ,用来存储会调用此副作用函数的依赖集合。

function effect(fn) {
	const effectFn = () => {
		activeEffect = effect;
		fn();
	};

	// 存储所有与该副作用函数相关联的依赖集合
	effectFn.deps = [];
	effectFn();
}

track中添加:

function track(target, key) {
	if (!activeEffect) return;

	let depsMap = bucket.get(target);
	if (!depsMap) {
		bucket.set(target, (depsMap = new Map()));
	}

	let deps = depsMap.get(key);
	if (!deps) {
		depsMap.set(key, (deps = new Set()));
	}

	deps.add(activeEffect);

	// 新增
	activeEffect.deps.push(deps);
}

在副作用函数执行时,将包含此副作用函数的依赖集合中的此函数移除:

function effect(fn) {
	const effectFn = () => {
		// 调用 cleanup 函数完成清除工作
		cleanup(effectFn);
		activeEffect = effect;
		fn();
	};

	// 存储所有与该副作用函数相关联的依赖集合
	effectFn.deps = [];
	effectFn();
}

function cleanup(effectFn) {
	for (let i = 0; i < effectFn.deps.length; i++) {
		const deps = effectFn.deps[i];
		deps.delete(effectFn);
	}
	// 重置数组
	effectFn.deps.length = 0;
}

到这里,我们已经清除了遗留的副作用函数。然而,运行此代码,会发现:出现了死循环。问题出现在trigger 函数中:

function trigger(target, key) {
	const depsMap = bucket.get(target);
	if (!depsMap) return;

	const effects = depsMap.get(key);

    // 问题出现在这里
	effects && effects.forEach((effect) => effect());
}

原因:

在调用 forEach 遍历 Set 集合时,如果一个值已经被访问过了,但该值被删除并重新添加到集合,如果此时 forEach 遍历没有结束,那么该值会重新被访问

因此,想要解决这个问题,我们可以创建一个新的set集合并遍历它:

function trigger(target, key) {
	const depsMap = bucket.get(target);
	if (!depsMap) return;

	const effects = depsMap.get(key);

	// 新增
	const effectsToRun = new Set(effects);
	effectsToRun.forEach((effect) => effect());
}

4.5 嵌套的 effect 与 effect 栈

上述代码在effect嵌套时会出错,原因是:

同一时刻 activeEffect 所存储的副作用函数只能有一个。当副作用函数发生嵌套时,内层副作用函数的执行会覆盖 activeEffect 的值,并且永远不会恢复到原来的值。

解决方法:需要一个副作用函数栈 effectStack,在副作用函数执行时,将当前副作用函数压入栈中,执行完毕后将其从栈中弹出,并始终让 activeEffect 指向栈顶的副作用函数。

let activeEffect;
const effectStack = [];

function effect(fn) {
	const effectFn = () => {
		cleanup(effectFn);
        
		activeEffect = effectFn;
		effectStack.push(effectFn);

		fn();

		effectStack.pop();
		activeEffect = effectStack[effectStack.length - 1];
	};

	effectFn.deps = [];
	effectFn();
}

4.6 避免无限递归循环

如下代码会无限递归循环:

const data = { foo: 1 };
const obj = new Proxy(data, {
	//
});

effect(() => obj.foo++);

原因是:obj.foo++语句,会读取也会设置,因此它会触发tracktrigger,不断地添加副作用函数。

解决方法:可以在 trigger 动作发生时增加守卫条件:如果 trigger 触发执行的副作用函数与当前正在执行的副作用函数相同,则不触发执行。

function trigger(target, key) {
	const depsMap = bucket.get(target);
	if (!depsMap) return;

	const effects = depsMap.get(key);
    // 新增
	const effectsToRun = new Set();

	effects &&
		effects.forEach((effect) => {
			if (effect !== activeEffect) {
				effectsToRun.add(effect);
			}
		});

	effectsToRun.forEach((effect) => effect());
}

4.7 调度执行


其他

响应式数据

先了解两个概念:副作用函数和响应式数据。

副作用函数:会产生副作用的函数。

如:

let val=1

function effect(){
	val=2
}

这个函数改变了全局变量val,产生了副作用,因此是副作用函数。

而如果val这个数据的变化改变了视图的变化,那么val就称作响应式数据

想要实现响应式数据,需要依赖两个行为:

  • getter:数据读取
  • setter:数据修改

vue2中这两个行为通过Object.defineProperty实现
vue3中这两个行为通过Proxy实现。

响应式数据的实现原理

Vue在组件和实例初始化的时候,会将data里的数据进行数据劫持,即Object.defineProperty对数据进行处理。被劫持后的数据会有两个属性:gettersetter

使用数据时触发getter,修改数据时触发setter,同时也出发了底层的watcher监听,通知DOM修改刷新。 这就实现了响应式数据。

Vue中的数据变页面一定变吗?

不一定。数据变页面也变是因为数据有getter和setter两个属性。如果没有则不会变。

vue中的响应式是什么?
怎么理解响应式原理?_vue响应式属性_J.P_P的博客-CSDN博客
Vue 核心之数据劫持 - Jaye8584 - 博客园 (cnblogs.com)

调度系统

调度系统,指的是响应性的可调度性

可调度性,指的是,当数据更新的动作,触发副作用函数重新执行时,有能力决定:副作用函数effect执行的时机、次数以及方式。

想要实现一个调度系统,需要依赖:异步Promise和队列jobQueue。需要:基于Set构建出一个基本的队列数组jobQueue,利用Promise的异步特性,来控制执行的顺序。

计算属性

计算属性的本质:一个属性值,当依赖响应式数据发生变化时,重新计算。

计算属性的实现:依赖于调度系统。

懒惰执行

watch监听器:观测一个响应式数据,当数据发生变化时,通知并执行对应的回调函数。

这意味着,watch很多时候不需要立即执行。因此,需要懒惰执行进行控制。

懒惰执行的实现:比调度系统简单。本质上是一个boolean型的值,被添加到effet函数中,用来控制副作用的执行。

if(!lazy){
	//执行副作用函数
}

watch的实现原理

基于调度系统和懒惰执行。

过期的副作用

我们可以在watch完成异步操作。但是,大量的异步操作可能导致竞态问题

竞态问题:在描述一个系统或进程的输出,依赖于不受控制的事件出现顺序或者出现时机。

如:

let findData

watch(obj,async()=>{
	const res=await fetch('/path/to/request')
	findData=res
})

这段代码是异步操作。若obj改变了两次,就会发送两次网络请求。我们无法知道findData最后保存的值是哪一次网络请求的。这种问题就是竞态问题

而如果想要解决这问题,那么就需要使用到 watch 回调函数的第三个参数 onInvalidate,它本身也是一个回调函数。并且该回调函数(onInvalidate)会在副作用下一次重新执行前调用,可以用来清除无效的副作用,例如等待中的异步请求
而onInvalidate 的实现原理也非常简单,只需要 在副作用函数(effct)重新执行前,先触发 onInvalidate 即可。

好抽象,没太懂。

第七章:渲染器的设计

渲染器和渲染函数不是一个东西。

  • 渲染器是createRenderer的返回值,是一个对象
  • 渲染函数是渲染器对象中的render方法

在vue 3.2.37 源码中,createRenderer函数具体是通过baseCreateRenderer进行的。总体可以分为两部分:

  1. 在浏览器端渲染时,利用DOM API完成DOM操作:如渲染DOM用createElement,删除DOM使用removeChild
  2. 渲染器不能和宿主环境(浏览器)强耦合:vue中有浏览器渲染和服务端渲染。若与浏览器强耦合就不好实现服务端渲染了。

vnode

一个普通的JS对象,代表了渲染的内容。 对象中通过type表示渲染的DOM。如type===div表示div标签。type===Fragment表示文档片段。

第八章:挂载与更新

对于渲染器,它所作的最核心的事情是:对节点进行挂载、更新。

第八章分为两部分来讲解这件事:

  1. DOM节点操作
  2. 属性节点操作

DOM节点操作

分为3部分:

  • 挂载:节点的初次渲染。如用createElement新建一个节点。
  • 更新:当响应性数据发生变化时,可能会涉及到DOM的更新。本质上属于属性的更新。
  • 卸载:旧节点不再需要了,就删除旧节点。如通过parentEl.removeChild进行。

属性节点操作

属性可以分为两类:

  1. 属性,如:class,id,value…
  2. 事件,如:click、input…

先了解非事件的属性部分。
想了解vue对属性的处理,需要先了解浏览器中的属性分类。
浏览器中,DOM属性被分为两类:

  1. HTML Attributes:直接定义在HTML上的属性
  2. DOM Properties:拿到DOM对象后定义的属性。

对于HTML Attributes,它只能在html中操作。而想要在JS中操作DOM,需要通过DOM Properties来实现。因为JS本身特性的问题,会导致某些DOM Properties的设置存在特殊性,如classtypevalue。为了保证DOM Properties的成功设置,我们需要知道不同属性的DOM Properties定义方式。

  1. el.setAttribute('属性名','属性值')
  2. . 属性赋值el.属性名=属性值el[属性名]=属性值

在这里插入图片描述
在这里插入图片描述

事件

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

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

相关文章

spring-authorization-server 公共客户端方式获取授权码和Token的流程

spring-authorization-serve【版本1.2.1】官方文档中提及了关于RegisteredClient中所涉及的客户端身份验证方法&#xff0c;也就是RegisteredClient中提及的clientAuthenticationMethods属性对应的“none”值&#xff0c;目前clientAuthenticationMethods属性支持的值包含&…

Maven提示Failure to find com.oracle:ojdbc14:jar:10.2.0.4.0

目录 问题 解决方案 1、下载oracle的驱动jar包 2、安装到本地仓库 3、检查本地仓库是否成功安装 4、Maven先clean &#xff0c;再install。 问题 项目引入Oracle依赖后报错&#xff0c;显示为红色。 解决方案 1、下载oracle的驱动jar包 首先我们要去下载一个oracle的…

c语言--assert断言(详解)

目录 一、断言的概念二、assert断言2.1 代码12.1.1运行结果2.1.2分析 2.2代码22.2.1运行结果2.2.2分析2.3代码32.3.1运行结果及其分析 三、优点四、缺点五、注意 一、断言的概念 assert.h 头⽂件定义了宏 assert() &#xff0c;用于在运行时确保程序符合指定条件&#xff0c;如…

16- OpenCV:轮廓的发现和轮廓绘制、凸包

目录 一、轮廓发现 1、轮廓发现(find contour in your image) 的含义 2、相关的API 以及代码演示 二、凸包 1、凸包&#xff08;Convex Hull&#xff09;的含义 2、Graham扫描算法- 概念介绍 3、cv::convexHull 以及代码演示 三、轮廓周围绘制矩形和圆形框 一、轮廓发现…

ele-h5项目使用vue3+vite+vant4开发:第一节、页面头部实现

实现页面 确认需求 顶部提示栏搜索框搜索提示 normalize.css:处理不同浏览器的默认样式 安装 npm i normalize.css 使用 src\App.vue<style scoped> import normalize.css;#app {/** 让字体抗锯齿&#xff0c;看起来更清晰 */-webkit-font-smoothing: antialiased;-moz-o…

Elasticsearch(ES) 简述请求操作索引下文档 增删查改操作

上文 Elasticsearch(ES) 创建带有分词器规则的索引 带着大家创建了一个带有分词功能的索引 老规矩 我们启动一下ES服务 本文 我们就来说说 关于文档的操作 我们先来添加一个文档 就像数据库加一条数据一样 这里 并不需要指定什么表结构和数据结构 它的文档结构是无模式的 添…

Python新春烟花盛宴

写在前面 哈喽小伙伴们&#xff0c;博主在这里提前祝大家新春快乐呀&#xff01;我用Python绽放了一场新春烟花盛宴&#xff0c;一起来看看吧&#xff01; 环境需求 python3.11.4及以上PyCharm Community Edition 2023.2.5pyinstaller6.2.0&#xff08;可选&#xff0c;这个库…

通过 editplus 批量转换文本编码

有时候需要对文本的编码进行批量转换&#xff0c;文本编辑器 notepad 中的“编码”菜单可以用来转换单个的文档编码&#xff0c;当文档数量多的时候&#xff0c;一个个操作比较繁琐&#xff0c;通过文本编辑器 editplus 软件&#xff0c;可以方便快速地批量修改文本文件的编码&…

微信网页授权之使用完整服务解决方案

目录 微信网页授权能力调整造成的问题 能力调整的内容和理由 原有运行方案 is_snapshotuser字段 改造原有方案 如何复现测试场景 小结 微信网页授权能力调整造成的问题 依附于第三方的开发&#xff0c;做为开发者经常会遇到第三方进行规范和开发的调整&#xff0c;如开…

基于SpringBoot+Vue的防汛应急物资管理系统

本防汛物资管理系统的主要分为管理员角色和用户角色&#xff0c;主要设计的功能包括注册登录管理、密码信息管理、用户信息管理、物资信息管理等模块。 注册登录管理&#xff1a;使用本系统需要打开浏览器&#xff0c;输入相应的网址&#xff0c;如果用户是首次使用本系统&…

下载、安装Jenkins

进入官网 下载Jenkins https://www.jenkins.io 直接点击Download 一般是下长期支持版 因为它是java写的&#xff0c;你要运行它&#xff08;Jenkins.war&#xff09;肯定要有java环境 有两种方式去运行它&#xff0c;一种是下载Tomcat&#xff08;是很经典的java容器或者jav…

Xcode 15 及以上版本:libarclite 库缺少问题

参考链接&#xff1a;Xcode 15 libarclite 缺失问题_sdk does not contain libarclite at the path /ap-CSDN博客 报错: SDK does not contain libarclite at the path /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarcl…

MC插件服教程-paper+游戏云VPS

首先必须要先买一台VPS&#xff0c;这里以i9的机型做演示 购买完成等待大约1分钟服务器就会创建完成&#xff0c;之后在管理页可以看到服务器的连接信息 image772356 43 KB 首先复制下远程连接地址&#xff0c;此处即k.rainplay.cn:13192 之后在系统里搜索“rdp”或“远程桌面…

QT研究笔记(一)windows 开发环境安装部署

一、Qt 是什么&#xff1f; Qt 是一个跨平台的应用程序开发框架&#xff0c;最初由挪威的 Trolltech 公司开发&#xff0c;并于2008年被诺基亚收购。后来&#xff0c;Qt 框架由 Digia 公司接手&#xff0c;并在2012年成立了 The Qt Company。Qt 提供了一套丰富的工具和类库&am…

为什么越来越多的企业在考虑将ERP从云端迁移到本地?

越来越多的企业在考虑将核心ERP迁移到本地部署&#xff0c;原来实施的时候局限于业务规模、实施成本的原因采用云端部署的方式越来越不再适应于企业规模的发展、系统应用和数据安全的要求。 因此他们都宁愿将云端ERP的数据迁移到本地&#xff0c;使得系统数据和安全更加可控。…

接口测试框架对比

公司计划系统的开展接口自动化测试&#xff0c;需要我这边调研一下主流的接口测试框架给后端测试&#xff08;主要测试接口&#xff09;的同事介绍一下每个框架的特定和使用方式。后端同事根据他们接口的特点提出一下需求&#xff0c;看哪个框架更适合我们。 需求 1、接口编写…

python中[[]] * (n)和[[] for _ in range(n)]的区别

1、现象 刷leetcode207的时候碰到一个坑&#xff0c;用[[]] * (n)初始化二维数组&#xff0c;逻辑是正确的&#xff0c;但是结果始终不对。 2、原因 最后定位是初始化语句使用错误导致的&#xff0c;我使用的是[[]] * (n)&#xff0c;应该使用[[] for _ in range(n)] 3、解…

MagicVideo-V2:多阶段高保真视频生成框架

本项工作介绍了MagicVideo-V2&#xff0c;将文本到图像模型、视频运动生成器、参考图像embedding模块和帧内插模块集成到端到端的视频生成流程中。由于这些架构设计的好处&#xff0c;MagicVideo-V2能够生成具有极高保真度和流畅度的美观高分辨率视频。通过大规模用户评估&…

Android学习之路(28) 进程保活组件的封装

前言 远古时代&#xff0c;出现过很多黑科技&#xff0c;比如MarsDaemon&#xff0c;使用双进程守护的方式进行保活&#xff0c;在当时可谓风光无限&#xff0c;可惜在8.0时代到来就被废弃了。 又比如后面出现的1像素Activity的保活方式&#xff0c;说他流氓一点不过分&#…

Linux 驱动开发基础知识——内核对设备树的处理与使用(十)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;Vir2021GKBS &#x1f43c;本文由…