面试题：使用箭头函数定义 Vue 的 watch 属性会有什么结果？

在 Vue 中使用箭头函数定义 watch 属性会导致 this 上下文丢失，从而引发错误或不符合预期的行为。以下是具体原因和解决方法：

1. 问题原因

Vue 的 watch 属性中，回调函数需要通过 this 访问 Vue 实例的属性和方法。然而，箭头函数的 this 是词法作用域的，它会捕获定义时的 this，而不是 Vue 实例。

示例代码

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  watch: {
    message: (newVal, oldVal) => {
      console.log(this); // 这里的 this 不是 Vue 实例
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    },
  },
};

在箭头函数中，this 指向的是定义时的上下文（可能是 undefined 或全局对象），而不是 Vue 实例。
因此，无法通过 this 访问 data、methods 或其他 Vue 实例属性。

2. 正确用法

为了避免 this 上下文丢失，应该使用普通函数（非箭头函数）来定义 watch 属性。

示例代码

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(this); // 这里的 this 是 Vue 实例
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    },
  },
};

使用普通函数时，this 会正确指向 Vue 实例。
可以通过 this 访问 data、methods 等。

3. 箭头函数的替代方案

如果确实需要使用箭头函数（例如为了保持代码风格一致），可以通过以下方式解决：

方法 1：在 `methods` 中定义函数

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  methods: {
    handleMessageChange(newVal, oldVal) {
      console.log(this); // 这里的 this 是 Vue 实例
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    },
  },
  watch: {
    message: 'handleMessageChange', // 引用 methods 中的函数
  },
};

方法 2：使用普通函数包装箭头函数

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  watch: {
    message: function (newVal, oldVal) {
      const handler = (newVal, oldVal) => {
        console.log(this); // 这里的 this 是 Vue 实例
        console.log(`Message changed from ${oldVal} to ${newVal}`);
      };
      handler(newVal, oldVal);
    },
  },
};