为啥 bind() 在 Vue 模板事件处理程序中的工作方式如此不一致？

Posted 2023-02-16

【中文标题】为啥 bind() 在 Vue 模板事件处理程序中的工作方式如此不一致？

【英文标题】：Why does bind() work so inconsistently in Vue template event handlers?为什么 bind() 在 Vue 模板事件处理程序中的工作方式如此不一致？

【发布时间】：2022-01-08 14:53:29

【问题描述】：

今天在我的模板中尝试一些花哨的语法时，我遇到了 Vue 事件处理程序中 bind() 函数的令人困惑的行为。

忽略任何可能的不良做法以及绑定在这里完全没有意义的事实，请查看以下 2 个代码示例。

1.

<template>
  <button @click="(() => console.log('this gets logged')).bind()"></button>
</template>

<script>
export default 
  computed: 
    console: () => console,
  ,

</script>

<template>
  <button @click="myFunc.bind()"></button>
</template>

<script>
export default 
  methods: 
    myFunc ()  console.log("this doesn't get logged") 
  

</script>

代码示例 1 在单击按钮时正确地将输出记录到控制台，但由于某种原因，示例 2 没有记录任何内容。为什么？

【参考方案1】：

示例 2 中的myFunc.bind() 返回对新函数的引用，但不调用它。

要使其按预期工作，myFunc.bind()() 是必需的。

<template>
  <button @click="myFunc.bind()()"></button>
</template>

看起来很奇怪，但很有效

【讨论】：

示例 1 也没有调用它。

示例 1 中的

(() => console.log('this gets logged')).bind() 还返回对新函数的引用并且不调用它，但它可以工作。

bind() 对 console.log 没有任何影响。 console.log 在没有bind() 的情况下工作。使用封闭的外括号( 函数)，调用内部函数。

用括号括起来的函数不会被调用。