原生加数组实现vue
原生 JavaScript 加数组实现 Vue 核心功能
使用原生 JavaScript 和数组模拟 Vue 的核心功能（如数据绑定、响应式更新）可以通过以下方式实现：
数据劫持与响应式
通过 Object.defineProperty 或 Proxy 监听数据变化，触发更新逻辑：
function observe(data) {
if (!data || typeof data !== 'object') return;
Object.keys(data).forEach(key => {
let value = data[key];
const dep = new Dep(); // 依赖收集器
observe(value); // 递归监听
Object.defineProperty(data, key, {
get() {
Dep.target && dep.addSub(Dep.target);
return value;
},
set(newVal) {
if (newVal === value) return;
value = newVal;
observe(newVal); // 新值也需要监听
dep.notify(); // 触发更新
}
});
});
}依赖收集与派发更新
实现简单的发布-订阅模式管理依赖：
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}
Dep.target = null; // 静态属性指向当前 Watcher观察者（Watcher）
连接数据与视图的桥梁：
class Watcher {
constructor(vm, key, cb) {
this.vm = vm;
this.key = key;
this.cb = cb;
Dep.target = this;
this.value = vm[key]; // 触发 getter
Dep.target = null;
}
update() {
const newValue = this.vm[this.key];
if (newValue !== this.value) {
this.value = newValue;
this.cb(newValue);
}
}
}数组方法劫持
重写数组原型方法以实现响应式：
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
const original = arrayProto[method];
arrayMethods[method] = function(...args) {
const result = original.apply(this, args);
const ob = this.__ob__;
let inserted;
if (['push', 'unshift', 'splice'].includes(method)) {
inserted = args.slice(0, method === 'splice' ? args[1] : args.length);
}
if (inserted) ob.observeArray(inserted);
ob.dep.notify(); // 触发更新
return result;
};
});简易模板编译
通过正则匹配实现模板插值：
function compile(el, vm) {
vm.$el = document.querySelector(el);
const fragment = document.createDocumentFragment();
let child;
while (child = vm.$el.firstChild) {
fragment.appendChild(child);
}
function replace(frag) {
Array.from(frag.childNodes).forEach(node => {
const txt = node.textContent;
const reg = /\{\{\s*(.*?)\s*\}\}/g;
if (node.nodeType === 3 && reg.test(txt)) {
const key = RegExp.$1.trim();
new Watcher(vm, key, newVal => {
node.textContent = txt.replace(reg, newVal);
});
node.textContent = txt.replace(reg, vm[key]);
}
if (node.childNodes && node.childNodes.length) {
replace(node);
}
});
}
replace(fragment);
vm.$el.appendChild(fragment);
}整合实现
最终组合成简易 Vue 类：
class Vue {
constructor(options) {
this.$options = options;
this.$data = options.data();
observe(this.$data);
Object.keys(this.$data).forEach(key => {
Object.defineProperty(this, key, {
get() {
return this.$data[key];
},
set(newVal) {
this.$data[key] = newVal;
}
});
});
compile(options.el, this);
}
}使用示例
<div id="app">
{{ message }}
<div>{{ count }}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue',
count: 0
};
}
});
setInterval(() => vm.count++, 1000);
</script>这种方法实现了 Vue 最基础的数据响应式、依赖收集和模板编译功能，实际 Vue 的实现还包含虚拟 DOM、组件系统等更复杂的机制。
