这篇“怎么使用Object.defineProperty实现简易的vue功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用Object.defineProperty实现简易的vue功能”文章吧。
vue 双向绑定的原理
实现
vue的双向绑定,
v-text、
v-model、
v-on方法
Vue响应系统,其核心有三点:
observe、watcher、dep:
observe:遍历
data中的属性,使用
Object.defineProperty的
get/set方法- 对其进行数据劫持;
dep:每个属性拥有自己的消息订阅器
dep,用于存放所有订阅了该属性的观察者对象;
watcher:观察者(对象),通过
dep实现对响应属性的监听,监听到结果后,主动触发自己的回调进行响应。
class MinVue { constructor(options) { this.$data = options.data; this.$methods = options.methods; this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : el; this.bindData(this.$data); new Observer(this.$data); new Compile(this); } bindData(data) { Object.keys(data).forEach(key => { /* *当value值为基本数据类型时,this.key数据变化,对用的$data不会变化 *只有当value值为对象或者数组类型时,数据变化会同步 **/ Object.defineProperty(this, key, { enumerable: true, configurable: true, get: () => { return data[key]; }, set: newValue => { data[key] = newValue; }, }); }); } } class Observer { constructor(data) { this.work(data); } work(data) { if (Object.prototype.toString.call(data) === '[object Object]') { Object.keys(data).forEach(key => { this.defineReactive(data, key, data[key]); }); } } defineReactive(data, key, value) { const observer = this; const dep = new Dep(); // 当value为对象时,递归调用 this.work(value); /* *当一个变量需要影响多个元素时,即一个变量变化需要响应多个元素内容的变化 *先记录下所有的依赖 */ Object.defineProperty(data, key, { enumerable: true, configurable: true, get: () => { if (Dep.target) { dep.add(Dep.target); } return value; }, set: newValue => { value = newValue; // 赋新值后,新值有可能为对象,重新绑定get set方法 observer.work(newValue); dep.notify(); }, }); } } class Dep { constructor() { this.watcher = new Set(); } add(watcher) { if (watcher && watcher.update) this.watcher.add(watcher); } notify() { this.watcher.forEach(watch => watch.update()); } } class Watcher { constructor(vm, key, cb) { Dep.target = this; this.vm = vm; this.key = key; // 会触发Observer定义的getter方法,收集Dep.target this._old = vm.$data[key]; this.cb = cb; Dep.target = null; } update() { const newValue = this.vm.$data[this.key]; this.cb(newValue); this._old = newValue; } } class Compile { constructor(vm) { this.vm = vm; this.methods = vm.$methods; this.compile(vm.$el); } compile(el) { const childNodes = el.childNodes; Array.from(childNodes).forEach(node => { if (this.isTextNode(node)) { this.compileTextNode(node); } else if (this.isElementNode(node)) { this.compileElement(node); } if (node.childNodes && node.childNodes.length) this.compile(node); }); } isTextNode(node) { return node.nodeType === 3; } isElementNode(node) { return node.nodeType === 1; } compileTextNode(node) { // .+?正则懒惰匹配 const reg = /{{(.+?)}}/g; const text = node.textContent; if (reg.test(text)) { let key = RegExp.$1.trim(); node.textContent = text.replace(reg, this.vm[key]); new Watcher(this.vm, key, newValue => { node.textContent = newValue; }); } } compileElement(node) { const attrs = node.attributes; if (attrs.length) { Array.from(attrs).forEach(attr => { if (this.isDirective(attr.name)) { // 根据v-来截取一下后缀属性名 let attrName = attr.name.indexOf(':') > -1 ? attr.name.substr(5) : attr.name.substr(2); let key = attr.value; this.update(node, attrName, key, this.vm[key]); } }); } } isDirective(dir) { return dir.startsWith('v-'); } update(node, attrName, key, value) { if (attrName === 'text') { node.textContent = value; new Watcher(this.vm, key, newValue => { node.textContent = newValue; }); } else if (attrName === 'model') { node.value = value; new Watcher(this.vm, key, newValue => { node.value = newValue; }); node.addEventListener('input', e => { this.vm[key] = node.value; }); } else if (attrName === 'click') { node.addEventListener(attrName, this.methods[key].bind(this.vm)); } } }
测试 MinVue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <h4>{{ msg }}</h4> <p>{{ count }}</p> <h2>v-text</h2> <p v-text="msg"></p> <input type="text" v-model="count" /> <button type="button" v-on:click="increase">add+</button> <button type="button" v-on:click="changeMessage">change message!</button> <button type="button" v-on:click="recoverMessage">recoverMessage!</button> </div> </body> <script src="./js/min-vue.js"></script> <script> new MinVue({ el: '#app', data: { msg: 'hello,mini vue.js', count: 666, }, methods: { increase() { this.count++; }, changeMessage() { this.msg = 'hello,eveningwater!'; }, recoverMessage() { console.log(this); this.msg = 'hello,mini vue.js'; }, }, }); </script> </html>