vue的$set使用【陣列與物件的賦值檢視不更新情況】
阿新 • • 發佈：2021-06-30
由於 Vue 會在初始化例項時進行雙向資料繫結，使用Object.defineProperty()對屬性遍歷新增 getter/setter 方法，所以屬性必須在 data 物件上存在時才能進行上述過程 ，這樣才能讓它是響應的。如果要給物件新增新的屬性，此時新屬性沒有進行過上述過程，不是響應式的，所以會出想資料變化，頁面不變的情況。此時需要用到$set。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script></head> <body> <div id="app"> 姓名：{{ name }}<br> 年齡：{{age}}<br> 性別：{{sex}}<br> 說明：{{info.content}} </div> <!-- JavaScript 程式碼需要放在尾部（指定的HTML元素之後） --> <script> var data = { name: "簡書", age: '3', info: { content: 'my name is test' } } var key = 'content'; var vm = new Vue({ el:'#app', data: data, ready: function(){ //Vue.set(data,'sex', '男') //this.$set('info.'+key, 'what is this?'); } }); <!--如果直接新增sex屬性，就會出現下圖情況，所以頁面上{{sex}}是沒有資料的-->
data.sex = '男'； </script> </body>
在age及name都有get和set方法,但是在sex裡面並沒有這兩個方法，因此，設定了sex值後vue並不會自動更新檢視；
陣列與物件都會有以上問題解決方法：vue 的$set方法
1、陣列
this.$set(Array, index, newValue) <-- 由於 JavaScript 的限制，Vue 不能檢測以下變動的陣列： 當你利用索引直接設定一個項時，例如：vm.items[indexOfItem] = newValue 解決：用$set方法 當你修改陣列的長度時，例如：vm.items.length = newLength 解決：vm.items.splice(newLength) -->
2、物件
this.$set(Object, key, value) <-- 有時你想向已有物件上新增一些屬性，例如使用 Object.assign() 或 _.extend() 方法來新增屬性。 但是，新增到物件上的新屬性不會觸發更新。 在這種情況下可以建立一個新的物件，讓它包含原物件的屬性和新的屬性： this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 或者上面的$set方法 -->轉自連結：https://www.jianshu.com/p/70b2e2e0aa11