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 中指定下標 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ù)組屬性進行一些修改時，無法響應(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)文章
Vue3 computed初始化獲取設(shè)置值實現(xiàn)示例
這篇文章主要為大家介紹了Vue3 computed初始化以及獲取值設(shè)置值實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了vue中destroyed方法及使用示例講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue 2.5 Level E 發(fā)布了： 新功能特性一覽
很高興Vue 2.5 Level E 發(fā)布了。在這篇文章中，我們將重點介紹一些更重要的的變化：更好的 TypeScript 集成，更好的錯誤處理，更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無關(guān)的服務(wù)端渲染2017-10-10
Vue Promise解決回調(diào)地獄問題實現(xiàn)方法
這篇文章主要介紹了Vue Promise解決回調(diào)地獄問題，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2023-01-01
Vue 中v-model的完整用法及v-model的實現(xiàn)原理解析
這篇文章詳細介紹了Vue.js中的v-model指令的使用,包括基本用法、原理、結(jié)合不同類型的表單元素（如radio、checkbox、select）以及使用修飾符（如lazy、number、trim）等,感興趣的朋友一起看看吧2025-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)動態(tài)控制表格列的顯示隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue項目不能使用localhost訪問的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3中的h方法用于創(chuàng)建虛擬DOM節(jié)點,是渲染函數(shù)的核心,它接受三個參數(shù)：type（節(jié)點類型）、props（屬性對象）和children（子節(jié)點）,通過示例展示了如何使用h方法創(chuàng)建簡單的HTML元素、帶有屬性的元素、嵌套元素和自定義組件,感興趣的朋友一起看看吧2025-03-03
這篇文章主要介紹了vue中關(guān)于click.stop的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue子組件created方法不執(zhí)行問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10