vue watch事件监听使用方法

在Vue中，watch属性允许你观察和响应Vue实例上数据的变化。当被观察的数据发生变化时，你可以执行一些自定义的逻辑。这对于执行异步操作或开销较大的操作特别有用，因为你可以控制这些操作只在数据实际变化时执行。

基本用法

在Vue组件中，你可以在watch选项中定义你想要观察的数据属性及其对应的回调函数。当这些属性变化时，相应的回调函数会被调用。

export default {  
  data() {  
    return {  
      question: '',  
      answer: 'I cannot give you an answer until you ask a question!'  
    }  
  },  
  watch: {  
    // 观察question属性的变化  
    question(newVal, oldVal) {  
      if (newVal) {  
        this.getAnswer()  
      }  
    }  
  },  
  methods: {  
    getAnswer() {  
      // 假设这是一个异步操作，比如从API获取答案  
      this.answer = 'Answering...'  
      // 模拟异步操作  
      setTimeout(() => {  
        // 假设这是从服务器获取的答案  
        this.answer = 'Answered ' + this.question  
      }, 1000)  
    }  
  }  
}