手写Vue3源码

Vue3核心源码

B站视频地址:https://www.bilibili.com/video/BV1nW4y147Pd?p=2&vd_source=36bacfbaa95ea7a433650dab3f7fa0ae

Monorepo介绍

Monorepo 是管理项目代码的一种方式,只在一个仓库中管理多个模块/包

  • 一个仓库可以维护多个模块,不用到处找仓库
  • 方便版本管理和依赖管理,模块之间的引用和调用都非常方便

缺点:仓库的体积变大,打包和安装依赖都会变慢

例如Vue3源码、element-plus 等都已经采用这种方式来管理项目

了解更多可以查看这个文档:https://www.modb.pro/db/626876

Vue3项目结构

                            +---------------------+|                     ||  @vue/compiler-sfc  ||                     |+-----+--------+------+|        |v        v+---------------------+    +----------------------+|                     |    |                      |+-------->|  @vue/compiler-dom  +--->|  @vue/compiler-core  ||         |                     |    |                      |
+----+----+    +---------------------+    +----------------------+
|         |
|   vue   |
|         |
+----+----+   +---------------------+    +----------------------+    +-------------------+|         |                     |    |                      |    |                   |+-------->|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  ||                     |    |                      |    |                   |+---------------------+    +----------------------+    +-------------------+
  • reactivity: 响应式系统
  • runtime-core:与平台无关的运行时核心 (可以创建针对特定平台的运行时 - 自定义渲染器)
  • runtime-dom: 针对浏览器的运行时。包括DOM API,属性,事件处理等
  • runtime-test:用于测试
  • server-renderer:用于服务器端渲染
  • compiler-core:与平台无关的编译器核心
  • compiler-dom: 针对浏览器的编译模块
  • compiler-ssr: 针对服务端渲染的编译模块
  • compiler-sfc: 针对单文件解析
  • size-check:用来测试代码体积
  • template-explorer:用于调试编译器输出的开发工具
  • shared:多个包之间共享的内容
  • vue:完整版本,包括运行时和编译器

Vue3构建流程搭建

vue3采用 monorepo 的方式,目前只有 yarn 支持,所以我们需要使用 yarn 来构建项目

初始化

找一个空文件夹执行命令

yarn init -y

然后修改生成的 package.json 文件

{"private":"true","workspaces":["packages/*"],"name": "zf-vue3","version": "1.0.0","main": "index.js","license": "MIT","devDependencies": {"@rollup/plugin-json": "^4.1.0","@rollup/plugin-node-resolve": "^13.0.0","execa": "^5.1.1","rollup": "^2.52.3","rollup-plugin-typescript2": "^0.30.0","typescript": "^4.3.4"}
}
  • private 表示这是一个私有的

  • workspaces 声明工作区间,将来我们的包都在 packages 这个文件夹下面

  • 修改了一下 name

然后执行安装命令

yarn install
依赖
typescript支持typescript
rollup打包工具
rollup-plugin-typescript2rollup 和 ts的 桥梁
@rollup/plugin-node-resolve解析node第三方模块
@rollup/plugin-json支持引入json
execa开启子进程方便执行命令

声明子文件

reactivity

新建 packages\reactivity\src\index.ts

const Reactivity = {}
export {Reactivity
}

然后在 packages\reactivity 位置执行 yarn init -y 初始化 package.json 文件

接着修改 package.json 文件

packages/reactivity/package.json

{"name": "@vue/reactivity", // 设置包的名称"version": "1.0.0","main": "index.js", // 在node环境中使用时会找 main 属性对应的地址"module": "dist/reactivity.esm-bundler.js", // es6模式下 import @vue/reactivity --> 使用的是这个地址"buildOptions":{ // 自定义打包配置"name": "VueReactivity", // 全局名称配置,通过 script 标签引入时,全局就会有 VueReactivity 这个名字"formats": ["esm-bundler","cjs","global"] // 打包模式,支持三种模式,node、es6、全局模块},"license": "MIT"
}
shared

新建 packages\shared\src\index.ts

const Shared = {}
export {Shared
}

然后在 packages\shared 位置执行 yarn init -y 初始化 package.json 文件

接着修改 package.json 文件

packages/shared/package.json

{"name": "@vue/shared","version": "1.0.0","main": "index.js","module": "dist/shared.esm-bundler.js","buildOptions":{"name": "VueShared","formats": ["esm-bundler","cjs"]},"license": "MIT"
}

