在使用Vue開發過程中，我們經常會遇到“Vue warn: avoid adding reactive properties to a Vue instance or its root $ data - declare it upfront in the data option”的警告。這個警告向我們表明，我們不能在Vue實例中隨意添加動態（響應式）屬性，而必須在data選項中預先聲明。否則，Vue會認為這個屬性是非響應式的。

有時候，當我們在一個Vue實例中使用一個未被聲明的屬性時，我們會遇到“Vue warn: Property or method XXX is not defined on the instance but referenced during render”的警告。這個警告表示我們正在嘗試訪問一個不存在的屬性或方法。

在Vue.js中，我們一般會在data選項中定義數據對象并且將這些數據綁定到視圖中。當我們在構造函數中添加一個動態屬性，Vue就會對這個屬性進行觀察。但是，Vue不允許在它的實例化之后添加新的根級響應式屬性。

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
app.noDeclared = 'noDeclare'

例如以上示例中，在構造Vue實例之后添加了一個未被聲明的屬性“noDeclare”，這時候就會出現“Vue warn: avoid adding reactive properties to a Vue instance or its root $ data - declare it upfront in the data option”警告。

因為Vue.js需要在實例化時對數據進行初始化，確保它的響應式系統能正確地偵測到數據變化。所以，我們必須在data選項中聲明所有的屬性，以便Vue.js能正確地進行觀察。

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
noDeclared: ''
}
})
app.noDeclared = 'noDeclare'

如果我們在data選項中預先聲明，即可避免這個警告出現。在上述代碼示例中，我們已經將“noDeclared”在data選項中聲明，所以向實例添加該屬性時就不會出現警告了。

總之，對于所有的vue warn is readonly警告，如果我們遵循Vue規則并在data選項中預先聲明所有屬性，同時禁止添加未被聲明的響應式屬性，就可以避免這些警告，并確保Vue的響應式系統能夠正確地工作。