watch 和 @change 方法_watch和change-CSDN博客

本文链接：https://blog.csdn.net/qq_53810245/article/details/130283908

文章讨论了在Vue中监听select选择变化时，使用watch和@change方法的差异。watch需要定义额外变量并监听其变化，适合复杂逻辑；而@change事件处理函数更直接，适用于简单操作。两者各有适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

问题

当选项改变时进行请求数据，用watch监听select较好还是在select框上添加@change方法较好

分析

1. watch

使用 watch 监听 select 的变化时，需要先定义一个变量来存储当前选项的值，然后在 watch 中监听该变量的变化。当 select 中的选项改变时，该变量的值也会相应改变，从而触发 watch 的回调函数。例如：

<template>
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">{{ option.text }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { text: '选项1', value: '1' },
        { text: '选项2', value: '2' },
        { text: '选项3', value: '3' }
      ]
    }
  },
  watch: {
    selected(newVal, oldVal) {
      // 在这里执行需要的操作，比如请求数据等
      console.log(`选择了 ${newVal}`)
    }
  }
}
</script>

在上面的例子中，我们定义了一个 selected 变量来存储当前选项的值。
使用 watch 来监听 selected 的变化，可以让我们在选项改变时执行一些操作，比如请求数据或更新页面。

2. select

另一种方式是直接在 select 元素上添加 @change 属性，并绑定对应的事件处理函数。例如：

<template>
  <select v-model="selected" @change="handleChange">
    <option v-for="option in options" :value="option.value">{{ option.text }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { text: '选项1', value: '1' },
        { text: '选项2', value: '2' },
        { text: '选项3', value: '3' }
      ]
    }
  },
  methods: {
    handleChange() {
      // 在这里执行需要的操作，比如请求数据等
      console.log(`选择了 ${this.selected}`)
    }
  }
}
</script>