@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`。