实现一个简单的vue

实现一个简单的vue

以下仅仅实现了vue里非常简单的功能

function query(el) {
    if (typeof el === 'string') {
      const selected = document.querySelector(el)
      if (!selected) {
        return document.createElement('div')
      }
      return selected
    } else {
      return el
    }
  }

function Vue(options) {
    let vm = this
    vm._data = options.data
    vm.$el = options.el && query(options.el)
    initData(vm)
    this.methods = options.methods
    observe(vm._data)
    new Compile(vm)
 }
复制代码

第一步：initData

将options的data数据挂载到实例的对象上

function initData(vm) {
  const sharedPropertyDefinition = {
    enumerable: true,
    configurable: true
  }
  Object.keys(vm._data).forEach(function(key) {
    proxy(vm, '_data', key)
  })

  function proxy(target, sourcekey, key) {
    sharedPropertyDefinition.get = function() {
      return target[sourcekey][key]
    }
    sharedPropertyDefinition.set = function(val) {
      target[sourcekey][key] = val
    }
    Object.defineProperty(target, key, sharedPropertyDefinition)
  }
}
复制代码

第二步：observe

Observer中的defineReactive方法中，获取vm实例的data时，当Dep.target存在时，就会把Dep.target添加到观察者列表中，Dep.target就是Watcher的实例， 当data数据发生改变时，通知观察列表进行数据更新

//监听数据的改变
function observe(data) {
  if (typeof data !== 'object') {
    return
  }
  return new Observer(data)
}


function Observer(data) {
  this.data = data
  this.walk()
}
Observer.prototype = {
  walk() {
    Object.keys(this.data).forEach(key => {
      this.defineReactive(this.data, key)
    })
  },
  defineReactive(data, key) {
    var dep = new Dep()
    var val = data[key]
    var childObj = observe(val)
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get() {
        if (Dep.target) {
          dep.addSub(Dep.target) //添加到观察者列表
        }
        return val
      },
      set(newVal) {
        if (newVal === val) {
          return
        }
        val = newVal
        // 数据发生改变时，通知所有的观察者列表
        dep.notify()
      }
    })
  }
}

function Dep() {
  this.subs = []//观察者列表
}
Dep.prototype = {
  // 添加观察者列表
  addSub(sub) {
    this.subs.push(sub);
  },
  // 通知观察者列表
  notify() {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

复制代码

当实例化Watcher时，会执行Watcher下的get方法，此时便会将实例化的对象赋值给Dep.target,然后强制执行Observer里的get函数,将当前的观察对象添加到观察者列表中

调用实例化的Watcher对象中的update方法，会执行实例化Watcher对象时传入的回调函数，这个回调函数就是更新页面显示用的。这样就实现了数据改变，页面相应的元素自动改变

function Watcher(vm, exp, cb) {
  this.vm = vm
  this.exp = exp
  this.cb = cb
  this.value = this.get()
}
Watcher.prototype = {
  update() {
    var value = this.vm._data[this.exp]
    var oldVal = this.value
    if (value !== oldVal) {
      this.value = value
      this.cb.call(this.vm, value, oldVal)
    }
  },
  get() {
    Dep.target = this
     //强制执行Observer里的get函数,将当前的观察对象添加到观察者列表中
    var value = this.vm._data[this.exp]
    Dep.target = null
    return value
  }
}
复制代码

第三步：compile

编译过程中

• 1、创建一个空的fragment，将模板元素添加到fragement上
• 2、将fragement的上的元素进行编译
• 3、将fragement添加到页面上

当执行Compile实例下compileText执行时，就会实例化Watcher,这样就实现了当vm下的数据发生改变时，就会执行传入的回调函数

function Compile(vm) {
  this.vm = vm
  this.el = vm.$el
  this.fragment = null
  this.init()
}
Compile.prototype = {
  init() {
    if (this.el) {
      //
      this.fragment = this.nodeToFragment(this.el)
      this.compileElement(this.fragment)
      this.el.appendChild(this.fragment);
    }
  },
  nodeToFragment(el) {
    // 创建一个空的fragment，将模板元素添加到fragement上
    var fragment = document.createDocumentFragment()
    var child = el.firstChild

    while (child) {
      fragment.appendChild(child)
      child = el.firstChild;
    }
    return fragment

  },
  compileElement(el) {
    var childNodes = el.childNodes;
    var self = this;

    [].slice.call(childNodes).forEach(function(node) {
      var reg = /\{\{(.*)\}\}/;
      var text = node.textContent
      if (self.isElementNode(node)) {
        self.compile(node)
      } else if (self.isTextNode(node) && reg.test(text)) {
        self.compileText(node, reg.exec(text)[1])
      }
      if (node.childNodes && node.childNodes.length) {
        self.compileElement(node);
      }
    })
  },
  compile(node) {
    var nodeAttrs = node.attributes;
    // var self = this;
    Array.prototype.forEach.call(nodeAttrs, attr => {
      var attrName = attr.name;

      if (this.isDirective(attrName)) {
        var exp = attr.value;
        var dir = attrName.substring(2)
        if (this.isEventDirective(attrName)) {
          // 编译事件
          this.compileEvent(node, this.vm, exp, dir);
        } else if (this.isVmodel(attrName)) { // v-model 指令
          this.compileModel(node, this.vm, exp, dir);
        }
      }
    })
  },
  compileText(node, exp) {
    var self = this
    this.updateText(node, this.vm[exp])
    new Watcher(this.vm, exp, function(value) {
      self.updateText(node, value)
    })
  },
  compileEvent(node, vm, exp, dir) {
    var eventType = dir.split(':')[1];
    var cb = vm.methods && vm.methods[exp];

    if (eventType && cb) {
      node.addEventListener(eventType, cb.bind(vm), false);
    }
  },
  compileModel(node, vm, exp, dir) {
    var val = vm[exp]
    var types = dir.split('.').slice(1)
    this.updateModel(node, val)
    new Watcher(this.vm, exp, val => {
      this.updateModel(node, val)
    })
    node.addEventListener('input', e => {
      var newVal = e.target.value
      if (val === newVal) {
        return
      }
      if (types.length ) {
        if (types.indexOf("number")>-1) {
          newVal = Number(newVal)
        }
        if (types.indexOf("trim")>-1) {
          newVal = newVal.trim()
        }
      }

      this.vm[exp] = newVal
      val = newVal
    })
  },
  updateModel(node, val) {
    node.value = typeof val === 'undefined' ? '' : val
  },
  isTextNode(node) {
    return node.nodeType === 3
  },
  isElementNode(node) {
    return node.nodeType == 1;
  },
  updateText(node, value) {
    node.textContent = typeof value === 'undefined' ? '' : value;
  },
  isDirective(attr) {
    return attr.indexOf('v-') == 0;
  },
  isEventDirective(str) {
    return str.indexOf('on:') > -1
  },
  isVmodel(str) {
    return str.indexOf('model') > -1
  }
}
复制代码

  <div id="app">
    <input type="text" v-model='name'>
    <input type="text" v-model.number='number'>
    <div>{{name}}</div>
  </div>
复制代码

var test=new Vue({
  el:"#app",
  data:{
    name:'shibin'
  }
})
setTimeout(()=>{
    test.name='Shibin'
  },1000)
复制代码

转载于:https://juejin.im/post/5c75ff266fb9a049fb445419