Vue源碼學(xué)習(xí)defineProperty響應(yīng)式數(shù)據(jù)原理實(shí)現(xiàn)

更新時(shí)間：2022年09月06日 09:25:50 作者：i東東

這篇文章主要為大家介紹了Vue源碼學(xué)習(xí)defineProperty響應(yīng)式數(shù)據(jù)原理實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

準(zhǔn)備工作

接上文數(shù)據(jù)初始化完成之后,就可以對(duì)數(shù)據(jù)進(jìn)行劫持。Vue2中對(duì)數(shù)據(jù)進(jìn)行劫持采用了一個(gè)Api叫Object.defineProperty()

在這里需要提供一個(gè)方法去觀測(cè)data變化，這個(gè)方法是一個(gè)核心模塊(響應(yīng)式模塊)，我們單獨(dú)建一個(gè)文件夾來存放在/src/observe/index.js

// src/state.js
import { observe } from "./observe/index"
export function initState(vm){
    // 對(duì)數(shù)據(jù)需要進(jìn)行劫持
    const opts = vm.$options //獲取所有選項(xiàng)
    if (opts.data){
        initData(vm)
    }
}
function initData(vm){
    // 對(duì)數(shù)據(jù)進(jìn)行代理
    let data = vm.$options.data
    // data可以是函數(shù)或者對(duì)象，根實(shí)例可以是對(duì)象，組件data必須是函數(shù)
    data = typeof data === 'function' ? data.call(vm) : data
    // 對(duì)數(shù)據(jù)進(jìn)行劫持 Vue2采用的一個(gè)api object.defineproperty
    observe(data)
}

// src/observe/index.js
export  function observe(data){
  debugger
  console.log(data);
}

執(zhí)行/dist/index.html,當(dāng)控制臺(tái)出可以輸出{name: 'i東東', age: 18}說明前面的代碼沒有問題，接下來就可以開始下面的操作了。

第一步對(duì)對(duì)象進(jìn)行劫持

當(dāng)拿到了data,就可以對(duì)data數(shù)據(jù)進(jìn)行劫持，如果說他不是對(duì)象就不用劫持，所以還需要進(jìn)行一個(gè)判斷。

// src/observe/index.js
export  function observe(data){   // 對(duì)這個(gè)對(duì)象進(jìn)行劫持
  if(typeof data !=='object'|| data == null){
    return // 只對(duì)對(duì)象進(jìn)行劫持
  }
}

那么緊接著如何劫持這個(gè)對(duì)象呢？

如果一個(gè)對(duì)象被劫持過了，那么就不需要再次被劫持了(要判斷一個(gè)對(duì)象是否被劫持過，可以增添一個(gè)實(shí)例，來判斷是否被劫持過)，所以在內(nèi)部創(chuàng)造了一個(gè)類去觀測(cè)數(shù)據(jù)，如果數(shù)據(jù)被觀測(cè)過那他的實(shí)例就是這個(gè)類。

// src/observe/index.js
class Observer{
  constructor(data){ //所有數(shù)據(jù)
    this.walk(data) // 因?yàn)閐ata是一個(gè)對(duì)象，所以就需要對(duì)data進(jìn)行比遍歷
  }
  walk(data){ // 循環(huán)對(duì)象 對(duì)屬性依次劫持
     Object.keys(data).forEach(key=&gt;defineReactive(data,key,data[key])) //重新定義屬性
  }
}
export function defineReactive(target,key,value){ // 閉包  屬性劫持
Object.defineProperty(target,key,{
  get(){ //取值的時(shí)候會(huì)執(zhí)行g(shù)et
    return value
  },
  set(newValue){ // 修改的時(shí)候執(zhí)行set
    if(newValue === value) return
    value = newValue
  }
})
}
export  function observe(data){   // 對(duì)這個(gè)對(duì)象進(jìn)行劫持
  if(typeof data !=='object'|| data == null){
    return // 只對(duì)對(duì)象進(jìn)行劫持
  }
  return new Observer(data); // 對(duì)這個(gè)數(shù)據(jù)進(jìn)行觀測(cè)
}

因?yàn)橐獙?duì)每個(gè)屬性進(jìn)行劫持，但是Objece.defineProperty()只能劫持已經(jīng)存在的屬性，后增加的或者刪除的是不知道的,(Vue2里面會(huì)為此單獨(dú)寫一些api 比如:setset setdelete)，所以需要對(duì)data進(jìn)行遍歷 this.walk()對(duì)屬性依次劫持，重新定義屬性(性能會(huì)差,Vue3中proxy就會(huì)好很多),就可以調(diào)用defineReactive，因?yàn)檫@個(gè)方法可以單獨(dú)去使用，所以直接導(dǎo)出。

