在Vue的項目中,數據是很重要的一部分,而且數據的改變直接關系到視圖的刷新,因此我們需要了解Vue中數據的改變方式。
Vue中數據的改變方式,主要是通過data。data就是一個對象,里面存放著我們需要渲染的數據。Vue改變數據的方式有以下幾種:
1. 直接賦值的方式:
data() {
return {
name: '小明'
}
}
methods: {
changeName() {
this.name = '小紅'
}
}
2. 通過Vue.set()的方式:
data() {
return {
person: {}
}
}
methods: {
addAge() {
Vue.set(this.person, 'age', 18)
}
}
3. 通過splice()的方式:
data() {
return {
arr: [1,2,3,4,5]
}
},
methods: {
changeArr() {
this.arr.splice(1, 2, 6, 7)
}
}
其中,第二種方式使用的是Vue.set(),是因為Vue對于對象和數組的響應式處理需要特殊處理,否則新增的屬性可能無法被檢測到。
除了以上三種方式,Vue還提供了$set和$delete方法來操作數據。
1. $set的使用:
this.$set(this.person, 'age', 18)
這種方式與Vue.set相同。
2. $delete的使用:
this.$delete(this.person, 'age')
除了以上方法外,Vue還提供了watch來監聽數據的改變,當數據改變時可以自動執行一些操作。
watch: {
arr: {
handler: function(val, oldVal) {
console.log('oldVal:', oldVal)
console.log('newVal:', val)
},
deep: true
}
}
在上例中,我們監聽了arr的改變,當arr中的某個元素改變時,就會自動執行handler函數。deep表示是否深度監聽,也就是當數組中的元素改變時是否也需要觸發。
通過以上方式,我們可以方便的操作數據,實現我們的需求。但需要注意的是,我們需要盡量減少直接修改數據的次數,而是盡量使用上述方法進行修改,這樣可以確保數據的響應式處理正常,另外也有利于維護代碼。
上一篇c 通過json讀取地圖
下一篇vue date時間轉換