溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue項目中調用watch數據時會遇到哪些問題？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
這個時候一定要在watch里去輸出一下this，
看看this包裹的殼是不是多了好多層，所以找不到方法，雖然我到現在還沒理解為啥有時候會出現一層或幾層殼的問題。
例如
正常情況下用this.functionname()就可以調用了。
但是在一些情況下（現在本人還沒找到原因）在控制臺輸出this的時候你會發現數據經常是這樣包裹的a{name},name里面對你的methods還包裹了一層，所以使用方法的時候就會變成 this.a.methods.funtionname()
原因還在找，不過解決辦法先記下來。
補充知識：使用 Vue 的最佳做法---不要在“created”和“watch”中調用方法
我就廢話不多說了，大家還是直接看代碼吧~
watch: {
params: {
handler: function (val, oldVal) {
if (val == '1') {
this.initTableData()
}
},
deep: true
},
property: {
immediate: true,
handler: function (val, oldVal) {
this.initTableData()
},
},
},Vue開發人員經常犯的一個錯誤是他們不必要地在created和watch中調用方法。 其背后的想法是，我們希望在組件初始化后立即運行watch。
// 不好的做法 created: () { this.handleChange() }, methods: { handleChange() { // stuff happens } }, watch () { property() { this.handleChange() } }
但是，Vue為此提供了內置的解決方案，這是我們經常忘記的Vue watch屬性。
我們要做的就是稍微重組watch并聲明兩個屬性：
1.handler (newVal, oldVal)-這是我們的watch方法本身。
2. immediate: true- 代表如果在 wacth 里聲明了之后，就會立即先去執行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會在綁定的時候就執行
// 好的做法
methods: {
handleChange() {
// stuff happens
}
},
watch () {
property {
immediate: true
handler() {
this.handleChange()
}
}
}看完上述內容，你們掌握Vue項目中調用watch數據時會遇到哪些問題的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
