vue.set() (this.$set)的用法

這段時(shí)間工作上經(jīng)常操作數(shù)組數(shù)據(jù)，并且要求實(shí)時(shí)更新視圖數(shù)據(jù)，這個(gè)時(shí)候首先想到的是 vue.set() 方法（注：當(dāng)發(fā)現(xiàn)model上的數(shù)據(jù)發(fā)生改變，而頁面上的視圖數(shù)據(jù)沒有改變，推薦使用該方法。），該方法的使用首先要在頁面引入vue，應(yīng)該這樣寫：import Vue from 'vue'，這樣才能在組件全局獲取到vue這個(gè)實(shí)例對(duì)象。

如果你覺得引入麻煩，推薦使用vue.set的別名this.$set。

那么現(xiàn)在上代碼：

HTML：

<ul class="province_area_style province_area">
? ? ? ? ? ? <li v-for="(item, index) in provinceArrs" :key='index' :id='index'><input type="checkbox" :id= "'checkbox' + index" :class="{checkOn: item.checkOn, checkOff: item.checkOff}" @click="clickProvince(index, item)"><label :for="'checkbox' + index">{{item.name}}</label><i @click="clickProvinceIcon(index, item)"></i></li>
? ? ? ? ? </ul>

JS：

clickProvince(pindex, pitem) {
? ? ? pitem.checkOn = !pitem.checkOn
? ? ? pitem.checkOff = !pitem.checkOff
? ? ? this.$set(this.provinceArrs, pindex, {p_name: pitem.p_name, p: pitem.p, name: pitem.name, c: pitem.c, checkOn: pitem.checkOn, checkOff: pitem.checkOff})
}

從上代碼可知，點(diǎn)擊事件clickProvince( )，可以改變數(shù)組　this.provinceArrs　中指定下標(biāo)　pindex　的值并實(shí)時(shí)更新頁面的視圖，這樣就極大的方便了操作數(shù)組中的某項(xiàng)值，使用示列：this.$set(arr,  index,  val)。

當(dāng)然，this.$set除了用于操作數(shù)組外還可以操作對(duì)象，使用示例：this.$set( obj, key, val).

this.$set()的使用場(chǎng)景和用法以及與Vue.set()區(qū)別

this.$set()的使用場(chǎng)景

Vue聲明在data中的屬性都是響應(yīng)式的，也就是，我們?cè)谛薷膁ata中的屬性時(shí)，一般頁面都能實(shí)時(shí)更新。但是由于 JavaScript 的限制，Vue 不能檢測(cè)數(shù)組和對(duì)象的變化。

比如我們對(duì)data中的對(duì)象屬性和數(shù)組屬性進(jìn)行一些修改時(shí)，無法響應(yīng)式更新渲染到頁面，因此vue提供了$set這個(gè)API來解決這個(gè)限制。

當(dāng)我們給一個(gè)對(duì)象添加屬性時(shí)，在控制臺(tái)上可以打印出來，但是視圖卻沒有更新，此時(shí)this.$set()就派上用場(chǎng)了

this.$set的用法

首先先說明一下this.$set()中傳參的含義：

this.$set( target, key, value )

• target：要更改的數(shù)據(jù)源(可以是對(duì)象或者數(shù)組)
• key：要更改的具體數(shù)據(jù)
• value：重新賦的值

下面就著重來說明我在開發(fā)過程中的用法，希望對(duì)大家有所幫助,廢話不多說，直接上代碼：

此塊是html部分：

<template>
  <div>
     <div v-for="item in goodList" :key="item.id">
      {{item.name}}&nbsp;&nbsp;&nbsp;{{item.value}}
    </div>
    <Button type="success" @click="handleClick()">改變數(shù)據(jù)</Button>
  </div>
</template>

此塊是js部分：

1）在沒有使用this.$set()的情況下：

<script>
export default {
  name: 'mySet',
  data () {
    return {
      goodList: [
        {name: '書本', value: '200元', id: 1},
        {name: '玩偶', value: '200元', id: 2},
        {name: '薯片', value: '300元', id: 3}
      ]
    }
  },
  methods: {
    handleClick () {
      this.goodList[3] = {name: '口罩', value: '409元', id: 4}
      console.log(this.goodList)
    }
  }
}
</script>

 此時(shí)點(diǎn)擊按鈕，控制臺(tái)可以看到新增數(shù)據(jù)，但是視圖卻沒有變化：

 2）在使用this.$set()的情況下：（直接修改methods中handleClick方法）

 methods: {
    handleClick () {
      this.$set(this.goodList, 3, {name: '口罩', value: '409元', id: 4})
      console.log(this.goodList)
    }
  }

此時(shí)點(diǎn)擊按鈕，控制臺(tái)上可以看到，視圖也發(fā)生了變化：

this.$set()和Vue.set()的區(qū)別

Vue.set( ) 是將 set 函數(shù)綁定在 Vue 構(gòu)造函數(shù)上，this.$set() 是將 set 函數(shù)綁定在 Vue原型上。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論