浅谈实现vue2.0响应式的基本思路

最近看了vue2.0源码关于响应式的实现，以下博文将通过简单的代码还原vue2.0关于响应式的实现思路。

注意，这里只是实现思路的还原，对于里面各种细节的实现，比如说数组里面数据的操作的监听，以及对象嵌套这些细节本实例都不会涉及到，如果想了解更加细节的实现，可以通过阅读源码 observer文件夹以及instance文件夹里面的state文件具体了解。

首先，我们先定义好实现vue对象的结构

class vue {
  constructor(options) {
    this.$options = options;
    this._data = options.data;
    this.$el = document.queryselector(options.el);
  }
} 

第一步：将data下面的属性变为observable

使用object.defineproperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以触发了。

//数据劫持，监控数据变化
function observer(value, cb){
 object.keys(value).foreach((key) => definereactive(value, key, value[key] , cb))
}

function definereactive(obj, key, val, cb) {
 object.defineproperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: ()=>{
   return val
  },
  set: newval => {
   if(newval === val)
    return
   val = newval
  }
 })
} 

第二步：实现一个消息订阅器

很简单，我们维护一个数组，这个数组，就放订阅者，一旦触发notify，订阅者就调用自己的update方法

class dep {
 constructor() {
  this.subs = []
 }
 add(watcher) {
  this.subs.push(watcher)
 }
 notify() {
  this.subs.foreach((watcher) => watcher.cb())
 }
} 

每次set函数，调用的时候，我们触发notify，实现更新

那么问题来了。谁是订阅者。对，是watcher。。一旦 dep.notify()就遍历订阅者，也就是watcher，并调用他的update()方法

function definereactive(obj, key, val, cb) {
 const dep = new dep()
 object.defineproperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: ()=>{
   return val
  },
  set: newval => {
   if(newval === val)
    return
   val = newval
   dep.notify()
  }
 })
} 

第三步：实现一个 watcher

watcher的实现比较简单，其实就是执行数据变化时我们要执行的操作

class watcher {
 constructor(vm, cb) {
  this.cb = cb
  this.vm = vm
 }
 update(){
  this.run()
 }
 run(){
  this.cb.call(this.vm)
 } 
}

第四步：touch拿到依赖

上述三步，我们实现了数据改变可以触发更新，现在问题是我们无法将watcher与我们的数据联系到一起。

我们知道data上的属性设置definereactive后，修改data 上的值会触发 set。那么我们取data上值是会触发 get了。所以可以利用这一点，先执行以下render函数，就可以知道视图的更新需要哪些数据的支持，并把它记录为数据的订阅者。

function definereactive(obj, key, val, cb) {
 const dep = new dep()
 object.defineproperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: ()=>{
   if(dep.target){
    dep.add(dep.target)
   }
   return val
  },
  set: newval => {
   if(newval === val)
    return
   val = newval
   dep.notify()
  }
 })
}

最后我们来看用一个代理实现将我们对data的数据访问绑定在vue对象上

 _proxy(key) {
  const self = this
  object.defineproperty(self, key, {
   configurable: true,
   enumerable: true,
   get: function proxygetter () {
    return self._data[key]
   },
   set: function proxysetter (val) {
    self._data[key] = val
   }
  })
}

object.keys(options.data).foreach(key => this._proxy(key))

下面就是整个实例的完整代码

class vue {
 constructor(options) {
  this.$options = options;
  this._data = options.data;
  this.$el =document.queryselector(options.el);
  object.keys(options.data).foreach(key => this._proxy(key))
  observer(options.data)
  watch(this, this._render.bind(this), this._update.bind(this))
 }
 _proxy(key) {
  const self = this
  object.defineproperty(self, key, {
   configurable: true,
   enumerable: true,
   get: function proxygetter () {
    return self._data[key]
   },
   set: function proxysetter (val) {
    self._data[key] = val
   }
  })
 }
 _update() {
  console.log("我需要更新");
  this._render.call(this)
 }
 _render() {
  this._bindtext();
 }

 _bindtext() {
  let textdoms=this.$el.queryselectorall('[v-text]'),
  bindtext;
  for(let i=0;i<textdoms.length;i++){
    bindtext=textdoms[i].getattribute('v-text');
    let data = this._data[bindtext];
    if(data){
     textdoms[i].innerhtml=data;
    }   
  }
 }
}

function observer(value, cb){
 object.keys(value).foreach((key) => definereactive(value, key, value[key] , cb))
}

function definereactive(obj, key, val, cb) {
 const dep = new dep()
 object.defineproperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: ()=>{
   if(dep.target){
    dep.add(dep.target)
   }
   return val
  },
  set: newval => {
   if(newval === val)
    return
   val = newval
   dep.notify()
  }
 })
}
function watch(vm, exp, cb){
 dep.target = new watcher(vm,cb);
 return exp()
}

 class watcher {
 constructor(vm, cb) {
  this.cb = cb
  this.vm = vm
 }
 update(){
  this.run()
 }
 run(){
  this.cb.call(this.vm)
 } 
}

class dep {
 constructor() {
  this.subs = []
 }
 add(watcher) {
  this.subs.push(watcher)
 }
 notify() {
  this.subs.foreach((watcher) => watcher.cb())
 }
}
dep.target = null； 
var demo = new vue({
 el: '#demo',
 data: {
 text: "hello world"
 }
 })
 
settimeout(function(){
 demo.text = "hello new world"
 
}, 1000)

 <body>
  <div id="demo">
    <div v-text="text"></div>
  </div>
 </body> 

上面就是整个vue数据驱动部分的整个思路。如果想深入了解更细节的实现，建议深入去看vue这部分的代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。