Vue 3 双向数据绑定实现原理 - 使用 ref、reactive 和 toRefs

Vue 3 使用了全新的响应式系统来实现双向数据绑定。通过 ref 和 reactive 函数创建响应式数据，当数据发生变化时，视图会自动更新。

• ref 函数用于创建简单的响应式数据，返回一个包装对象，包含 value 属性用于访问和修改数据。

import { ref } from 'vue';

const count = ref(0); // 创建响应式数据

console.log(count.value); // 输出 0

count.value++; // 修改数据

console.log(count.value); // 输出 1，视图会自动更新

• reactive 函数用于创建包含多个属性的响应式对象。它接收一个普通 JavaScript 对象，并返回一个响应式代理对象。

import { reactive } from 'vue';

const user = reactive({
  name: 'John',
  age: 20
});

console.log(user.name); // 输出 'John'

user.name = 'Mike'; // 修改属性

console.log(user.name); // 输出 'Mike'，视图会自动更新

• toRefs 函数可以将响应式对象转换为具有 ref 属性的普通对象，方便在模板中使用。

import { reactive, toRefs } from 'vue';

const user = reactive({
  name: 'John',
  age: 20
});

const userRefs = toRefs(user); // 转换为具有 ref 属性的对象

console.log(userRefs.name.value); // 输出 'John'

user.name = 'Mike'; // 修改属性

console.log(userRefs.name.value); // 输出 'Mike'，视图会自动更新

除了使用 ref、reactive 和 toRefs，Vue 3 还通过 v-model 指令在模板中直接实现双向数据绑定。