Reactivity(反应性)



Reactivity 

Reactivity is a phenomenon that occurs when individuals alter their performance or behavior due to the awareness that they are being observed.[1] The change may be positive or negative, and depends on the situation. It is a significant threat to a research study's internal validity and is typically controlled for using blind experiment designs.

There are several forms of reactivity. The Hawthorne effect occurs when research study participants know they are being studied and alter their performance because of the attention they receive from the experimenters. The John Henry effect, a specific form of Hawthorne effect, occurs when the participants in the control group alter their behavior out of awareness that they are in the control group.

Reactivity is not limited to changes in behaviour in relation to being merely observed; it can also refer to situations where individuals alter their behavior to conform to the expectations of the observer. An experimenter effect occurs when the experimenters subtly communicate their expectations to the participants, who alter their behavior to conform to these expectations. The Pygmalion effect occurs when students alter their behavior to meet teacher expectations. Both experimenter effects and Pygmalion effects can be caused by bias and stereotyping, as demonstrated by studies involvingstereotype threat.









from: https://en.wikipedia.org/wiki/Reactivity_(psychology)




Vue3 中的响应式系统是其最重要的特之一,它使得我们可以更加方便地处理数据的变化,同时也是 Vue3 中许多其他特的基础。下面我将详细介绍 Vue3 中响应式系统的原理和实现方式。 ## 响应式系统的原理 Vue3 的响应式系统基于 ES6 中的 Proxy 实现,具体而言,当我们创建一个响应式对象时,会使用 Proxy 对这个对象进行包装,并拦截这个对象上的所有属的 get 和 set 操作,当属被获取或者修改时,会触发相应的操作。同时,Vue3 还会维护一个依赖收集的系统,用于收集属的依赖关系,当属被修改时,会自动触发依赖关系中的更新操作。 举个例子,我们可以通过以下方式创建一个响应式对象: ```javascript import { reactive } from 'vue' const state = reactive({ count: 0 }) ``` 这个对象被 reactive 包装后,我们可以像访问普通对象一样访问它的属: ```javascript console.log(state.count) // 0 ``` 但是,当我们修改这个对象的属时,Vue3 会自动检测到这个修改,并触发相应的更新操作: ```javascript state.count++ ``` ## 响应式系统的实现方式 在 Vue3 中,响应式系统的核心代码位于 `@vue/reactivity` 模块中,包括以下几个部分: 1. `reactive` 函数:用于将一个普通对象转换为响应式对象。 2. `effect` 函数:用于创建一个响应式的副作用函数,会自动收集依赖关系并在依赖发生变化时重新执行。 3. `ref` 函数:用于创建一个可变的响应式对象。 4. `computed` 函数:用于创建一个计算属,会自动收集依赖关系并在依赖发生变化时重新计算。 其中,`reactive` 函数是最核心的部分,它的实现方式如下: ```javascript export function reactive(target) { if (target && typeof target === 'object') { if (target instanceof Array) { target.forEach((item, index) => { target[index] = reactive(item) }) } else { Object.keys(target).forEach(key => { target[key] = reactive(target[key]) }) } return new Proxy(target, { get(target, key, receiver) { track(target, key) return Reflect.get(target, key, receiver) }, set(target, key, value, receiver) { const result = Reflect.set(target, key, value, receiver) trigger(target, key) return result }, deleteProperty(target, key) { const result = Reflect.deleteProperty(target, key) trigger(target, key) return result } }) } return target } ``` 这段代码会递归地将一个对象的所有属都转换为响应式对象,并使用 Proxy 对这个对象进行包装。在 `get` 和 `set` 操作中,我们会调用 `track` 和 `trigger` 函数来进行依赖收集和触发更新。 具体而言,`track` 函数用于收集依赖关系,它会将当前正在执行的副作用函数和当前属的键值对存储到一个全局变量中。而 `trigger` 函数则用于触发更新操作,它会遍历存储的依赖关系,并依次执行相应的副作用函数。 除了 `reactive` 函数之外,`effect` 函数、`ref` 函数和 `computed` 函数的实现方式也都基于这个原理,它们都会使用 `track` 和 `trigger` 函数进行依赖收集和触发更新。 综上所述,Vue3 的响应式系统基于 ES6 中的 Proxy 实现,并通过依赖收集的方式自动触发更新操作。这个系统的实现方式相对简单,但非常高效且易于扩展,是 Vue3 最重要的特之一。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值