快捷導(dǎo)航

淺談實(shí)現(xiàn)vue2.0響應(yīng)式的基本思路

更新時(shí)間：2018年02月13日 11:58:50 作者：CaiBoBo

這篇文章主要介紹了淺談實(shí)現(xiàn)vue2.0響應(yīng)式的基本思路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近看了vue2.0源碼關(guān)于響應(yīng)式的實(shí)現(xiàn)，以下博文將通過(guò)簡(jiǎn)單的代碼還原vue2.0關(guān)于響應(yīng)式的實(shí)現(xiàn)思路。

注意，這里只是實(shí)現(xiàn)思路的還原，對(duì)于里面各種細(xì)節(jié)的實(shí)現(xiàn)，比如說(shuō)數(shù)組里面數(shù)據(jù)的操作的監(jiān)聽(tīng)，以及對(duì)象嵌套這些細(xì)節(jié)本實(shí)例都不會(huì)涉及到，如果想了解更加細(xì)節(jié)的實(shí)現(xiàn)，可以通過(guò)閱讀源碼 observer文件夾以及instance文件夾里面的state文件具體了解。

首先，我們先定義好實(shí)現(xiàn)vue對(duì)象的結(jié)構(gòu)

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

第一步：將data下面的屬性變?yōu)閛bservable

使用Object.defineProperty對(duì)數(shù)據(jù)對(duì)象做屬性get和set的監(jiān)聽(tīng)，當(dāng)有數(shù)據(jù)讀取和賦值操作時(shí)則調(diào)用節(jié)點(diǎn)的指令，這樣使用最通用的=等號(hào)賦值就可以觸發(fā)了。

//數(shù)據(jù)劫持，監(jiān)控?cái)?shù)據(jù)變化
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
  }
 })
}

第二步：實(shí)現(xiàn)一個(gè)消息訂閱器

很簡(jiǎn)單，我們維護(hù)一個(gè)數(shù)組，這個(gè)數(shù)組，就放訂閱者，一旦觸發(fā)notify，訂閱者就調(diào)用自己的update方法

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

每次set函數(shù)，調(diào)用的時(shí)候，我們觸發(fā)notify，實(shí)現(xiàn)更新

那么問(wèn)題來(lái)了。誰(shuí)是訂閱者。對(duì)，是Watcher。。一旦 dep.notify()就遍歷訂閱者，也就是Watcher，并調(diào)用他的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()
  }
 })
}

第三步：實(shí)現(xiàn)一個(gè) Watcher

Watcher的實(shí)現(xiàn)比較簡(jiǎn)單，其實(shí)就是執(zhí)行數(shù)據(jù)變化時(shí)我們要執(zhí)行的操作

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

第四步：touch拿到依賴

上述三步，我們實(shí)現(xiàn)了數(shù)據(jù)改變可以觸發(fā)更新，現(xiàn)在問(wèn)題是我們無(wú)法將watcher與我們的數(shù)據(jù)聯(lián)系到一起。

我們知道data上的屬性設(shè)置defineReactive后，修改data 上的值會(huì)觸發(fā) set。那么我們?nèi)ata上值是會(huì)觸發(fā) get了。所以可以利用這一點(diǎn)，先執(zhí)行以下render函數(shù)，就可以知道視圖的更新需要哪些數(shù)據(jù)的支持，并把它記錄為數(shù)據(jù)的訂閱者。

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()
  }
 })
}

最后我們來(lái)看用一個(gè)代理實(shí)現(xiàn)將我們對(duì)data的數(shù)據(jù)訪問(wèn)綁定在vue對(duì)象上

 _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))

下面就是整個(gè)實(shí)例的完整代碼

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>

上面就是整個(gè)vue數(shù)據(jù)驅(qū)動(dòng)部分的整個(gè)思路。如果想深入了解更細(xì)節(jié)的實(shí)現(xiàn)，建議深入去看vue這部分的代碼。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: