vue中 this.$set的使用詳解

更新時(shí)間：2021年11月17日 11:58:28 作者：浪漫主義碼農(nóng)

這篇文章主要為大家介紹了vue中 this.$set的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

vue中 this.$set的使用

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

當(dāng)vue的data里邊聲明或者已經(jīng)賦值過的對(duì)象或者數(shù)組（數(shù)組里邊的值是對(duì)象）時(shí)，向?qū)ο笾刑砑有碌膶傩裕绻麓藢傩缘闹?，是不?huì)更新視圖的。

使用

this.$set( target, key, value）

target：表示數(shù)據(jù)源，即是你要操作的數(shù)組或者對(duì)象

key：要操作的的字段

value：更改的數(shù)據(jù)

來個(gè)小案例：

給一個(gè)對(duì)象添加一個(gè)年齡屬性并且讓它可以響應(yīng)式的進(jìn)行改變

在這里插入圖片描述

<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屬性就給它添加一個(gè)age屬性
                this.list.age=18
            }else{
                this.list.age++
            }
            console.log(this.list)
        }
    }
}
</script>

當(dāng)我們沒有使用this.$set去添加對(duì)象屬性的時(shí)候，效果：

數(shù)據(jù)確實(shí)已經(jīng)添加進(jìn)去了，但是頁(yè)面并沒有響應(yīng)式的渲染age屬性。

在這里插入圖片描述

當(dāng)我們使用this.$set(this.list,‘a(chǎn)ge',18)去添加一個(gè)屬性之后。效果：

在這里插入圖片描述

我們能看見添加的數(shù)據(jù)是響應(yīng)式的。

為什么能夠響應(yīng)式？

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

在這里插入圖片描述

分析

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

在這里插入圖片描述