uniapp$set詳解

在Uniapp中，uniapp$set是一個非常重要的API。本文將從不同的角度對其進行詳細的講解，幫助讀者更好地理解uniapp$set的功能和使用方法。

一、uniapp$set的基本語法

uniapp.$set(obj, key, value)

uniapp.$set是Vue.js中一個非常重要的工具函數，它主要用於改變Vue.js中響應式數據的值。uniapp.$set和Vue.set的語法完全一致，而Vue.set是Vue.js中的全局函數。

參數解釋：

• obj：要修改的響應式對象；
• key：要修改的對象屬性名稱；
• value：要設置的新值。

下面我們通過一個示例來展示uniapp$set函數的使用方法：

// 頁面data中data對象
data: {
  userInfo: {
    name: '張三',
    age: 20,
    sex: '男'
  }
}

// 調用uniapp.$set修改響應式數據
uniapp.$set(this.userInfo, 'name', '李四');

上述代碼就是使用uniapp.$set修改userInfo對象中的name屬性值。

二、uniapp$set函數的使用場景

uniapp.$set主要用於解決Vue.js中對響應式數據的新增和刪除操作無法觸發視圖更新的問題。為了更好地理解這個場景，我們可以通過下面一個例子來加深印象：

假設現在我們有一個數據列表，我們通過點擊按鈕的方式添加和刪除數據。我們首先定義一個list數組：

data(){
  return{
    list:[]
  }
}

接下來我們定義一個add方法，每次調用它都會向list數組中添加一個新的對象：

add(){
  this.list.push({
    name:'張三',
    age:20,
    sex:'男'
  })
}

我們再定義一個remove方法，每次調用它都會刪除list數組中的最後一個元素：

remove(){
  this.list.splice(this.list.length-1,1)
}

如果我們直接使用push和splice方法來添加和刪除數據，問題就會出現了：每當我們添加或刪除一條數據時，視圖並不會立即更新，因為Vue.js幾乎無法對數據新增或刪除操作做出反應。

那麼我們可以利用uniapp.$set函數來解決這個問題。每當我們添加一條數據時，調用uniapp.$set函數來改變數組的值：

add() {
  this.$set(this.list, this.list.length, {
    name: '張三',
    age: 20,
    sex: '男'
  })
}

接下來我們來改造一下remove方法，使用$set方法來刪除list數組中的最後一個元素：

remove(){
  this.$set(this.list,this.list.length-1,null)
  this.list.pop()
}

這樣我們就可以使用uniapp.$set來添加和刪除數據，使得數據的變化能夠及時地反映在視圖中。

三、uniapp$set的底層實現原理

uniapp.$set背後的原理非常簡單，它主要是利用Vue.js的Object.defineProperty方法來監測數據的變化。當我們利用uniapp.$set函數來改變數據時，Vue.js會自動調用Object.defineProperty方法來監測數據變化，從而觸發視圖更新。

下面我們來看一下uniapp.$set背後的實現原理：

export function $set(target: any, key: string | number, val: any): any {
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    // 利用 splice 方法來觸發視圖更新
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    // 防止修改 Vue 實例或其 $data 對象
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

從上面的代碼中可以看出，如果target是一個數組，那麼之所以使用splice方法來觸發視圖更新，是因為Vue.js能夠監聽到數組下標的變化，而使用splice方法能夠觸發數組下標的變化。如果target是一個對象且key是該對象的已有屬性，那麼直接將val賦值給該屬性即可。如果key是該對象的新屬性，那麼使用defineReactive函數來監測這個新屬性的變化。

四、uniapp$set的優缺點

uniapp.$set函數的主要優點在於它能夠監聽對象屬性和數組下標的變化，從而讓Vue.js能夠及時地更新視圖。同時，它還可以監聽新屬性的添加和刪除，這樣我們就不必在Vue.js初始化的時候就把所有的屬性都定義好。

不過，uniapp.$set函數也有它的缺點。比如，調用該函數的代價比直接操作數據高得多。因為我們本來應該直接操作數據的，但是現在卻要使用該函數來操作數據，這樣會造成額外的開銷，從而降低程序的執行效率。

五、總結

本文詳細講解了uniapp.$set函數的使用方法、使用場景、底層實現原理和優缺點。只有深入了解uniapp.$set函數，我們才能更好地使用它，從而讓我們的程序更加高效、穩定和易於維護。