This.$Set的用法和作用


版權
1.this.$set實現什麼功能，為什麼要用它？
當發現我們給物件加了一個屬性，在控制檯能打印出來，但是卻沒有更新到檢視上時，也許這個時候就需要用到

this.$set（）
這個方法了，
1
2
簡單來說this.$set的功能就是解決這個問題的啦。

官方解釋：向響應式物件中新增一個屬性，並確保這個新屬性同樣是響應式的，且觸發檢視更新。它必須用於向響應式物件上新增新屬性，
因為 Vue 無法探測普通的新增屬性
(比如 this.myObject.newProperty = ‘hi’)，
你會發現vue官網是vue.set，
vue.set的用法，連線https:
 
//cn.vuejs.org/v2/api/#Vue-set，
我們現在講的這個this.s e t ( ) 和 它 有 什 麼 關 系 呢 ？ 咱 先 說 t h i s . set()和它有什麼關係呢？咱先說this.set()和它有什麼關係呢？咱先說this.set()，因為他們倆的區別就涉及原理問題啦。

2.怎麼用它？
eg
1.vue 中寫在標籤的程式碼

<template>
 <div id="app">
      <p v-for="item in items" :key="item.id">
          {{item.message}}
      
 
</p>
      <button class="btn" @click="handClick()">
          更改資料
      </button>
 </div>
</template>

<script>
export default {
 name: 'App',
 data () {
  return {
   items: [
        { message: "one", id: "1" },
        { message: "two", id: "2" },
        { message: 
 
"three", id: "3" }
      ]
  }
 },
 mounted () {
   this.items[0] = { message:'first',id:'4'} //此時物件的值更改了，但是檢視沒有更新
  // let art = {message:'first',id:"4"}
  // this.$set(this.items,0,art) //$set 可以觸發更新檢視
 },
 methods: {
  handClick(){
   let change = this.items[0]
   change.message="shen"
   this.$set(this.items,0,change)
  }
 }
}
</script>

eg2
這個例子是物件 所以沒有用push

export default{}中data資料 

在點選按鈕觸發changeValue方法，

呼叫方法：this.$set( target, key, value )
target：要更改的資料來源(可以是物件或者陣列)
key：要更改的具體資料
value ：重新賦的值

上面筆誤，應該是列印this.list[2]

在沒有點選按鈕的時候，介面是這樣的，雖然介面沒有顯示出來，但是控制檯已經打印出來了

當點選按鈕的時候，呼叫this.$set方法，成功顯示第三個屬性,這就是整個過程啦

應用場景
當你需要為物件新增一個新屬性時，或者遇到上邊所說的問題的時候可以試試這個方法，具體vue.set和this.s e t ( ) 的 原 理 和 區 別 ， 可 以 參 考 這 個 v u e . s e t 和 t h i s . set()的原理和區別，可以參考這個vue.set和this.set()的原理和區別，可以參考這個vue.set和this.set()的區別 https://www.jb51.net/article/146580.html
————————————————
版權宣告：本文為CSDN博主「小劉先生很努力」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/lzfengquan/article/details/118602987