首頁 >web前端 >Vue.js >淺析Vue中的Vue.set和this.$set，看看使用場景吧！

淺析Vue中的Vue.set和this.$set，看看使用場景吧！

青灯夜游轉載: 2022-03-04 16:41:123053瀏覽

這篇文章帶大家聊聊Vue中的Vue.set和this.$set，介紹一下Vue.set和this.$set用法與使用場景，希望對大家有幫助！

一、為什麼有Vue.set

由於JavaScript的限制，Vue無法偵測到data中陣列和物件的變化，因此也不會觸發視圖更新。 vuejs影片教學

二、解決方法

陣列

#1.使用Vue提供的變異方法

淺析Vue中的Vue.set和this.$set，看看使用場景吧！

Vue對這些JS陣列方法進行了封裝，透過這些方法是可以偵測到陣列更新的。

2.將原數組整個替換

如下例中，是要實作vm.items[1] = 'excess'

<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in items">
            {{ index }} : {{ item }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
    },
    created() {
        this.items = [&#39;a&#39;, &#39;test&#39;, &#39;c&#39;]
    }
})
</script>
</body>

#3.使用Vue.set（見後文）

物件

1.將原始物件整個替換

如下例中，是要實作給object新增一個鍵值對{test: 'newthing'}

<body>
<div id="app">
    <ul>
        <li v-for="(value, name) in object">
            {{ name }} : {{ value }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        object: {
            title: &#39;How to do lists in Vue&#39;,
            author: &#39;Jane Doe&#39;,
            publishedAt: &#39;2016-04-10&#39;
        }
    },
    created() {
        this.object = {
            title: &#39;How to do lists in Vue&#39;,
            author: &#39;Jane Doe&#39;,
            publishedAt: &#39;2016-04-10&#39;,
            test: &#39;newthing&#39;
        }
    }
})
</script>
</body>

2.使用Vue.set（見後文）

三、Vue.set

#對於陣列

Vue無法偵測以下陣列的變動:

利用索引值直接設定一個陣列項目時，例如vm.list[0]=newValue
修改陣列長度時，例如 vm.list.length=newLength

舉栗子

var vm = new Vue({
  data: {
    items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
  }
})
vm.items[1] = &#39;x&#39; // 不是响应性的
vm.items.length = 2 // 不是响应性的

這時可以使用Vue.set或this.$set

#使用方法

Vue.set(target,index,newValue)

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// this.$set
vm.$set(vm.items, indexOfItem, newValue)

對於物件

Vue 無法檢測property 的新增或移除。由於 Vue 會在初始化實例時對 property 執行 getter/setter 轉化，所以 property 必須在 data 物件上存在才能讓 Vue 將它轉換為響應式的。

舉栗子

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

使用方法

Vue.set(target,key,value)

Vue.set(vm.someObject, &#39;b&#39;, 2)

this.$set(this.someObject,&#39;b&#39;,2)

注意

Vue不允許動態新增根級響應式屬性

const app = new Vue({
  data: {
    a: 1
  }
  // render: h => h(Suduko)
}).$mount(&#39;#app1&#39;)

Vue.set(app.data, &#39;b&#39;, 2)

淺析Vue中的Vue.set和this.$set，看看使用場景吧！

##只可以使用Vue.set(object, propertyName, value) 方法為

嵌套物件新增響應式屬性

var vm=new Vue({
    el:&#39;#test&#39;,
    data:{
        //data中已经存在info根属性
        info:{
            name:&#39;小明&#39;;
        }
    }
});
//给info添加一个性别属性
Vue.set(vm.info,&#39;sex&#39;,&#39;男&#39;);

四、使用場景

#當我們對data中的陣列或物件進行修改時，有些操作方式是非響應式的，Vue偵測不到資料更新，因此也不會觸發視圖更新。此時需要使用Vue.set()進行響應式的資料更新。

（學習影片分享：

vuejs教學、web前端）

以上是淺析Vue中的Vue.set和this.$set，看看使用場景吧！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript Object 封装 Length Property JS 对象 this

陳述：

本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除

上一篇：手把手教你怎麼實現一個vue雙向綁定下一篇：手把手教你怎麼實現一個vue雙向綁定

看更多