Vue2.x响应式简单讲解及示例

 class Vue{ constructor(options){ // 1、通过属性保存穿进来的属性 this.$options= options||{}; this.$data= options.data||{}; this.$el = typeof options.el ==='string' ? document.querySelector(options.el) : options.el; // 2、把data参数中的数据转换为getter和setter 挂载到Vue实例上 this._proxyData(this.$data) // 3、调用observe对象监视data数据的变化 new Observer(this.$data) // 4、调用compiler对象渲染页面 new Compiler(this) } _proxyData(data){ if (data&&Object.keys(data).length>0){ for (const key in data) { Object.defineProperty(this,key,{ configurable:true, enumerable:true, get(){ return data[key] }, set(value){ if (data[ke<i style="color:transparent">本文来源gaodai$ma#com搞$代*码6网</i>y]===value) { return; } data[key]=value; } }) } } } }

<span style="font-family: Arial, Verdana, sans-serif">//数据劫持   </span>class Observer { constructor(data) { this.walk(data) } walk(data) { //1、判断data是否是对象 if (!data || typeof data !== 'object') { return } //2、循环调用defineReactive进行数据劫持 Object.keys(data).forEach(key => { this.defineReactive(data, key, data[key]) }) } defineReactive(obj, key, val) { //创建通知者 const dep = new Dep() //使用walk把引用对象中的属性变成响应式的 this.walk(val) const that=this; Object.defineProperty(obj, key, { configurable: true, enumerable: true, get() { //通知者收集观察者 Dep.target && dep.addSub(Dep.target) return val; }, set(newVal) { if (newVal === val) { return; } val = newVal; that.walk(newVal) //被观察者发生变化的时候，通知者对象给每个观察者发送通知 dep.notify() } }) } }

//编译器   class Compiler { constructor(vm) { this.el = vm.$el; this.vm = vm; this.compile(this.el) } //编译模板 判断节点是文本节点还是元素节点 compile(el) { let childNodes = el.childNodes; //处理第一层子节点 Array.from(childNodes).forEach(node => { if (this.isTextNode(node)) { this.compileText(node) } else if (this.isElementNode(node)) { this.compileElement(node) } //如果当前节点还有子节点  递归调用编译指令 if (node.childNodes && node.childNodes.length) { this.compile(node) } }) } //编译元素节点，处理指令 compileElement(node) { //遍历所有的指令 Array.from(node.attributes).forEach(attr => { //判断是不是指令节点 if (this.isDirective(attr.name)) { const nodeName = attr.name; const key = attr.nodeValue; const directive = nodeName.substr(2) this.updater(directive,node,key) } }) } updater(directive,node,key){ const updaterFn = this[directive+"Updater"] updaterFn && updaterFn.call(this,node,this.vm[key],key) } //v-text textUpdater(node,value,key){ node.textContent=value //使用v-text表达式的地方就是一个观察者 new Watcher(this.vm,key,newValue => { node.textContent = newValue }) } //v-model modelUpdater(node,value,key){ node.value =value //使用v-model表达式的地方就是一个观察者 new Watcher(this.vm,key,newValue => { node.value = newValue }) //实现双向绑定 node.addEventListener('input',()=>{ this.vm[key] = node.value }) } //v-html htmlUpdater(node,value,key){ node.innerHTML = value //使用v-html表达式的地方就是一个观察者 new Watcher(this.vm,key,newValue => { node.innerHTML = newValue }) } //处理差值表达式 compileText(node) { //匹配差值表达式的正则 let reg = /\{\{(.+?)\}\}/ //用正则匹配node的textContent,如果匹配到了 就替换 if (reg.test(node.textContent)) { //获取插值表达式的key let key = RegExp.$1; let value = node.textContent; node.textContent = value.replace(reg, this.vm[key]) //使用差值表达式的地方就是一个观察者 new Watcher(this.vm,key,newValue => { node.textContent = newValue }) } } //是否是指令 isDirective(attrName) { return

以上就是Vue2.x响应式简单讲解及示例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权 
转载请注明原文链接：Vue2.x响应式简单讲解及示例 
 
 
 喜欢 (0)赏
[搞代码]
分享 (0)