微信号:csdnbigdata

介绍:CSDN分享Hadoop、Spark、NoSQL/NewSQL、HBase、Impala、内存计算、流计算、机器学习和智能算法等相关大数据观点,提供云计算和大数据技术、平台、实践和产业信息等服务.

深入讲解 Vue 中实现原理

2018-04-11 21:30 张振


前言


随着 Vue2.0 的发布,前端入门的要求也越来越低,已至于 Vue 已经成为一个前端的标配,最近也面了很多前端开发工程师,发现大部分都停留在用的阶段上,建议大家看看源码,学学 Vue 的思想。


本文中,读者配合作者的 GitHub 去实践,相信会有很大的提升。


双向数据绑定 Model View ViewModel

 

Angular1.x 当中的双向数据绑定是通过监听的方式来实现的,核心思想为脏值检查,Angular 通过 $watch()去监听值得变化,然后调用 $apply()/ $digest()方法来实现。


Vue 的双向数据绑定是通过数据劫持 + 发布订阅模式(不兼容低版本)+ 数据代理的方式来实现的。


今天主要讲 Vue


Vue 不兼容低版本,是因为低版本浏览器不兼容 Object.defineProperty 这个属性,我们首先了解一下正常情况下定义的对象。

   var obj = {}
   obj.公众号 =  '内推猿',   //console.log(obj) {"公众号","内推猿"}
   delect obj.公众号   //console.log(obj) {}


如果我们用到了 Object.defineProperty 这个属性再去定义一个对象,在控制台中你就会发现不同了, 在原型链上多了一些方法。

  var  obj  = {};
    Object.defineProperty(obj, '公众号',{
      configurable:true,  //属性值可以被删除
      writable:true,  //对属性可进行编写
      enumerable: true, //可枚举
      value:'内推猿'
    })


想要了解这些属性的全部参数的话,可以去 MDN 上查看一下。我们在进行值修改的时候,就会用到 get、set方法。

 var  obj  = {};
    Object.defineProperty(obj, '公众号',{
      configurable:true,  //属性值可以被删除
      enumerable: true, //可枚举
      get() {        //获取obj.公众号值得时候 会调用get方法
        return '内推猿'
      }      set() {        //给obj 属性赋值
      }
    })
console.log(obj.公众号)  //内推猿


我们通常写 Vue 的时候,都会这样写:

<body>
  <div id="app">
      {{gongzhonghao}}  </div></body><script>    let mvvm = new Mvvm({        el: '#app',        data:{ gongzhonghao:'内推猿'}    })</script>


那么如何去实现呢?我们用这个 Object.defineProperty 这个属性来实现数据劫持(Observer)。


数据劫持:观察对象,通过递归给每一个对象增加 Object.definePropery,在 set 方法中触发 observe 方法,就能监听到数据的变化,如果数据类型是 {a:{b:1}}多层的,那么就要用到递归去实现。

function observe (data) {    return new Observe(data)
}function Observe (data) {    if(!data || typeof data !== 'object')  return
    //把data属性 通过Object.definePropert  来定义属性
    for (let key in data) {   
        let value = data[key]  
        //递归方式绑定所有属性    数据是 {a:{b:1}}
        observe(value)
        Object.defineProperty(data, key, {
            enumerable:true,            get() {                return value
            },            set(newValue) {                //如果值没有发生改变的话  
                if(newValue  == value) return
                //重新赋值
                value = newValue                observe(value)            },        })    } }


Vue 中的数据代理


我们会遇到一些比较复杂的数据结构,例如 data:{ gongzhonghao:'内推猿', msg:{vx:214464812,creator: 'zhangzhen' }}


如果你用的是我上面写的 observe 方法就会发现,我要获取 creator 字段的话,需要通过mvvm._data.msg.creator ..... 的形式来获取值。遇到再复杂的数据结构就会更乱。然而我们想要通过mvvm.msg 方式来获取数据(去掉_data)。去掉复杂的查询方式,所以用到了数据代理的方式来处理以上问题,其中 this 代表的是整个数据。

   //数据代理方式
   for(let key in data ) {
     Object.defineProperty(this, key ,{
        enumerable:true,        get() {            return this._data[key];
        },        set(newValue){            this._data[key] = newValue
        }
     })
   }


