vue.set() (this.$set)的用法及說明
vue.set() (this.$set)的用法
這段時間工作上經(jīng)常操作數(shù)組數(shù)據(jù)，并且要求實時更新視圖數(shù)據(jù)，這個時候首先想到的是 vue.set() 方法（注：當(dāng)發(fā)現(xiàn)model上的數(shù)據(jù)發(fā)生改變，而頁面上的視圖數(shù)據(jù)沒有改變，推薦使用該方法。），該方法的使用首先要在頁面引入vue，應(yīng)該這樣寫：import Vue from 'vue'，這樣才能在組件全局獲取到vue這個實例對象。
如果你覺得引入麻煩，推薦使用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})
}從上代碼可知，點擊事件clickProvince( )，可以改變數(shù)組 this.provinceArrs 中指定下標(biāo) pindex 的值并實時更新頁面的視圖，這樣就極大的方便了操作數(shù)組中的某項值，使用示列：this.$set(arr, index, val)。
當(dāng)然，this.$set除了用于操作數(shù)組外還可以操作對象，使用示例：this.$set( obj, key, val).
this.$set()的使用場景和用法以及與Vue.set()區(qū)別
this.$set()的使用場景
Vue聲明在data中的屬性都是響應(yīng)式的，也就是，我們在修改data中的屬性時，一般頁面都能實時更新。但是由于 JavaScript 的限制，Vue 不能檢測數(shù)組和對象的變化。
比如我們對data中的對象屬性和數(shù)組屬性進(jìn)行一些修改時，無法響應(yīng)式更新渲染到頁面，因此vue提供了$set這個API來解決這個限制。
當(dāng)我們給一個對象添加屬性時，在控制臺上可以打印出來，但是視圖卻沒有更新，此時this.$set()就派上用場了
this.$set的用法
首先先說明一下this.$set()中傳參的含義：
this.$set( target, key, value )
target：要更改的數(shù)據(jù)源(可以是對象或者數(shù)組)key：要更改的具體數(shù)據(jù)value：重新賦的值
下面就著重來說明我在開發(fā)過程中的用法，希望對大家有所幫助,廢話不多說，直接上代碼：
此塊是html部分：
<template>
<div>
<div v-for="item in goodList" :key="item.id">
{{item.name}} {{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ù)據(jù)，但是視圖卻沒有變化：
2）在使用this.$set()的情況下：（直接修改methods中handleClick方法）
methods: {
handleClick () {
this.$set(this.goodList, 3, {name: '口罩', value: '409元', id: 4})
console.log(this.goodList)
}
}此時點擊按鈕，控制臺上可以看到，視圖也發(fā)生了變化：
this.$set()和Vue.set()的區(qū)別
Vue.set( ) 是將 set 函數(shù)綁定在 Vue 構(gòu)造函數(shù)上，this.$set() 是將 set 函數(shù)綁定在 Vue原型上。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇基于element-ui的rules中正則表達(dá)式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue通過vue-router實現(xiàn)頁面跳轉(zhuǎn)的全過程
這篇文章主要介紹了Vue通過vue-router實現(xiàn)頁面跳轉(zhuǎn)的操作步驟,文中有詳細(xì)的代碼示例和圖文供大家參考,對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下2024-04-04
Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
這篇文章主要給大家介紹了關(guān)于Vue如何在CSS中使用data定義的數(shù)據(jù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue項目中如何引入cesium問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue?插槽?(Slots)?源碼解析與用法,通過實例,我們?nèi)媪私饬四J(rèn)插槽、具名插槽和作用域插槽的用法,并深入理解了其在Vue源碼中的實現(xiàn)原理,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue?3.0?vue.config.js文件常用配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
uni-app中使用ECharts配置四種不同的圖表(示例詳解)
在uni-app中集成ECharts可以為我們的應(yīng)用提供強(qiáng)大的圖表功能,我們詳細(xì)說一下如何在uni-app中使用ECharts,并配置四種不同的圖表,感興趣的朋友跟隨小編一起看看吧2024-01-01
這篇文章主要介紹了vuex中的state使用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
本篇文章主要介紹了Vue組件通信之Bus的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了Vue封裝的組件全局注冊并引用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07