解決Vue watch里調(diào)用方法的坑
這里是說watch調(diào)用methods里方法的時候，頁面經(jīng)常會報找不到方法
這個時候一定要在watch里去輸出一下this，
看看this包裹的殼是不是多了好多層，所以找不到方法，雖然我到現(xiàn)在還沒理解為啥有時候會出現(xiàn)一層或幾層殼的問題。
例如
正常情況下用this.functionname()就可以調(diào)用了。
但是在一些情況下（現(xiàn)在本人還沒找到原因）在控制臺輸出this的時候你會發(fā)現(xiàn)數(shù)據(jù)經(jīng)常是這樣包裹的a{name},name里面對你的methods還包裹了一層，所以使用方法的時候就會變成 this.a.methods.funtionname()
原因還在找，不過解決辦法先記下來。
補充知識：使用 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)用方法。 其背后的想法是，我們希望在組件初始化后立即運行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就跟我們以前的效果一樣，不會在綁定的時候就執(zhí)行
// 好的做法
methods: {
handleChange() {
// stuff happens
}
},
watch () {
property {
immediate: true
handler() {
this.handleChange()
}
}
}
以上這篇解決Vue watch里調(diào)用方法的坑就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中如何去掉空格的方法實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
下面小編就為大家分享一篇vue中v-for加載本地靜態(tài)圖片方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了詳解Vue2.5+遷移至Typescript指南，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了詳解Vue中watch對象內(nèi)屬性的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue項目打包后怎樣優(yōu)雅的解決跨域,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
一文讀懂vue動態(tài)屬性數(shù)據(jù)綁定（v-bind指令）
這篇文章主要介紹了vue動態(tài)屬性數(shù)據(jù)綁定（v-bind指令）的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了Vue3實現(xiàn)登錄表單驗證功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
使用Vant完成DatetimePicker 日期的選擇器操作
這篇文章主要介紹了使用Vant完成DatetimePicker 日期的選擇器操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本文主要介紹了Vue實現(xiàn)前后端完全分離的項目實戰(zhàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)
這篇文章主要介紹了安裝nvm?node版本管理器(vue2.x遷移vue3.x)的操作方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01