完成之后執(zhí)行index.html中console.log(vm),會(huì)發(fā)現(xiàn)vm上只有用戶的選項(xiàng)，并沒有剛才劫持過的屬性，是因?yàn)樵趕tate.js中我們只是data傳入了observe函數(shù)，所以就考慮，在vm上增加一個(gè)屬性，叫_data，這樣就相當(dāng)于把_data對(duì)象放在了實(shí)例vm上，并且又把這個(gè)對(duì)象進(jìn)行了觀測(cè),觀測(cè)的時(shí)候依舊回去循環(huán)這個(gè)對(duì)象。

// src/state.js
function initData(vm){
    let data = vm.$options.data
    data = typeof data === 'function' ? data.call(vm) : data
    vm._data = data // 新增這一句
    observe(data)
}

這樣再次輸出，會(huì)發(fā)現(xiàn)控制臺(tái)輸出了_data,并且給age,name都增加上來get和set方法，現(xiàn)在說明這個(gè)事情就成了。

這個(gè)時(shí)候就可以通過vm._data.name進(jìn)行取值

// dist/index.html
const vm = new Vue({
  data(){
    return {
      name:'i東東',
      age:18
    }
  }
})
vm._data.name = 'i東東修改'
console.log(vm._data.name); 
// 用戶設(shè)置值了
// index.js:15 用戶取值了
// index.html:29 i東東修改

第二步修改取值方法

緊接著就會(huì)發(fā)現(xiàn)正常我們?nèi)≈刀际莢m.name,但是上面的訪問還是vm._data.name,所以下面需要將取值的方法進(jìn)行一下優(yōu)化。需要在state.js中將vm._data用vm代理。

// state.js
function proxy(vm,target,key){
    Object.defineProperty(vm,key,{
        get(){
            return vm[target][key]  // vm._data.name
        },
        set(newValue){
            vm[target][key] = newValue
        }
    })
}
function initData(vm){
    // 對(duì)數(shù)據(jù)進(jìn)行代理
    let data = vm.$options.data
    data = typeof data === 'function' ? data.call(vm) : data
    vm._data = data
    observe(data)
    // 新增 將vm._data用vm代理
    for(let key in data){
        proxy(vm,'_data',key)
    }
}

這樣在index.html中我們就可以用過vm.name重鋼訪問到數(shù)據(jù)，也可以通過vm.name = 'i東東修改'去設(shè)置值，雖然這樣性能是不太好的，但是他用起來會(huì)很方便的。所以在這里面相當(dāng)于代理了兩次第一次把用戶的數(shù)據(jù)進(jìn)行了屬性劫持，第二次就是proxy當(dāng)取值和設(shè)置值的時(shí)候代理到某個(gè)人身上。

第三步深度屬性劫持

// index.html
const vm = new Vue({
  data(){
    return {
      name:'i東東',
      age:18,
      say:{
        hobby:'學(xué)習(xí)'
      }
    }
  }
})
console.log(vm);

假如說我再增加一個(gè)對(duì)象say,輸出vm會(huì)發(fā)現(xiàn)hobby并沒有被劫持，原因是因?yàn)槲覀冎唤俪至薾ame、age、say三個(gè)屬性，如果屬性是個(gè)對(duì)象的話，我們就需要再次劫持。這樣我們只需要在defineReactive()里面再次調(diào)用observe再次建立劫持，形成遞歸這樣就可以完成對(duì)對(duì)象的深度屬性劫持。

// src/observe/index.js
export function defineReactive(target,key,value){ // 閉包  屬性劫持
  observe(value) // 新增 對(duì)所有的對(duì)象都進(jìn)行屬性接觸
  Object.defineProperty(target,key,{
  get(){ //取值的時(shí)候會(huì)執(zhí)行g(shù)et
    console.log('用戶取值了');
    return value
  },
  set(newValue){ // 修改的時(shí)候執(zhí)行set
    console.log('用戶設(shè)置值了');
    if(newValue === value) return
    value = newValue
  }
})
}

以上就是Vue源碼學(xué)習(xí)defineProperty響應(yīng)式數(shù)據(jù)原理實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于Vue defineProperty響應(yīng)式數(shù)據(jù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: