当v-on指令与@sayHi="me.sayHi()"内联表达式一起提供时，它被一个函数 Package 并编译为如下内容：

el.addEventListener('sayHi', $event => { vm.me.sayHi() })

当一个值是像@sayHi="me.sayHi"这样的函数值时，事件处理程序本身就是一个函数：

el.addEventListener('sayHi', vm.me.sayHi)

正如this question中所解释的，当this的方法被用作回调时，this上下文不是父对象，而当它作为事件处理程序传递时，就会发生这种情况。函数应该显式绑定到所需的上下文，以将其作为this接收。
与this question的区别在于sayHi不是组件方法。Vue选项API中的组件methods内部绑定到组件示例，这不适用于组合API。
sayHi应显式引用无功值，而不是使用this：

const me = reactive({
  name: "foo",
  sayHi: () => {
    console.log("Hi I am : ", me.name);
  },
});

使用sayHi函数作为React性对象的方法没有任何好处，它被VueReact性API忽略。除非有理由让me成为一个对象，例如它被传递给其他组件，否则状态和函数可以分开：

const me = ref("foo")
const sayHi = () => {
    console.log("Hi I am : ", me.value);
};

事件调用的编译方式不同

// <Comp :name="me.name" @sayHi="me.sayHi"/>
let fn = me.sayHi
fn($event) // `this` is undefined us you just calling a function

和

// <Comp :name="me.name" @sayHi="me.sayHi()"/>
// or
// <Comp :name="me.name" @sayHi="() => me.sayHi()"/>
let fn = () => me.sayHi()
fn($event) // `this` is `me` as you are calling an object method