vue2 监听器的两种写法

在 Vue2 中，可以使用两种方式来定义监听器：

1. 使用 `watch` 属性来监听数据的变化，当数据发生变化时，执行相应的回调函数。

watch: {
  // 监听 firstName 数据的变化
  firstName: function (newVal, oldVal) {
    console.log('firstName changed from', oldVal, 'to', newVal)
  }
}

2. 使用 `$watch` 方法来监听数据的变化，当数据发生变化时，执行相应的回调函数。

// 监听 firstName 数据的变化
this.$watch('firstName', function (newVal, oldVal) {
  console.log('firstName changed from', oldVal, 'to', newVal)
})

相关问题

Vue3和vue2的区别和写法差异

### Vue3 与 Vue2 的主要区别

#### 响应式系统的改进
Vue.js 3 对响应式系统进行了重构，采用了基于 Proxy 的实现方法。这不仅提高了性能，还解决了 Vue.js 2 中一些无法检测到的变化情况[^2]。

#### 新增 Composition API
Vue.js 3 引入了 Composition API，这是一种不同于 Options API 的编程范式。通过 `setup` 函数可以在组件初始化之前执行逻辑，并返回需要暴露给模板的数据或函数。这种方式让代码更加模块化和可测试，尤其适合处理复杂的业务场景。

// Vue 2 - Options API
export default {
    data() {
        return {
            message: 'Hello from Vue 2!'
        }
    },
}

// Vue 3 - Composition API
import { defineComponent, ref } from "vue";

export default defineComponent({
    setup() {
        const message = ref('Hello from Vue 3!');
        
        return {
            message,
        };
    },
});

#### 组合式API vs 选项式API
虽然 Vue 3 支持两种风格并存，但推荐使用 Composition API 来构建应用。它提供了更好的逻辑复用机制，比如可以通过自定义 hook 将相似功能封装起来，在多个地方重复利用[^3]。

#### 模板语法更新
对于 v-model 和事件绑定等常用特性，Vue 3 提供了一些简化形式：

- **v-model**: 可以直接指定具体属性名作为修饰符来修改默认行为；
- **事件监听器**: 使用 `.once`, `.capture` 等修饰符变得更加直观；

<!-- Vue 2 -->
<input :value="msg" @input="$emit('update:msg', $event.target.value)" />

<!