Vue 3.0双向数据绑定实现原理

Vue3 的数据双向绑定是通过响应式系统来实现的。相比于 Vue2，Vue3 在响应式系统上做了很多改进，主要使用了 Proxy 对象来替代原来的 Object.defineProperty。本文将介绍 Vue3 数据双向绑定的主要特点和实现方式。

1. 响应式系统

1.1. Proxy对象

Vue3 使用 JavaScript 的 Proxy 对象来实现响应式数据。Proxy 可以监听对象的所有操作，包括读取、写入、删除属性等，从而实现更加灵活和高效的响应式数据。

1.2. reactive函数

Vue3 提供了一个 reactive 函数来创建响应式对象，通过 reactive 函数包装的对象会变成响应式数据，Vue 会自动跟踪这些数据的变化。

import { reactive } from 'vue';const state = reactive({message: 'Hello Vue3'
});

1.3. ref函数

对于基本数据类型，如字符串、数字等，Vue3 提供了 ref 函数来创建响应式数据，使用 ref 包装的值可以在模板中进行双向绑定。

import { ref } from 'vue';const count = ref(0);

2. 双向绑定

Vue3 中的双向绑定主要通过 v-model 指令来实现，适用于表单元素，如输入框、复选框等。以下是一个简单的示例：

<template><input v-model="message" /><p>{{ message }}</p>
</template><script>
import { ref } from 'vue';export default {setup() {const message = ref('');return {message}}
}
</script>

在 Vue3 中，v-model 的使用更加灵活，可以支持自定义组件的双向绑定：

<template><CustomInput v-model:value="message" />
</template><script>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';export default {components: {CustomInput},setup() {const message = ref('');return {message}}
}
</script>

在 CustomInput 组件中：

<template><input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>
</template><script>
export default {props: {modelValue: String}
};
</script>

下面，我们来深入了解 Vue3 如何通过源码实现数据的双向绑定。

3. 源码实现

3.1. Proxy实现响应式

Vue3 使用 Proxy 对象来实现响应式数据。Proxy 允许我们定义基本操作的自定义行为，如读、写、删除、枚举等。

以下是 Vue3 响应式系统的核心代码片段：

function reactive(target) {return createReactiveObject(target, mutableHandlers);
}const mutableHandlers = {get(target, key, receiver) {// 依赖收集track(target, key);const res = Reflect.get(target, key, receiver);// 深度响应式处理if (isObject(res)) {return reactive(res);}return res;},set(target, key, value, receiver) {const oldValue = target[key];const result = Reflect.set(target, key, value, receiver);// 触发更新if (oldValue != value) {trigger(target, key);}return result;},// 其他处理函数 (deleteProperty, has, ownKeys 等)
};function createReactiveObject(target, handlers) {if (!isObject(target)) {return target;}const proxy = new Proxy(target, handlers);return proxy;
}

3.2. 依赖心集与触发更新

在响应式系统中，依赖收集和触发更新是两个核心概念。Vue3 使用 track和 trigger 函数来实现这两个功能。

const targetMap = new WeakMap();function track(target, key) {const effect = activeEffect;if (effect) {let depsMap = targetMap.get(target);if (!depsMap) {targetMap.set(target, (depsMap = new Map()));}let dep = depsMap.get(key);if (!dep) {depsMap.set(key, (dep = new Set()));}if (!dep.has(effect)) {dep.add(effect);effect.deps.push(dep);}}
}function trigger(target, key) {const depsMap = targetMap.get(target);if (!depsMap) return;const effects = new Set();const add = effectsToAdd => {if (effectsToAdd) {effectsToAdd.forEach(effect => effects.add(effect));}};add(depsMap.get(key));effects.forEach(effect => effect());
}

3.3. ref实现

对于基本数据类型，Vue3 提供了 ref 函数来创建响应式数据。ref 使用一个对象来包装值，并通过 getter和 setter 来实现响应式。

function ref(value) {return createRef(value);
}function createRef(rawValue) {if (isRef(rawValue)) {return rawValue;}const r = {__v_isRef: true,get value() {track(r, 'value');return rawValue;},set value(newVal) {if (rawValue !== newVal) {rawValue = newVal;trigger(r, 'value');}}};return r;
}function isRef(r) {return r ? r.__v_isRef === true : false;
}

3.4. v-model实现

Vue3 中的 v-model 实现依赖于响应式系统。

3.4.1. 编译时实现

// packages/compiler-core/src/transforms/vModel.ts
export const transformModel: NodeTransform = (node, context) => {if (node.type === NodeTypes.ELEMENT) {// 对每个元素节点执行此方法return () => {// 只处理有 v-model 指令的节点const node = context.currentNodelif (node.tagType === ElementTypes.ELEMENT) {const dir = findDir(node, 'model')if (dir && dir.exp) {// 根据节点类型调用不同的处理函数const { tag } = nodeif (tag === 'input') {processInput(node, dir, context)} else if (tag === 'textarea') {processTextArea(node, dir, context)} else if (tag === 'select') {processSelect(node, dir, context)} else if (!context.inSSR) {// 组件上的 v-modelprocessComponent(node, dir, context)}}}}}
}// 处理组件上的v-model
function processComponent(node: ElementNode,dir: DirectiveNode,context: TransformContext
) {// 获取 v-model 的参数，支持 v-model:arg 形式const { arg, exp } = dir// 默认参数是 'modelValue'const prop = arg ? arg : createSimpleExpression('modelValue', true)// 默认事件是 'update:modelValue'const event = arg? createSimpleExpression(`update:${arg.content}`, true): createSimpleExpression('update:modelValue', true)// 添加 prop 和 event 到 props 中const props = [createObjectProperty(prop, dir.exp!),createObjectProperty(event, createCompoundExpression([`$event => ((`, exp, `) = $event)`]))]// 将 v-model 转换为组件的 props 和事件node.props.push(createObjectProperty(createSimpleExpression(`onUpdate:modelValue`, true),createCompoundExpression([`$event => (${dir.exp!.content} = $event)`])))
}

3.4.2. 运行时实现

// packages/runtime-core/src/helpers/vModel.ts
export function vModelText(el: any, binding: any, vnode: VNode) {// 处理文本输入框的 v-modelconst { value, modifiers } = bindingel.value = value == null ? '' : value// 添加事件监听el._assign = getModelAssigner(vnode)const lazy = modifiers ? modifiers.lazy : falseconst event = lazy ? 'change' : 'input'el.addEventListener(event, e => {// 触发更新el._assign(el.value)})
}export function vModelCheckbox(el: any, binding: any, vnode: VNode) {// 处理复选框的 v-modelconst { value, oldValue } = bindingel._assign = getModelAssigner(vnode)// 处理数组类型的值（多选）if (isArray(value)) {const isChecked = el._modelValue? looseIndexOf(value, el._modelValue) > -1: falseif (el.checked !== isChecked) {el.checked = isChecked}} else {// 处理布尔值if (value !== oldValue) {el.checked = looseEqual(value, el._trueValue)}}
}// 辅肋函数
function getModelAssigner(vnode: VNode): (value: any) => void {// 获取模型赋值函数const fn = vnode.props!['onUpdate:modelValue']return isArray(fn) ? (value: any) => invokeArrayFns(fn, value) : fn
}