手写双向绑定(简陋版)-之后会实现Vue版本

2021-05-14 161 阅读1分钟

原理

现在流行的几个主流框架Vue/react等都是实现双向绑定，这次主要对Vue的两个版本的双向绑定进行解析，Vue 2.x版本是通多Object.defineProperty实现数据劫持，Vue 3.x通过proxy实现数据劫持，前者对新增删除属性不产生效果，数组也不生效，但是应用范围广，后者对新增删除属性，数组都产生效果，但是游览器支持做的不够好

Object.defineProperty版本

// 数据
const data = {
  text: 'default'
};
const input = document.getElementById('input');
const span = document.getElementById('span');
// 数据劫持
Object.defineProperty(data, 'text', {
  // 数据变化 --> 修改视图
  set(newVal) {
    input.value = newVal;
    span.innerHTML = newVal;
  }
});
// 视图更改 --> 数据变化
input.addEventListener('keyup', function(e) {
  data.text = e.target.value;
});

Proxy版本

// 数据
const data = {
  text: 'default'
};
const input = document.getElementById('input');
const span = document.getElementById('span');
// 数据劫持
const handler = {
  set(target, key, value) {
    target[key] = value;
    // 数据变化 --> 修改视图
    input.value = value;
    span.innerHTML = value;
    return value;
  }
};
const proxy = new Proxy(data, handler);

// 视图更改 --> 数据变化
input.addEventListener('keyup', function(e) {
  proxy.text = e.target.value;
});