溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue中的Vue.set和this.$set怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue中的Vue.set和this.$set怎么使用”文章能幫助大家解決問題。
由于JavaScript的限制，Vue無法檢測到data中數組和對象的變化，因此也不會觸發視圖更新。
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)
只可以使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應式屬性
var vm=new Vue({
el:'#test',
data:{
//data中已經存在info根屬性
info:{
name:'小明';
}
}
});
//給info添加一個性別屬性
Vue.set(vm.info,'sex','男');當我們對data中的數組或對象進行修改時，有些操作方式是非響應式的，Vue檢測不到數據更新，因此也不會觸發視圖更新。此時需要使用Vue.set()進行響應式的數據更新。
關于“Vue中的Vue.set和this.$set怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
