vue中this.$set怎么用

這篇文章給大家分享的是有關vue中this.$set怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

vue中 this.$set的使用

背景：在我寫前端項目的時候，后端給我們的一個json對象，并且我已經渲染在頁面上了。但是由于我自己的需求，想往返回的對象里面添加一個字段，于是我用push一個字段進去,添加是添加進去了，但是頁面渲染卻沒有變化。后來才意識到不是響應式的。如果我們要讓這個新字段是響應式的，就要使用到this.$set來注入數據

當vue的data里邊聲明或者已經賦值過的對象或者數組（數組里邊的值是對象）時，向對象中添加新的屬性，如果更新此屬性的值，是不會更新視圖的。

使用

this.$set( target, key, value）

target：表示數據源，即是你要操作的數組或者對象

key：要操作的的字段

value：更改的數據

來個小案例：

給一個對象添加一個年齡屬性并且讓它可以響應式的進行改變

<template>
  <div class="text">
      <p>{{list}}</p>
      <button @click="add">age++</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            list:{ name: "張三"}
        }
    },
    methods: {
        add(){
            if(!this.list.age){ // 如果沒有age屬性就給它添加一個age屬性
                this.list.age=18
            }else{
                this.list.age++
            }
            console.log(this.list)
        }
    }
}
</script>

當我們沒有使用this.$set去添加對象屬性的時候，效果：

數據確實已經添加進去了，但是頁面并沒有響應式的渲染age屬性。

當我們使用this.$set(this.list,‘age',18)去添加一個屬性之后。效果：

我們能看見添加的數據是響應式的。

為什么能夠響應式？

仔細觀察一下，使用了this.$set 多了get age和set age方法，這正是能夠響應式的原因

分析

Vue的響應式原理為 JavaScript 對象傳入 Vue 實例作為 data 選項，Vue 將遍歷此對象所有的 property，并使用 Object.defineProperty 把這些 property 全部轉為 getter/setter。這些 getter/setter 對用戶來說是不可見的，但是在內部它們讓 Vue 能夠追蹤依賴，在 property 被訪問和修改時通知變更。這里需要注意的是不同瀏覽器在控制臺打印數據對象時對 getter/setter 的格式化并不同，下圖來自官方文檔。

感謝各位的閱讀！關于“vue中this.$set怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！