defineModel中get与set方法如何正确实现数据绑定？

Question

在使用 `defineModel` 实现数据绑定时，如何正确通过 `get` 与 `set` 方法实现响应式更新是一个常见问题。开发者常困惑于为何修改数据时未触发视图更新。其关键在于必须在 `set` 方法中调用 `trigger` 或通知机制，同时在 `get` 中进行依赖收集。若忽略这些步骤，将导致数据变化无法被检测，从而破坏数据绑定的响应性。正确实现 `get` 与 `set` 是保障数据与视图同步的核心。

Answer 1

一、响应式数据绑定的基础理解

在现代前端框架中，如 Vue.js 或 ReactiveX 模式中，`defineModel` 是一种用于创建响应式属性的常见方法。它通常通过 `get` 与 `set` 方法实现对数据访问和修改的拦截。

开发者常遇到的问题是：为何在修改某个模型属性时，视图并未更新？根本原因在于未正确使用依赖收集（Dependency Collection）与触发机制（Trigger Mechanism）。

• get 方法用于获取值，并在此阶段进行依赖收集。
• set 方法用于设置值，并在此阶段通知所有依赖项进行更新。

二、深入解析 defineModel 的实现原理

`defineModel` 本质上是一个封装了响应式逻辑的函数，其内部利用了 JavaScript 的 `Object.defineProperty` 或 `Proxy` 来拦截对象属性的读写操作。

function defineModel(obj, key, value) {
    let _value = value;
    Object.defineProperty(obj, key, {
        get() {
            // 收集依赖
            Dep.target && dep.addSub(Dep.target);
            return _value;
        },
        set(newValue) {
            if (newValue !== _value) {
                _value = newValue;
                // 触发更新
                dep.notify();
            }
        }
    });
}

方法	作用	关键点
get	获取属性值并记录依赖	调用 Dep 收集当前 Watcher
set	设置属性值并通知更新	判断值是否变化，若变化则调用 notify

三、从依赖管理到视图更新的完整流程

graph TD A[数据变更] --> B{值是否改变?} B -- 是 --> C[执行 set 方法] C --> D[触发 dep.notify()] D --> E[遍历 subs 数组] E --> F[调用每个 Watcher 的 update 方法] F --> G[视图重新渲染] B -- 否 --> H[不触发更新]

上述流程展示了从数据变更到视图更新的全过程。其中：

• `Dep` 是一个依赖容器，负责存储订阅该属性的所有 Watcher。
• `Watcher` 是观察者，代表一个具体的更新任务，例如 DOM 更新。
• `notify()` 是触发更新的核心方法。

四、典型问题分析与解决方案

以下是一些常见的错误实践及对应的修复方式：

1. 问题一：没有在 set 中调用 notify
   导致即使数据改变也不会触发视图更新。
   解决：确保在 set 方法中加入 `dep.notify()`。
2. 问题二：未在 get 中收集依赖
   导致后续的数据变化无法追踪。
   解决：在 get 方法中添加 `dep.addSub(Dep.target)`。
3. 问题三：忽略值比较
   频繁设置相同值可能引发不必要的更新。
   解决：在 set 中加入 `if (newValue !== _value)` 判断。