编译脚本、rollup、ts配置

package.json 添加脚本配置

"scripts": {"dev":"node scripts/dev.js","build":"node scripts/build.js"
},

scripts/dev.js

这个文件只做某个包的打包,给 rollup 传入TARGET环境变量,生成 rollup 配置

const execa = require('execa');
const target = "reactivity";build(target)async function build(target) {// 执行rollup命令,并传入参数,其中TARGET:${target}表示目标环境// stdio: 'inherit' 将子进程的日志输出到主进程await execa('rollup', ['-cw', `--environment`, `TARGET:${target}`], { stdio: 'inherit' });
}

scripts/build.js

这个文件用来打包 packages 文件夹下所有的包

const fs = require('fs');
const execa = require('execa'); // 开启子进程打包// 过滤packages目录下的文件,只要保留文件夹
const targets = fs.readdirSync("packages").filter(f=>{// fs.statSync(`packages/reactivity`).isDirectory() 如果是文件则返回trueif(!fs.statSync(`packages/${f}`).isDirectory()){return false}else{return true}
})// 对不同的包进行依次打包
async function build(target){await execa("rollup",["-c",`--environment`,`TARGET:${target}`],{stdio: "inherit"})
}// 遍历所有的包,调用build方法
function runParallel(targets,buildFn){const result = []targets.forEach(item=>{result.push(buildFn(item))})return Promise.all(result)
}runParallel(targets,build).then(()=>{console.log("打包完成")
})

rollup.config.js

import path from "path";
import json from "@rollup/plugin-json";
import resolvePlugin from "@rollup/plugin-node-resolve";
import ts from "rollup-plugin-typescript2";// 找到packages
const packagesDir = path.resolve(__dirname, "packages");// 根据环境变量中的TARGET,找到模块中对应的package.json
const packageDir = path.resolve(packagesDir, process.env.TARGET);// 取到每个模块下面的package.json
const resolve = (p) => path.resolve(packageDir, p);
const pkg = require(resolve("package.json"));// 对打包类型做一个映射表,根据每个包的package.json中配置formats来格式化需要打包的内容
const outputConfig = {"esm-bundler": {file: resolve(`dist/${process.env.TARGET}.esm-bundler.js`),format: "es",},cjs: {file: resolve(`dist/${process.env.TARGET}.cjs.js`),format: "cjs",},global: {file: resolve(`dist/${process.env.TARGET}.global.js`),format: "iife",},
};const options = pkg.buildOptions;// 生成rollup配置
function createConfig(format, output) {// 声明全局名称output.name = options.name;// 生成sourcemapoutput.sourcemap = true;return {input: resolve(`src/index.ts`),output,plugins: [json(), ts({tsconfig:path.resolve(__dirname, "tsconfig.json"),}),resolvePlugin(),],};
}// 遍历formats生成不同的打包文件
export default options.formats.map((format) => createConfig(format, outputConfig[format]));

tsconfig.json

在根目录执行 npx tsc --init 先初始化一个 tsconfig.json 文件,然后添加如下内容

{"compilerOptions": {"target": "ESNEXT","module": "ESNEXT","strict": false,"esModuleInterop": true,"skipLibCheck": true,"forceConsistentCasingInFileNames": true,"moduleResolution": "node","baseUrl": ".","paths": {"@vue/*": ["packages/*/src"]}}
}

至此我们就可以来尝试打包一下,输入命令

yarn build

image-20240108172437702

对比打包后的文件内容可以发现两个包下面生成的打包文件是不一样的

image-20240108172539256

包之间的互相引用

当我们执行 yarn install 后会自动的再 node_modules 中生成软连接

image-20240108172840053

后面的箭头表示这是一个软连接。然后我们在代码里使用如下方式引入时

import { Shared } from "@vue/shared"const Reactivity = {}
export {Reactivity
}

@vue/shared 指向的就是这个包所在的真实文件地址

reactive Api实现

四个核心的API

import { reactive,shallowReactive,readonly,shallowReadonly } from "vue"
  • reactive:深层次的响应对象
  • shallowReactive:浅层响应对象,只会吧对象的第一层变成响应式的
  • readonly:对象是只读的
  • shallowReadonly:浅层对象只读

