当前位置：首页 > VUE

jq 实现 vue

2026-03-07 00:07:03VUE

jq 实现 Vue 数据绑定

使用 jq（轻量级 JavaScript 库）模拟 Vue 的数据绑定功能，可以通过监听数据变化并更新 DOM。以下是一个简化版的实现：

// 数据对象
const data = {
  message: 'Hello, jq!'
};

// 模拟 Vue 的数据劫持
function observe(data) {
  Object.keys(data).forEach(key => {
    let value = data[key];
    const subscribers = [];

    Object.defineProperty(data, key, {
      get() {
        if (subscribers.length > 0) {
          subscribers.forEach(sub => sub());
        }
        return value;
      },
      set(newValue) {
        if (newValue !== value) {
          value = newValue;
          subscribers.forEach(sub => sub());
        }
      }
    });
  });
}

// 模拟 Vue 的模板绑定
function bind(selector, data, key) {
  const element = $(selector);
  element.text(data[key]);

  data.__subscribers = data.__subscribers || {};
  data.__subscribers[key] = data.__subscribers[key] || [];
  data.__subscribers[key].push(() => {
    element.text(data[key]);
  });
}

// 初始化
observe(data);
bind('#message', data, 'message');

// 测试数据变化
setTimeout(() => {
  data.message = 'Data updated!';
}, 2000);

响应式更新机制

通过 Object.defineProperty 监听数据属性的变化，当数据被修改时自动触发订阅的更新函数。jq 负责 DOM 操作部分，将数据变化反映到页面上。

<div id="message"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="mini-vue.js"></script>

双向绑定扩展

实现类似 v-model 的双向绑定功能，监听输入框事件并更新数据：

function model(selector, data, key) {
  const element = $(selector);
  element.val(data[key]);

  element.on('input', () => {
    data[key] = element.val();
  });

  bind(selector, data, key);
}