夜晚有明月，夢里有佳人

前言

最近在寫老師布置的vue項目，真的說實話，每天真就是在百度、google、bing等各個搜索引擎之間反復橫跳，不然就是掘金搜一搜、思否搜一搜，還有CSDN看一看。我的前端是吃百家飯長大的，每天不知道要遇到多少問題，然后基本上周圍所有的前端同學都被我問到了，基本上就是誰有空就拉誰來教我。

---

前端太多細節問題了，一旦遇到沒有接觸過問題，就會非常麻煩，如果有學習前端的后端小伙伴，我覺得最快熟悉前端的方式，就是整個項目寫。這可能是最快上手前端框架的方式了吧。

一、vue中修改數組對象下的數組里的某一個對象

我的對象結構如下：

sections: [{id: 0,addInputBool: true,generallnformationBool: false,generallnformation: '',updateGenerlInfoImgBool: false,pullUpQusetionBool: true,upQusetionBool: true,downQuestionBool: false,questions: [{id:'',name:'',isCheckbox:'',answer:'',conditions:[],dropdownMultiSelections:[]}]} ]

要實現的需求是通過數組下標，修改數組里某一個對象。

最開始我的想法就是將數值一個一個的賦值進數組，和寫Java代碼一樣的思維。

this.sections[index].question[id]=this.addQuestion

這里的index和id是我們點擊頁面修改傳過來的值，最后發現這樣一直報錯，不能夠實現修改。

后來查百度說：

問題：

根據數組的索引直接賦值沒法修改數組的中對象。

原因：

Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上

然后就查到了要使用this.$set來進行操作

解決：

// 數組：第一個參數是要修改的數組, 第二個值是修改的下標或字段,第三個是要修改成什么值 this.$set(sections[index].question,id,{id:'123',name:'寧在春',isCheckbox:true,answer:'測試集',conditions:[1,2,3],dropdownMultiSelections:[a,b,c] }); 或者 // 對象：第一個參數是要修改的對象, 第二個值是修改屬性字段,第三個是要修改成什么值 Vue.set(sections[index].question,id,{ id:'123',name:'寧在春',isCheckbox:true,answer:'測試集',conditions:[1,2,3],dropdownMultiSelections:[a,b,c]})

看到有這個this.$set方法，就想去了解了解，看看它還有什么應用場景，方便下次有需要的時候，能夠直接用上。

二、this.$set

2.1、this.$set能夠實現什么功能

官方解釋：向響應式對象中添加一個屬性，并確保這個新屬性同樣是響應式的，且觸發視圖更新。它必須用于向響應式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = ‘hello，ningzaichun’）

簡單說即是：當你發現你給對象加了一個屬性，在控制臺能打印出來，但是卻沒有更新到視圖上時，也許這個時候就需要用到this.$set（）這個方法了

2.2、如何使用 this.$set

Vue中this.$set的用法 // 數組：第一個參數是要修改的數組, 第二個值是修改的下標或字段,第三個是要修改成什么值 // 對象：第一個參數是要修改的對象, 第二個值是修改屬性字段,第三個是要修改成什么值 Vue.set( target, propertyName/index, value )參數 {Object | Array} target{string | number} propertyName/index{any} value

小小案例：

<template><div class="page" id="app"><button @click="add">設置</button><ol><li v-for="(item, index) in arr" :key="index">{{ item.name }}</li></ol></div> </template><script> export default {data () {return {arr: [{ name: '寧在春', age: 21 },{ name: '北桑夏', age: 21 }]}},mounted () {this.arr[2] = { name: '青冬栗', age: 23 } // 數組的值發生了變化 但視圖沒有更改console.log(this.arr)},methods: {add () {this.$set(this.arr, 2, { name: '青冬栗', age: 23 }) // $set 觸發視圖更改}} } </script> target: 要更改的數據源（可以是一個對象或者數組） key 要更改的具體數據 （索引） value 重新賦的值

在vue的生命周期鉤子函數mounted中，我們手動的在數組加入了一個值，但是并不會直接在頁面視圖進行更新。

初始化的頁面是這樣的。

但是在控制臺其實是已經打印出來的拉

但是如果我們點擊按鈕的設置，視圖就會立馬發生改變

這就是this.$set一個妙用之處。

2.3、this.$set 應用場景

1、在我們使用vue進行開發中，可能會碰到一種情況，當已經生成vue實例后，再次去給數據賦值或者添加數據，并不能同步更新到數據上面去。

2、另外就是像我這種，利用this.$set進行數據的更新

自言自語

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、 可用于更新数据到视图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。