MVVM（Model-View-ViewModel）是一种设计模式，特别是在前端开发中被广泛应用，它通过数据绑定使得View层和ViewModel层可以自动同步，极大地简化了UI和业务逻辑的交互。双向绑定是MVVM模式的核心特性，使得视图和模型之间可以相互更新。
在MVVM中，有几个关键的概念：
1. **Directive（指令）**：这是自定义的执行函数，用来扩展DOM的功能。例如，在Vue.js中，`v-click`和`v-bind`都是指令，它们封装了DOM的某些特定操作。
2. **Filter（过滤器）**：过滤器用于对原始数据进行处理，然后传递给指令或下一个过滤器。比如，我们可以创建一个`formatTime`过滤器，将时间戳转换为指定的日期格式。
3. **表达式**：这些类似前端模板语言的表达式，根据条件控制页面内容的显示，如`if...else`语句。
4. **ViewModel**：ViewModel是Model数据在内存中的表示，它提供了读取和修改数据的方法，并且与View进行双向绑定。
**双向绑定（数据变更检测）**：
- **View层到Model层**：当View层的元素发生变化，比如用户输入，可以通过`onchange`等事件监听器触发对Model数据的更新。
- **Model层到View层**：当Model层的数据变化时，需要自动更新View。有多种实现方式，包括：
- **手动触发绑定**：在数据变化后，需要显式调用函数来更新View。
- **数据劫持**：利用`Object.defineProperty`或`Proxy`来监听Model对象的get和set操作，当数据变化时，自动触发View的更新。
**手动触发绑定**的示例代码如下：
```javascript
let elems = [document.getElementById('el'), document.getElementById('input')];
let data = { value: 'hello'};
let directive = {
text: function(text) { this.innerHTML = text },
value: function(value) { this.setAttribute('value', value); this.value = value }
};
// 扫描元素并绑定指令
function scan() {
// ...
}
// ViewModel更新函数
function ViewModelSet(key, value) {
data[key] = value;
scan();
}
// 监听View变化并更新ViewModel
elems[1].addEventListener('keyup', function(e) {
ViewModelSet('value', e.target.value);
}, false);
// 初始化
scan();
```
**数据劫持**的实现则通过`Object.defineProperty`来监听数据变化：
```javascript
let elems = [document.getElementById('el'), document.getElementById('input')];
let data = {
value: 'hello',
__defineGetter__: function(key) {
return this[key];
},
__defineSetter__: function(key, value) {
this[key] = value;
// 更新View
scan();
}
};
```
以上就是MVVM双向绑定的基本概念和两种常见的实现方式。通过这种方式，开发者可以专注于业务逻辑，而无需关心UI如何响应数据的变化，从而提高了开发效率。