Vue 特点,不能新增不存在的属性 ,因为不存在的属性没有 get、set 方法。而 Vue 当中的深度响应,会给每一个新对象增加数据劫持,从而去监控新对象的变化。


模板编译 Compile


Vue 项目中我们通过 {{}} 的方式来替换 data 值,首先我们通过 #el 来确定编译的范围,创建createDocumentFragment 标签,在内存中去更换我们的模板减少 DOM 操作,通过 nodeType 来判断当前的节点,利用正则来匹配 {{}} 通过递归的方式来更换每一个数据。

function Compile(el,vm) {
  vm.$el = document.querySelector(el);  var Fragment = document.createDocumentFragment();  //把模板放入内存当中
  while (child = vm.$el.firstChild) {
    Fragment.appendChild(child)
  }
  replace(Fragment,vm)
  vm.$el.appendChild(Fragment)
}function replace (Fragment,vm){    //类数组转化成数组
  Array.from(Fragment.childNodes).forEach(function(node){    var text = node.textContent ;    var reg = /\{\{(.*)\}\}/;    if(node.nodeType == '3' && reg.test(text)) {        //console.log(RegExp.$1)
        let ary = RegExp.$1.split('.')        //console.log(ary)  [msg, vx]   
        let val = vm  
        ary.forEach(function(key){  //取this.msg  /this.gongzhonghao
            val = val[key]
        });
        node.textContent = text.replace(reg,val)
    }    if(node.childNodes){
        replace(node,vm)
    }
  })
}

发布订阅模式(重点)

以上的操作已经完成了一个简单的数据与模板的绑定,那么大家关心的数据驱动该如何实现?当一个值发生变化的时候视图也发生变化,这就需要我们去订阅一些事件。

ep.addSub(Dep.target) 是增加订阅,dep.notify 函数是发布事件。当值发生改变的时候我们去发布这个事件(调用dep.notify())。

observe(value)
Object.defineProperty(data, key, {
    enumerable:true,    get() {
        console.log(Dep.target)  
        Dep.target && dep.addSub(Dep.target)  //[增加watcher]
        return value
    },    set(newValue) {        //如果值没有发生改变的话
        if(newValue  == value) return
        //重新赋值
        value = newValue        observe(value)        dep.notify()  //让所有的watcher的update 执行    }, })

如何去订阅一些事件

说到订阅,那么问题来了,谁是订阅者?怎么往订阅器添加订阅者?在 dep-subs.js 中我指定了 Wathcher 是订阅者。首先要增加 Wathcher 是订阅者,把订阅者放到订阅器(subs)中当值发生变化的时候,订阅器就会调用 update 方法去发布一些事件。

增加订阅
  //绑定的方法都有一个update属性
  function Dep (){    this.subs = []  //订阅器
  }  //增加订阅
  Dep.prototype.addSub = function(watcher) {     this.subs.push(watcher)
  }
发布订阅
//通知Dep.prototype.notify = function() {   this.subs.forEach(watcher => watcher.update())
}
观察者
function Watcher(vm,exp,fn){   this.vm = vm   this.exp = exp   this.fn = fn         //添加到订阅中
   Dep.target = this
   var val  = vm   var arr = exp.split('.');
   arr.forEach(function(key){
       val = val[key]
   })     //在这里调用objectDefineProperty中get方法
   Dep.target = null}
Watcher.prototype.update = function() {  //获取新值
  var val  = this.vm  var arr = this.exp.split('.');
  arr.forEach(function(key){
      val = val[key]
  })  this.fn(val);
}


阅读全文请扫描

下方二维码,

还可以加入读者圈与作者聊天~:




 
CSDN大数据 更多文章 聊下大厂都在用的“用户拉新”手段:一级分销 技术人不会学习,35岁必然要焦虑 【剧透】阿里数据库已备下双·11神器:新一代X-DB 使用 Dubbo 搭建一个简单的分布式系统 常用 XML 解析技术
猜您喜欢 多key业务,数据库水平切分架构一次搞定 UITableView优化技巧 如何解决机器学习中的数据不平衡问题? Go 性能优化技巧 4\/10 为什么我要做这样的活动