@Change监听事件与vue监听属性：watch的区别？

`@change` 和 `watch` 是 Vue 中用于处理数据变化的两种不同方式。

1. @change:

   - `@change` 是一个事件监听器，用于监听特定DOM元素的变化事件，通常用于表单元素（如输入框、下拉框等）的值变化。

   - 它在用户与表单元素交互并提交了变化时触发，比如输入框失去焦点或者用户选择了一个选项。

   - `@change` 只能用于具有特定的DOM事件（如输入框的输入事件、下拉框的选择事件等）。

   - 适用于处理用户交互引起的数据变化。

   示例：

<template><input type="text" v-model="message" @change="handleChange" /></template><script>export default {data() {return {message: ''};},methods: {handleChange() {console.log('Input changed:', this.message);}}}</script>

2. watch:

   - `watch` 是一个监听器，用于观察数据的变化，并在数据变化时执行相应的操作。 

   - 它可以监听任意数据的变化，不限于特定的DOM事件，是随时监听数据变化，数据一变化就触发，而不是失去焦点等dom事件触发。

   - 适用于对数据进行深层次的监控和处理，比如当一个数据的某个属性变化时执行一些操作。

   示例:

<template><input type="text" v-model="message" /></template><script>export default {data() {return {message: ''};},watch: {message(newMessage, oldMessage) {console.log('Message changed:', newMessage);}}}</script>

总结：

- 使用 `@change` 适合于处理用户与DOM元素的交互，比如输入框的输入、下拉框的选择等事件。
- 使用 `watch` 适合于深度监控数据的变化，无论数据来自何处（可以是props、data等）。
- 如果只关心某个特定DOM元素的变化，可以使用 `@change`；如果需要对数据的变化进行全局监控，可以使用 `watch`。