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