解決Vue watch里調(diào)用方法的坑
這里是說watch調(diào)用methods里方法的時(shí)候，頁面經(jīng)常會報(bào)找不到方法
這個時(shí)候一定要在watch里去輸出一下this，
看看this包裹的殼是不是多了好多層，所以找不到方法，雖然我到現(xiàn)在還沒理解為啥有時(shí)候會出現(xiàn)一層或幾層殼的問題。
例如
正常情況下用this.functionname()就可以調(diào)用了。
但是在一些情況下（現(xiàn)在本人還沒找到原因）在控制臺輸出this的時(shí)候你會發(fā)現(xiàn)數(shù)據(jù)經(jīng)常是這樣包裹的a{name},name里面對你的methods還包裹了一層，所以使用方法的時(shí)候就會變成 this.a.methods.funtionname()
原因還在找，不過解決辦法先記下來。
補(bǔ)充知識：使用 Vue 的最佳做法---不要在“created”和“watch”中調(diào)用方法
我就廢話不多說了，大家還是直接看代碼吧~
watch: {
params: {
handler: function (val, oldVal) {
if (val == '1') {
this.initTableData()
}
},
deep: true
},
property: {
immediate: true,
handler: function (val, oldVal) {
this.initTableData()
},
},
},
Vue開發(fā)人員經(jīng)常犯的一個錯誤是他們不必要地在created和watch中調(diào)用方法。 其背后的想法是，我們希望在組件初始化后立即運(yùn)行watch。
// 不好的做法 created: () { this.handleChange() }, methods: { handleChange() { // stuff happens } }, watch () { property() { this.handleChange() } }
但是，Vue為此提供了內(nèi)置的解決方案，這是我們經(jīng)常忘記的Vue watch屬性。
我們要做的就是稍微重組watch并聲明兩個屬性：
1.handler (newVal, oldVal)-這是我們的watch方法本身。
2. immediate: true- 代表如果在 wacth 里聲明了之后，就會立即先去執(zhí)行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會在綁定的時(shí)候就執(zhí)行
// 好的做法
methods: {
handleChange() {
// stuff happens
}
},
watch () {
property {
immediate: true
handler() {
this.handleChange()
}
}
}
以上這篇解決Vue watch里調(diào)用方法的坑就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章給大家介紹了vue封裝公共方法的實(shí)現(xiàn),文章中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
vue管理系統(tǒng)項(xiàng)目中的一些核心技能匯總
Vue是當(dāng)今增長最快的前端框架,Vue 平易近人、用途廣泛且性能卓越,它的語法非常直觀,并且具有友好的學(xué)習(xí)曲線,是開發(fā)人員最想學(xué)習(xí)的頂級前端庫之一,下面這篇文章主要給大家介紹了關(guān)于vue管理系統(tǒng)項(xiàng)目中的一些核心技能,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了如何修改vue-treeSelect的高度，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue3全局導(dǎo)入bootstrap5方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vuecli4插件svg-sprite-loader使用svg圖標(biāo)
這篇文章主要為大家介紹了vuecli4插件svg-sprite-loader使用svg圖標(biāo)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了vue項(xiàng)目的訪問端口及其設(shè)置方式，具有很好的參考價(jià)值，希望對大家有所幫助。2022-10-10
這篇文章主要介紹了Vue echarts封裝的實(shí)現(xiàn)，Echarts，它是一個與框架無關(guān)的JS圖表庫，但是它基于JS，這樣很多框架都能使用它2023-01-01
vue2.x中的provide和inject用法小結(jié)
這篇文章主要介紹了vue2.x中的provide和inject用法小結(jié),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
在Vue中使用axios請求攔截的實(shí)現(xiàn)方法
這篇文章主要介紹了在Vue中使用axios請求攔截,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了自定義Vue組件打包、發(fā)布到npm及使用教程 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05