Vue項(xiàng)目中調(diào)用watch數(shù)據(jù)時(shí)會(huì)遇到哪些問題

Vue項(xiàng)目中調(diào)用watch數(shù)據(jù)時(shí)會(huì)遇到哪些問題？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

這個(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()

原因還在找，不過解決辦法先記下來。

補(bǔ)充知識(shí)：使用 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)常犯的一個(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()
  }
 }
}

看完上述內(nèi)容，你們掌握Vue項(xiàng)目中調(diào)用watch數(shù)據(jù)時(shí)會(huì)遇到哪些問題的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！