开启sourceMap

tsconfig.json 文件中的 sourceMap 打开并且设置成true,方便我们调试源码

{"compilerOptions": {"target": "ESNEXT","module": "ESNEXT","strict": false,"esModuleInterop": true,"skipLibCheck": true,"forceConsistentCasingInFileNames": true,"moduleResolution": "node","baseUrl": ".","paths": {"@vue/*": ["packages/*/src"]},"sourceMap": true}
}

目录结构

├── example
│   └── 1.reactivity-api.html  // 测试文件
├── package.json
├── packages
│   ├── reactivity
│   │   ├── package.json
│   │   └── src
│   │       ├── baseHandlers.ts
│   │       ├── index.ts  // reactive核心方法文件,只做导出操作
│   │       └── reactive.ts
│   └── shared
│       ├── package.json
│       └── src
│           └── index.ts // 公共功能
├── rollup.config.js
├── scripts
│   ├── build.js
│   └── dev.js
└── tsconfig.json

shared/src/index.ts

这个文件专门放置一些公共的方法

// 判断一个数据是否是一个对象
export function isObject (value){return typeof value === 'object' && value !== null;
}// 合并两个对象
export function mergeObjects<T extends object, U extends object>(obj1: T, obj2: U): T & U {return Object.assign(obj1, obj2);
}

reactivity/src/index.ts

// 导出四个核心方法
export {reactive,shallowReactive,readonly,shallowReadonly,
} from "./reactive";

reactivity/src/reactive.ts

import { isObject } from "@vue/shared";
import {mutableHandlers,readonlyHandlers,shallowReactiveHandlers,shallowReadonlyHandlers,
} from "./baseHandlers";export function reactive(target) {return createReactiveObject(target, false, mutableHandlers);
}export function shallowReactive(target) {return createReactiveObject(target, false, shallowReactiveHandlers);
}export function readonly(target) {return createReactiveObject(target, true, readonlyHandlers);
}export function shallowReadonly(target) {return createReactiveObject(target, true, shallowReadonlyHandlers);
}// 创建两个映射map,存放已经代理过的数据
// WeakMap 可以自动垃圾回收,不用担心内存泄漏问题。并且key只能是对象类型
const reactiveMap = new WeakMap();
const readlonlyMap = new WeakMap();/*** 创建代理方法* @param target 需要被代理的对象 * @param isReadonly 是否是只读的* @param baseHandlers get set 方法* @returns*/
export function createReactiveObject(target, isReadonly, baseHandlers) {// 判断这个数据是否是一个对象if (!isObject(target)) return target;// 判断这个对象是否被代理过,如果已经被代理过,则从map中获取数据const proxyMap = isReadonly ? readlonlyMap : reactiveMap;const existProxy = proxyMap.get(target);if (existProxy) return existProxy;// 创建代理对象const proxy = new Proxy(target, baseHandlers);proxyMap.set(proxy, target);// 最后返回被代理的对象return proxy;
}

reactivity/src/baseHandlers.ts

