Vue 源码解读：Reactive1

2023-10-16 05:02:04

Vue 源码解读：Reactive1

ref 的使用

ref 是 Vue 中用于创建响应式变量的函数，它可以接受一个参数，即初始值。当使用 ref 时，Vue 会创建一个新的响应式对象，并将初始值赋给它。这个响应式对象可以通过 ref.value 来访问和修改。

例如，以下代码创建了一个名为 count 的响应式变量，并将其初始值设置为 0：

const count = ref(0);

现在，count.value 的值为 0。我们可以通过 count.value 来访问和修改这个值。例如，以下代码将 count.value 的值加 1：

count.value++;

现在，count.value 的值为 1。

shallow 的作用

shallow 是 ref 函数的一个可选参数，它表示是否对 ref 的值进行深度响应式处理。如果 shallow 为 true，则 ref 的值不会进行深度响应式处理，即不会对 ref 的值进行响应式追踪。

例如，以下代码创建了一个名为 user 的响应式对象，并将其初始值设置为一个包含 name 和 age 两个属性的对象：

const user = ref({
  name: 'John Doe',
  age: 30
});

现在，user.value.name 的值为 'John Doe'，user.value.age 的值为 30。我们可以通过 user.value.name 和 user.value.age 来访问和修改这两个值。

如果我们想对 user.value 进行深度响应式处理，则可以将 shallow 参数设置为 false。例如，以下代码将对 user.value 进行深度响应式处理：

const user = ref({
  name: 'John Doe',
  age: 30
}, false);

现在，user.value.name 的值为 'John Doe'，user.value.age 的值为 30。我们可以通过 user.value.name 和 user.value.age 来访问和修改这两个值。但是，如果我们修改了 user.value.name 或 user.value.age 的值，则 Vue 也会相应地更新 user.value 对象。

convert 函数的具体实现

convert 函数是 Vue 中用于将一个对象转换为响应式对象的函数。convert 函数的具体实现如下：

function convert(obj) {
  if (isArray(obj)) {
    return obj.map(convert);
  } else if (isObject(obj)) {
    return createReactiveObject(obj, true);
  } else {
    return obj;
  }
}

convert 函数首先判断 obj 是否为一个数组。如果是，则将数组中的每个元素都转换为响应式对象。然后判断 obj 是否为一个对象。如果是，则创建一个响应式对象，并将 obj 的属性和值都添加到响应式对象中。最后，如果 obj 不是数组或对象，则直接返回 obj。

get 和 set 操作的触发时机

get 和 set 操作分别是访问和修改响应式变量的值时触发的操作。get 操作会在访问响应式变量的值时触发，set 操作会在修改响应式变量的值时触发。

例如，以下代码访问了 count.value 的值：

const value = count.value;

当执行这段代码时，get 操作会被触发。

以下代码修改了 count.value 的值：

count.value++;

当执行这段代码时，set 操作会被触发。

get 和 set 操作的触发时机对于 Vue 的响应式系统非常重要。get 操作可以使 Vue 知道响应式变量的值被访问了，从而可以将响应式变量的值与 DOM 元素绑定起来。set 操作可以使 Vue 知道响应式变量的值被修改了，从而可以更新与响应式变量绑定的 DOM 元素的值。

Vue 的响应式系统

Vue 的响应式系统是一个非常强大的系统，它可以自动跟踪响应式变量的值的变化，并相应地更新与响应式变量绑定的 DOM 元素的值。Vue 的响应式系统主要包括以下几个部分：

watch：watch 是一个用于监听响应式变量的值变化的函数。当响应式变量的值发生变化时，watch 函数就会被触发。
computed：computed 是一个用于计算响应式变量的值的函数。computed 函数的返回值是一个响应式变量，当 computed 函数的依赖项发生变化时，computed 函数就会重新计算并更新其返回值。
effect：effect 是一个用于执行副作用的函数。effect 函数的副作用会在响应式变量的值发生变化时执行。
scheduler：scheduler 是一个用于管理任务执行顺序的函数。scheduler 会将需要执行的任务加入到一个队列中，然后按照一定的顺序执行这些任务。
update：update 是一个用于更新 DOM 元素的值的函数。update 函数会将响应式变量的值更新到与响应式变量绑定的 DOM 元素中。
emit：emit 是一个用于触发事件的函数。emit 函数会将事件触发到事件总线上，然后事件总线上的其他监听器就会被触发。

Vue 的响应式系统是一个非常复杂