溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue data的數(shù)據(jù)響應(yīng)式到底是如何實(shí)現(xiàn)的

發(fā)布時間：2020-09-05 11:20:11 來源：腳本之家 閱讀：182 作者：Oliver 欄目：web開發(fā)

研究過程

一般形式

data:{ n:0 } ：以這樣的方式存儲數(shù)據(jù)，vue能夠監(jiān)聽其變化嗎？顯然是不能的。

使用Obj.defineProperty

let data1 = {}

Object.defineProperty(data1, 'n', {
value: 0  
})

為什么要使用defineProperty呢？這不是把一般形式復(fù)雜化了嗎？

引出主角getter setter。

如果我們想對數(shù)據(jù)監(jiān)聽進(jìn)行處理呢？（假設(shè)修改的數(shù)據(jù)必須>=0）

let data2 = {}
data2._n = 0

Object.defineProperty(data2,'n',{
  get(){ return this._n },
  set(value){
    if(value<0) return //在此處可以對數(shù)據(jù)的修改進(jìn)行操作
    this._n = value
  }
})

使用代理

如果對方直接修改data2._n怎么辦？我們讓data2變成匿名對象！

let data3 = proxy({ data:{n:0} }) //括號里是匿名對象，無法訪問
function proxy({data}){
 const obj = {}
 Object.defineProperty(obj, 'n', {
  get(){
    return data.n
  },
  set(value){
    if(value<0)return
    data.n = value
   }
 })
 return obj // obj 就是代理
}

代理是什么？

  • 對data的屬性的讀寫，全權(quán)交給另一個對象obj負(fù)責(zé)，那么obj就是data的代理
  • data.n不使用，偏要使用obj.n來操作data.n

如果用戶自己給匿名對象起了個名字怎么辦呢？

MyData = { n:0 }
let data3 = proxy({ data:MyData })
MyData.n = -1
 //成功賦值為-1

這種情況，我們也要進(jìn)行攔截處理。

//在4.中的proxy函數(shù)中加入這幾行
let value = data.n
 Object.defineProperty(data, 'n', {
   get(){
     return value
   },
   set(newValue){
     if(newValue<0)return
     value = newValue
   }
 })

這樣，我們就對data進(jìn)行了監(jiān)聽。

data域的一個bug

new Vue({
  data:{
    obj:{
      a:0
    }
  },
  template:`
    <div @click="set">{{ obj.b }}</div>
  `,
  methods:{
    set(){
      this.obj.b = 1
    }
  }
})
  //bug：vue無法監(jiān)聽一開始data域中不存在的obj.b

解決方法：

data的初始化中加入b

data:{
  obj:{
    a:0,
    b:undefined 
    //注意，vue中的null和undefined都不會被渲染出來
  }
}

使用Vue.set(this.obj,'b',1)

數(shù)組的長度又不固定，怎么提前聲明？

  1. 使用Vue.set （不推薦）
  2. 使用this.array.push （被Vue改寫過的push，實(shí)現(xiàn)了代理和監(jiān)聽）

詳見vue文檔，變異方法 章節(jié)

總結(jié)

//看看下面的代碼，發(fā)現(xiàn)了什么？

let data = proxy({ data:myData5 })
let vm = new Vue({ data: myData })

Vue正是使用了這種代理和監(jiān)聽的設(shè)計(jì)模式，形成的數(shù)據(jù)響應(yīng)式。

流程：聲明數(shù)據(jù) => 監(jiān)聽數(shù)據(jù) => 代理數(shù)據(jù) => 返回?cái)?shù)據(jù)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手