import { isObject, mergeObjects } from "@vue/shared";
import { reactive, readonly } from "./reactive";// 抽离出共用的set方法
const readonlyObj = {set: (target, key) => {console.warn(`key:${key} set 失败,因为这个对象是只读的`);},
}; // 拦截get的方法,柯里化
function createGetter(isReadonly = false, isShallow = false) {/*** 这个内部的方法参数来自于读取某个对象是,proxy传递进来的* target: 当前对象本身* key: 当前读取的key* receiver: 当前的代理对象*/return function (target, key, receiver) {// 这里使用Reflect.get来获取对象,相当于 target[key]// 后续Object上的方法,会被迁移到Reflect上去,Reflect.getProptotypeof()// target[key] = value 的方式可能会设置失败,但是并不会返回报错,也没有返回标识来表示是否成功// Reflect 方法具备返回值,所以这里要使用 Reflect 来取值和set值const res = Reflect.get(target, key, receiver);if (!isReadonly) {// 进行依赖收集,只有不是只读的对象才会进行依赖收集}// 如果是shallow则只返回拿到的值,不进行深层次代理if (isShallow) return res;// 如果拿到的返回值仍然是一个对象,则进行递归响应式处理// 这里和vue2不同,vue2是上来就进行对象的递归响应式处理// vue3则是懒代理,只有到读取到这个对象的某个属性时,才会对这个对象进行响应式处理if (isObject(res)) {return isReadonly ? readonly(res) : reactive(res);}return res;};
}// 拦截set的方法,柯里化
function createSetter(isShallow = false) {return function (target, key, value, receiver) {const res = Reflect.set(target, key, value, receiver);return res};
}// 生成不同的get方法
const get = createGetter();
const shallowGet = createGetter(false, true);
const readonlyGet = createGetter(true);
const shallowReadonlyGet = createGetter(true, true);// 生成不同的set方法
const set = createSetter();
const shallowSet = createSetter(true);export const mutableHandlers = {get,set,
};export const shallowReactiveHandlers = {get: shallowGet,set: shallowSet,
};// 合并两个对象,共用一个set方法
export const readonlyHandlers = mergeObjects({get: readonlyGet,},readonlyObj
);
// 合并两个对象,共用一个set方法
export const shallowReadonlyHandlers = mergeObjects({get: shallowReadonlyGet,},readonlyObj
);

测试reactive Api

example/1.reactive.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head> <body><script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script><script>let { reactive, shallowReactive, readonly, shallowReadonly } =VueReactivity;let state = shallowReadonly({ name:"李四",age:{n:18}});state.name = 20console.log(state.age);</script></body>
</html>

Effect依赖收集

effect.ts

packages/reactivity/src/effect.ts

export function effect(fn: Function, options: any = {}) {const effect = createReactiveEffect(fn, options);if (!options.lazy) {effect();}return effect;
}let uid = 0;
let activeEffect; // 当前正在操作的effect
const effectStack = []; // 使用一个栈来存储effect
// 创建一个响应式的effect,根据不同的属性创建不同的effect方法
function createReactiveEffect(fn, options) {const effect = function reactiveEffect() {try {activeEffect = effect; // 当前正在操作的effectfn();effectStack.push(effect);} finally {effectStack.pop();activeEffect = effectStack[effectStack.length - 1];}};effect.id = uid++; // 制作一个effect标识,用于区分effecteffect._isEffect = true; // 用于标识这个是响应式effecteffect.row = fn; // 保留effect对应的原函数effect.options = options; // 保留effect的属性return effect;
}// 依赖收集方法,在 effect 中读取属性时就会触发 get 方法
// 在get方法中将对象本身,以及当前的key传递过来
// 然后和effect进行对应关联
const targetMap = new WeakMap()
export function track(target, type, key) {if(!activeEffect) return// 使用如下一个结构来进行属性和effect关联// new WeakMap( target, new Map( key, [effect1,effect2] ))let depTarget = targetMap.get(target)if(!depTarget){targetMap.set(target, depTarget = new Map())}// 拿到的是一个set,存放的是属性对应的多个effectlet depMap = depTarget.get(key)if(!depMap){depTarget.set(key, depMap = new Set())}depMap.add(activeEffect)
}

baseHandlers.ts

packages/reactivity/src/baseHandlers.ts

修改 createGetter 方法,在get时调用 effect.js 中的 track 方法,传入 target,type,key 进行响应式依赖收集

+ import { track } from "./effect";
+ import { TrackOpTypes } from "./operators";// 拦截get的方法,柯里化
function createGetter(isReadonly = false, isShallow = false) {/*** 这个内部的方法参数来自于读取某个对象是,proxy传递进来的* target: 当前对象本身* key: 当前读取的key* receiver: 当前的代理对象*/return function (target, key, receiver) {// 这里使用Reflect.get来获取对象,相当于 target[key]// 后续Object上的方法,会被迁移到Reflect上去,Reflect.getProptotypeof()// target[key] = value 的方式可能会设置失败,但是并不会返回报错,也没有返回标识来表示是否成功// Reflect 方法具备返回值,所以这里要使用 Reflect 来取值和set值const res = Reflect.get(target, key, receiver);if (!isReadonly) {// 进行依赖收集,只有不是只读的对象才会进行依赖收集
+      track(target,TrackOpTypes.GET,key)}// 如果是shallow则只返回拿到的值,不进行深层次代理if (isShallow) return res;// 如果拿到的返回值仍然是一个对象,则进行递归响应式处理// 这里和vue2不同,vue2是上来就进行对象的递归响应式处理// vue3则是懒代理,只有到读取到这个对象的某个属性时,才会对这个对象进行响应式处理if (isObject(res)) {return isReadonly ? readonly(res) : reactive(res);}return res;};
}

operators.ts

packages/reactivity/src/operators.ts

定义一个枚举,用于区分场景

// 设置一个枚举
export const enum TrackOpTypes {GET
} 

测试effect

example/2.effect.html

<div id="app"></div>
<script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
<script>let { effect,reactive } = VueReactivitylet state = reactive({name:'张三',age:18})effect(()=>{app.innerText = `${state.name} + ${state.age}`})
</script>

最终生成的 targetMap 结构

image-20240109171018102

触发更新

修改createSetter方法

修改 /reactivity/src/baseHandlers.ts 文件中的 createSetter 方法

import {hasChange,hasOwn,isArray,isIntegerKey,isObject,mergeObjects,
} from "@vue/shared";
import { reactive, readonly } from "./reactive";
import { track, trigger } from "./effect";
import { TrackOpTypes, TriggerOpTypes } from "./operators";// 拦截set的方法,柯里化
function createSetter(isShallow = false) {return function (target, key, value, receiver) {// 获取旧值const oldValue = Reflect.get(target, key, receiver);// set数据时的时候更新这个key所收集的effect// 先判断target是否是一个数组并且key是否是数字字符串// 如果是则判断修改的key是否是在数组下标内// Number(key) < target.length 表示当前修改的下标在原有数组内,因为此时的target还没有发生修改// 否则的话再去判断当前修改的key是否在target身上let hadKey =isArray(target) && isIntegerKey(key)? Number(key) < target.length: hasOwn(target, key);// 修改值,Reflect.set返回的是一个布尔值,true表示修改成功const res = Reflect.set(target, key, value, receiver);if (!hadKey) {// 新增trigger(target, TriggerOpTypes.ADD, key, value);} else {// 判断两个值不相等的情况if (hasChange(oldValue, value)) {// 修改trigger(target, TriggerOpTypes.SET, key, value, oldValue);}}return res;};
}

reactivity/src/operators.ts

operators 文件中增加了一个枚举类,用于区分时新增一个属性还是修改一个属性

// set时用于区分时新增一个属性还是修改一个属性
export const enum TriggerOpTypes {ADD,SET,
}

shared/src/index.ts

公共方法增加了一些方法

// 判断一个数据是否是一个对象
export function isObject(value) {return typeof value === "object" && value !== null;
}// 合并两个对象
export function mergeObjects<T extends object, U extends object>(obj1: T,obj2: U
): T & U {return Object.assign(obj1, obj2);
}// 判断数据是否是数组
export function isArray<T>(value: unknown): value is T[] {return Array.isArray(value);
}// 判断数据是否是函数
export function isFunction(value: unknown): value is Function {return typeof value === "function";
}// 判断数据是否是数字
export function isNumber(value: unknown): value is number {return typeof value === "number";
}// 判断数据是否是字符串
export function isString(value: unknown): value is string {return typeof value === "string";
}// 判断一个字符串是否是数字字符串
export function isIntegerKey(key) {return parseInt(key) + "" === key;
}// 判断对象中是否有某个属性
export function hasOwn(obj, key) {return Object.prototype.hasOwnProperty.call(obj, key);
}// 判断两个数据是否相等
export function hasChange(oldValue, newValue) {return oldValue !== newValue;
}// 判断数据是否是Symbol类型
export function isSymbol(value) {return typeof value === "symbol";
}

reactivity/src/effect.ts

effect 中去增加一个 tagger 方法,此方法会根据传递进来的key和target,找到对应的 dep 进行更新,也就是会重新触发这个属性对应的 effect,从而实现页面更新

import { isArray, isIntegerKey, isSymbol } from "@vue/shared";
import { TriggerOpTypes } from "./operators";// 更新依赖的方法
export function trigger(target, type, key?, newValue?, oldValue?) {// 得到当前对象对应的maplet depMap = targetMap.get(target);// 判断这个target是否收集过依赖if (!depMap) return;// 将所有的effect放在一个数组中,最终一起执行let effects = [];const add = (effectsToAdd) => {if (effectsToAdd) {effectsToAdd.forEach((effect) => {effects.push(effect);});}};// 判断当前操作的是否是数组// 并且修改的key是legth,则需要更新数组所收集到的effectif (key === "length" && Array.isArray(target)) {console.log(depMap, "depMapdepMap");// Map类型数据进行forEach遍历是,第一个是键值对的值,第二个是键depMap.forEach((deps, key) => {// key > newValue// 例如我effect中使用了 state.arr[2],则收集到的依赖就会有一个key是2// 如果我更新时 state.arr.length = 1,则也要更新这个数组target所收集的依赖effectif (!isSymbol(key) && (key === "length" || key > newValue)) {add(deps);}});} else {// 这里可能是对象if (key !== undefined) {add(depMap.get(key));}// 如果是这种情况: state.arr[100] = 1// 这种情况表示更新的是数组的某个索引,此时key就是100// 但是100并不在原有数组的属性上,所以type是ADD// 去更新这个数组对应的length属性对应的effectswitch (type) {case TriggerOpTypes.ADD:if (isArray(target) && isIntegerKey(key)) {add(depMap.get("length"));}}}effects.forEach((effect) => effect());
}

测试触发更新

<div id="app"></div>
<script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
<script>let { effect, reactive } = VueReactivity;let state = reactive({ name: "张三", age: 18, arr: [1, 2, 3] });effect(() => {app.innerHTML = `${state.arr} + ${state.arr.length}`;});setTimeout(() => {state.arr.length = 100;}, 1000);
</script>

image-20240109231817514

ref Api实现

四个API

ref 有关的API共有四个

  • ref:将一个普通数据类型转成响应式的,如果穿过来的是一个对象,则会调用 reactive 进行响应式处理
  • shallowRef:浅层的ref
  • toRef:用法 let refKey =toRef(object,key) 将某个对象中的某一个属性变成响应式的,此时修改 refKey.value = xxx 相当于修改的就是 object.key = xxx
  • toRefs:用法 let {key1,key2} = toRefs(object) 将某个对象中的所有属性变成响应式的,在对象解构时可以用这个方法,否则解构出来的属性会丢失响应式

reactivity/src/ref.ts

下面是源码实现

import { hasChange, isArray, isObject } from "@vue/shared";
import { track, trigger } from "./effect";
import { TrackOpTypes, TriggerOpTypes } from "./operators";
import { reactive } from "./reactive";export function ref(value) {return createRef(value);
}export function shallowRef(value) {return createRef(value, true);
}function convert(value) {return isObject(value) ? reactive(value) : value;
}class RefImpl {public _value: any;// 产生的实例会被添加一个__v_isRef标记,表示这是一个refpublic __v_isRef = true;// 给参数前面加上一个public关键字// 会自动的帮我们实现:this.rowValue = rowValue; this.shallow = shallowconstructor(public rowValue, public shallow) {// 如果是shallowRef 则直接返回,否则判断是否是对象,如果是对象,则递归进行深层响应式处理this._value = shallow ? rowValue : convert(rowValue);}// es6中的属性访问器,转成es5会转成 Object.definePropertyget value() {track(this, TrackOpTypes.GET, "value");return this._value;}set value(newValue) {if (hasChange(this._value, newValue)) {this.rowValue = newValue;this._value = newValue;trigger(this, TriggerOpTypes.SET, "value", newValue);}}
}export function createRef(value, shallow = false) {return new RefImpl(value, shallow);
}// toRef返回的实例不再需要收集依赖,如果传过来的target已经被响应式了,则生成的ref还是响应式的
// 在set value时还是会走响应式中的set方法进行依赖更新,所以这里不需要依赖收集
class ObjectRefImpl {// 产生的实例会被添加一个__v_isRef标记,表示这是一个refpublic __v_isRef = true;constructor(public target, public key) {}get value(){return this.target[this.key];}set value(newValue){this.target[this.key] = newValue;}
}// toRef实现
export function toRef(target, key) {return new ObjectRefImpl(target, key);
}// toRefs实现
export function toRefs(object) {const res = isArray(object) ? new Array(object.length) : {}// 遍历每一个属性。让每一个属性都变成reffor (let key in object) {res[key] = toRef(object, key);}return res
}

reactivity/src/index.ts

在 index 文件导入四个ref的四个方法

export {ref,shallowRef,toRef,toRefs} from "./ref"

测试ref

<div id="app"></div>
<div id="app1" style="width: 100px;height: 100px;"></div><script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script><script>let { ref,effect,reactive,toRef,toRefs } = VueReactivity;// ref测试let color = ref("red")effect(()=>{app1.style.backgroundColor = color.value})setTimeout(()=>{color.value = "blue"},1000)// toRefs测试let state = reactive({name:"王五",age:12})let {name,age} = toRefs(state)effect(()=>{app.innerHTML = `${name.value} - ${age.value}`})setTimeout(()=>{name.value = "张三123"},1000)
</script>

image-20240110140402875

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

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

相关文章

Java API集合(2)

1.时间日期类 1.1 Date类&#xff08;应用&#xff09; 计算机中时间原点 1970年1月1日 00:00:00 时间换算单位 1秒 1000毫秒 Date类概述 Date 代表了一个特定的时间&#xff0c;精确到毫秒 Date类构造方法 方法名说明public Date()分配一个 Date对象&#xff0c;并初始化…

Fog-Aware Adaptive YOLO for Object Detection in Adverse Weather

Abstract 提出了一种雾自适应YOLO算法。使用一种雾评估算法将图片分为有雾和无雾图片&#xff0c;随后将标准的YOLO应用于正常图片&#xff0c;自适应YOLO应用于有雾图片。 Method 目前的除雾方法去除雾霾时不考虑其雾度和发生频率。例如&#xff0c;图像自适应YOLO算法[6]试…

大数据小白初探HDFS从零到入门(一)

目录 1. 前言 2. 大数据的诞生 3.发展趋势及应用 4.离线计算和实时计算 5.大数据的特性 1. 前言 前两天把Hbase的初级入门知识整理了下,在文章中提到了“HDFS”这个大数据的基础,有同事小伙伴想要了解下这方面的知识,今天我把之前整理的内容也给同事讲了下,顺便我把他…

【已解决】Qt Creator设计模式被禁用不能点的原因及解决方案

Qt Creator 下载地址&#xff08;含历史版本&#xff09;&#xff1a;https://download.qt.io/official_releases/qtcreator/ 症状 Qt Creator 目前最新版为12.0.1&#xff0c;安装后打开.qml文件发现设计工具图标为禁用状态。 原因及解决方案 根据官网材料&#xff08;Qt C…

二叉树的基本操作

二叉树的基本操作 前文对二叉树的递归遍历作了一定的介绍&#xff0c;本文中我们继续深入理解递归&#xff0c;实现二叉树的基本操作。 1、获取树中结点个数 对于这个问题&#xff0c;我们有两种解决的思路。 1、子问题思路 我们通过结点左字树和右字树的结点总数加1来计算…

机器视觉检测设备在连接器外观缺陷检测中的应用

作为传输电流或信号连接两个有源器件的器件&#xff0c;连接器被广泛应用于各个行业&#xff0c;从手机、平板、电脑&#xff0c;到冰箱、空调、洗衣机&#xff0c;再到汽车、国防、航空&#xff0c;处处是它的所在。每个电子产品少了连接器将无法运作&#xff0c;因此&#xf…

20个超实用的JavaScript高级技巧

1.Intersection Observer: 用途&#xff1a; 监听元素与其父元素或视口的交叉情况。使用场景&#xff1a; 懒加载图片、实现无限滚动。 const callback (entries, observer) > {entries.forEach(entry > {if (entry.isIntersecting) {console.log(Element is in the v…

Python——面向对象案列

1. class User(object):#重写__int__初始化方法&#xff0c;该方法用来初始化属&#xff0c;在构建方法的时候&#xff0c;这个方法会自动触发&#xff0c;用来初始化属性def __init__(self): #name “” 这是一个局部变量#self类似指针 this#self.name类的属性print("构…

计算机网络-甘晴void学习笔记

计算机网络 计科210X 甘晴void 202108010XXX 文章目录 计算机网络期中复习1计算机网络和因特网1.1 因特网1.2 网络边缘1.3 网络核心1.4 分组交换的时延/丢包和吞吐量1.5 协议层次与服务模型 2 应用层原理2.1 应用层协议原理2.2 Web和Http2.3 因特网中的电子邮件2.4 DNS&#x…

K8S--部署Nacos

原文网址&#xff1a;K8S--部署Nacos-CSDN博客 简介 本文介绍K8S部署Nacos的方法。Nacos版本是&#xff1a;2.2.3。 部署方案 本文为了简单&#xff0c;使用此部署方式&#xff1a;使用本地pvconfigmap&#xff0c;以embedded模式部署单机nacos。以nodePort方式暴露端口。 …

linux Vim编辑器使用以及文件权限修改,kill process

选择编辑器&#xff1a;select-editor vim命令 基本操作 1.vim 文件名 &#xff1a;进入一般模式&#xff08;不能输入&#xff09; 2.按下 i 从一般模式&#xff0c;进入到插入编辑模式 3.按下esc从插入模式&#xff0c;退出到一般模式 4.输入:wq,退出编辑。 普通模式下&…

vectorCast——Probe point 功能实现故障注入,局部变量打印,断点调试。

选择一个测试用例,选择coverage窗口进行查看。点击edit probe point,如图所示绿色的小圆圈。选代码中选择需要打断点的地方进行点击。黑色的小圆点都可以选。点击黑色小圆点,小圆点变绿,表示打断点成功。此时就可以根据自己的需求在打断点的位置编写一些C语言的命令语句。点…

QT+OSG/osgEarth编译之八十:ive+Qt编译(一套代码、一套框架,跨平台编译,版本:OSG-3.6.5插件库osgdb_ive)

文章目录 1、osgdb_ive介绍2、文件分析3、pro文件4、编译实践1、osgdb_ive介绍 通过osgdb_ive,OpenSceneGraph开源库能方便地读取ive格式的三维文件。 ive(Interchangeable Virtual Environment)是一种三维图形数据交换格式,主要用于虚拟现实和增强现实领域的场景数据交…

线程同步--生产者消费者模型--单例模式线程池

文章目录 一.条件变量pthread线程库提供的条件变量操作 二.生产者消费者模型生产者消费者模型的高效性基于环形队列实现生产者消费者模型中的数据容器基于生产者消费者模型实现单例线程池 一.条件变量 条件变量是线程间共享的全局变量,线程间可以通过条件变量进行同步控制条件…

ffmpeg 常用命令行详解

概述 ffmpeg 是一个命令行音视频后期处理软件 1. 裁剪命令 参数说明 -i 文件&#xff0c;orgin.mp3 为待处理源文件-ss 裁剪时间&#xff0c;后跟裁剪开始时间&#xff0c;或者开始的秒数-t 裁剪时间output.mp3 为处理结果文件 ffmpeg -i organ.mp3 -ss 00:00:xx -t 120 o…

c语言-位段

文章目录 前言一、位段是什么&#xff1f;1.1 位段的声明 总结 前言 本篇文章介绍c语言的位段。 一、位段是什么&#xff1f; 概念&#xff1a;c语言允许在一个结构体中以位为单位来指定其成员所占内存长度。 1.1 位段的声明 位段的声明格式为&#xff1a; struct struct_…

速盾网络:香港cdn免备案搭建网站好吗

随着互联网的发展&#xff0c;网站建设已经成为许多企业的必备工具。然而&#xff0c;在中国大陆地区&#xff0c;建立网站需要进行备案申请&#xff0c;这给部分企业带来了不小的困扰。为了解决这一问题&#xff0c;一些企业开始寻找免备案的解决方案&#xff0c;而香港CDN免备…

Webpack5入门到原理12:处理 Html 资源

1. 下载包 npm i html-webpack-plugin -D 2. 配置 webpack.config.js const path require("path"); const ESLintWebpackPlugin require("eslint-webpack-plugin"); const HtmlWebpackPlugin require("html-webpack-plugin");module.expo…

无刷电机学习-原理篇

一、无刷电机的优点 使用一项东西首先就要明白为什么要使用它&#xff0c;使用它有什么优点。与有刷电机相比无刷电机除了控制繁琐几乎全是优点。 1、应用范围广&#xff1a;家用电器&#xff08;冰箱空调压缩机、洗衣机、水泵等&#xff09;、汽车、航空航天、消费品工业自动…

4个值得使用的免费爬虫工具

在信息时代&#xff0c;数据的获取对于各行业都至关重要。而在数据采集的众多工具中&#xff0c;免费的爬虫软件成为许多用户的首选。本文将专心分享四款免费爬虫工具&#xff0c;突出介绍其中之一——147采集软件&#xff0c;为您揭示这些工具的优势和应用&#xff0c;助您在数…