vuejs|vuejs 数据绑定原理 vuejs数据绑定原理

Vuejs 使用get和set来实现数据绑定，心血来潮仿了一下，很粗糙，原理大概相同。

【vuejs|vuejs 数据绑定原理】use

var vm = new V({ el: '#container', template: '{{name}}: {{age}}', data: { name: 'zlx', age: '16' } });

change vm

vm.name = 'hsq'; vm.age = '14';

then the template will change immediately;

V.js is simple

+(function(w) { var V = function(options) { let { data, template, el } = options || {}; const context = this; this.node = document.querySelector(el); this.template = template; // 为每个属性添加get set方法 Object.keys(data).forEach(function(key) { context.define(context, key, data[key]); }); // 初始化时处理模版 this.renderTemplate(this.node, template); }; var prop = { define: function(obj, key, val) { Object.defineProperty(obj, key, { get() { return val; }, set(new_val) { // 通知更新 val = new_val; // 更新模版 this.renderTemplate(this.node, this.template); } }); }, renderTemplate: function(node, template) { // 处理模版 template = template.replace(/{{name}}/, this.name); template = template.replace("{{age}}", this.age); // 渲染模版 node.innerHTML = template; } }; V.prototype = prop; w.V = V; })(window);