這篇文章帶大家聊聊Vue中的Vue.set和this.$set，介紹一下Vue.set和this.$set用法與使用場景，希望對大家有幫助！
由於JavaScript的限制，Vue無法偵測到data中陣列和物件的變化，因此也不會觸發視圖更新。 vuejs影片教學
Vue對這些JS陣列方法進行了封裝，透過這些方法是可以偵測到陣列更新的。
如下例中，是要實作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: '#app',
data: {
items: ['a', 'b', 'c']
},
created() {
this.items = ['a', 'test', 'c']
}
})
</script>
</body>如下例中，是要實作給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: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
},
created() {
this.object = {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10',
test: 'newthing'
}
}
})
</script>
</body>Vue無法偵測以下陣列的變動:
vm.list[0]=newValue vm.list.length=newLength舉栗子
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
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, 'b', 2)
this.$set(this.someObject,'b',2)
Vue不允許動態新增根級響應式屬性
const app = new Vue({
data: {
a: 1
}
// render: h => h(Suduko)
}).$mount('#app1')
Vue.set(app.data, 'b', 2)嵌套物件新增響應式屬性
var vm=new Vue({
el:'#test',
data:{
//data中已经存在info根属性
info:{
name:'小明';
}
}
});
//给info添加一个性别属性
Vue.set(vm.info,'sex','男');以上是淺析Vue中的Vue.set和this.$set，看看使用場景吧！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
