VueJS - 跳过观察者的第一个变化 [英] VueJS - Skip watcher's first change

问题描述

我正在为我正在制作的应用程序在 VueJS 中创建一个组件，它有一些观察者可以在我的 var 更改时将逻辑应用于组件的其他部分.一旦组件被初始化，它仍然需要在用户通过 Axios 完成一些事件之后由来自服务器的一些数据进行设置.此数据从主应用程序发出的事件获取到组件.现在的问题是这个 var 通常会改变(并非总是如此)，但我不希望第一次应用该逻辑，所以我决定设置一个标志并在观察者中检查它以返回，但它没有发生:一旦我将该标志设置回 true(它会检查 !this.flag)，无论如何都会触发观察者.代码如下:

I'm creating a component in VueJS for an app I'm making, it has some watchers to apply logic to other parts of the component when my var changes. Once the component is initialized, it still needs to be set by some data from the server coming after a few events done by the user via Axios. This data gets to the component from an event emmited by the main app. Now the thing is that this var usually changes (not always), but I don't want that logic to be applied this first time, so I decided to set a flag and check it in the watcher to return , but it's not happening: as soon as I set that flag back to true (it checks for !this.flag), the watcher gets triggered anyways. Here's the code:

data(){
    return {
        isSet: false,
        myVar: {
            first: 0,
            second: 0
        }
    }
},
watch: {
    'myVar.first': {
        handler: function(newVal, oldVal){
            if(!this.isSet || other.condition){return}
            console.log('first triggered');
        },
        immediate: false
    },
    'myVar.second': {
        handler: function(newVal, oldVal){
            if(!this.isSet || other.condition){return}
                console.log('second triggered');
        },
        immediate: false
    }
},
methods: {
    setBus(){ // gets called on created(){}
        let self = this;
        Bus.$on('my-event', function(c){
            self.doFirstSet(c);
        });
    },
    doFirstSet(c){
        // do other setting
        if(c.someCondition){
            this.doExtraConfig(c);
        }
        this.isSet = true; // at this point is when the watchers get triggered
    },
    doExtraConfig(c){
        // do more stuff
        if('first' in c){
            this.myVar.first = c.first;
        }else if('second' in c){
            this.myVar.second = c.second;
        }
        console.log("watchers don't get triggered yet");
    }
}

知道如何在标志改变时阻止它们开火吗?

Any idea of how to stop them to fire when the flag changes?

推荐答案

Badgy 的回复似乎不那么具有侵入性，也不太容易出错.

Badgy's response seems less intrusive and less prone to error.

我们项目中使用的久经考验的方法，特别是用于跟踪更改的方法，如下所示:

The battle-proven method used in our project, particularly for tracking changes, looks like this:

export default {
  data: () => {
    dataLoaded: false,
    valueThatChanges: 'defaultValue',
  },
  mounted () {
    let self = this
    loadData().then((result) => {
      self.valueThatChanges = result
      self.$nextTick(() => { //with this we skip the first change
        self.dataLoaded = true
      })
    })
  },
  methods: {
    loadData() {
      //your implementation
      return result
    }
  },
  watch: {
    valueThatChanges: function(newValue, oldValue) {
      if (this.dataLoaded) {
        //send tracking change
        console.log('Value was changed from ' + oldValue + ' to ' + newValue + ' via interaction, not by loading')
      }
    }
  }
}

这篇关于VueJS - 跳过观察者的第一个变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！