在使用Vue時,我們經常碰到實例無法改變的情況,這可能是因為對Vue實例的不理解或者是對語法錯誤的忽視。下面是一些可能會遇到的Vue實例無法改變的情況:
1、該數據是子組件傳遞而來
//父組件
<template>
<Child :info="parentInfo"></Child>
</template>
<script>
export default {
data () {
return {
parentInfo: { name: 'tom', age: 25 },
...
}
}
}
</script>
//子組件
<template>
<div @click="changeAge">{{ info.age }}</div>
</template>
<script>
export default {
props: { info: Object }
methods: {
changeAge () {
this.info.age = 26; //該數據是從父組件傳遞而來,無法修改
}
}
}
</script>
在這個例子中,子組件無法直接修改從父組件傳遞而來的數據,而應該通過$emit來向父組件發送事件。
2、該數據使用了Object.freeze()方法
let app = new Vue({
data: {
person: Object.freeze({
name: 'tom',
age: 25
})
}
})
app.person.age = 26 //無法修改
在這個例子中,數據使用了Object.freeze()方法將其變為只讀,無法修改。
3、該數據被高優先級的響應式計算屬性所依賴
let app = new Vue({
data: {
message: 'hello'
},
computed: {
computedMsg () {
return this.message.toUpperCase()
},
errorMsg () {
return this.computedMsg + 'error' //無法修改
}
}
})
app.message = 'world' //無法修改
在這個例子中,errorMsg計算屬性依賴于computedMsg計算屬性的值,而computedMsg計算屬性的值依賴于message屬性的值,因此message屬性的值無法修改。
4、該數據未定義
let app = new Vue({
data: {
message: 'hello'
}
})
app.noObj.message = 'world' //無法修改
在這個例子中,noObj并未定義,因此無法修改。
5、該數據使用了$attr或$listener
let app = new Vue({
template: '<custom-comp :$attrs="obj" :$listeners="obj"></custom-comp>',
data: {
obj: {
attr1: '1',
attr2: '2'
}
}
})
app.obj.attr1 = '3' //無法修改
在這個例子中,$attr和$listener是通過對象屬相操作來進行處理的,因此無法修改。
在Vue中,如果實例無法改變,我們可以通過使用$set或者將數據置空然后重新賦值的方式來進行修改,同時要確定是否需要使用Vue.set或Vue.delete。