這里是說watch調用methods里方法的時候，頁面經常會報找不到方法

這個時候一定要在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里調用方法的坑就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。