解決vue偵聽器watch,調(diào)用this時出現(xiàn)問題的方法

發(fā)布時間：2020-11-02 15:53:05 來源：億速云閱讀：844 作者：Leah 欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)解決vue偵聽器watch,調(diào)用this時出現(xiàn)問題的方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

watch偵聽器中，我們要將新的值賦給this.a出錯

watch: {
 value: (newV, oldV) => {
 this.a = newV;
 }
}

這里報錯undefined，這里錯誤的原因是不能寫成箭頭函數(shù)。寫成箭頭函數(shù)后，this會取上下文，而不是組件里面的this了，正確寫法為：

watch: {
 value: function(newV, oldV) {
 this.a = newV;
 }
}

如下圖:

解決vue偵聽器watch,調(diào)用this時出現(xiàn)問題的方法

看考鏈接：https://cn.vuejs.org/v2/api/#watch

PS：好吧，雖然問題可以解決，但是具體為什么不能寫成箭頭函數(shù)，講實話，我現(xiàn)在也不懂，知道原理的可以給我評論，非常感謝。

來自yyf994的評論解答：

var app = new Vue({
   el: '#app',
   data: {
    a: 1
   },
 
   watch: {
    a:()=> {
     console.log(this)
    }
   },
 
   methods: {
    onClick() {
     this.a++;
    }
   } 
  })

在babel 編譯后是這樣子的

"use strict"; 
var _this = void 0; 
var app = new Vue({
 el: '#app',
 data: {
 a: 1
 },
 watch: {
 a: function a() {
  console.log(_this);
 }
 },
 methods: {
 onClick: function onClick() {
  this.a++;
 }
 }
});

因為箭頭函數(shù) 的函數(shù)體內(nèi)的this對象，就是定義時所在的對象，而不是使用時所在的對象。

補充知識：vue watch用法和沒反應的原因 =>看看下面是不是還有一個watch

我就廢話不多說了，大家還是直接看代碼吧~

watch: { 
 stop: function(newVal, old){ //非josn用法
   console.log(newVal)
  },
 'form.fdnDct': function(newVal, old){ //josn用法
   console.log(newVal)
  },
 }

 //這也是一種用法
 watch: {
  'browse_integral_info.buy':'RMB',     //購買積分轉(zhuǎn)化成人民幣
  'browse_integral_info.give':'GIVE',     //完成邀請瀏覽任務贈送
  'bargain_integral_info.give':'BARGAINGIVE',
  deep:true,
 },
 methods: {
  RMB: function(){ 
   this.RMBs = this.browse_integral_info.buy/100
  },
 },

看完上述內(nèi)容，你們對解決vue偵聽器watch,調(diào)用this時出現(xiàn)問題的方法有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細節(jié)

解決vue偵聽器watch,調(diào)用this時出現(xiàn)問題的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