This.$Set的用法和作用

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