v-on:click="..." 和在 Vue.js 中使用 onclick="..." 之间的区别答案

【问题标题】：Difference between v-on:click="..." and using onclick="..." in Vue.jsv-on:click="..." 和在 Vue.js 中使用 onclick="..." 之间的区别
【发布时间】：2018-12-27 16:31:06
【问题描述】：

v-on:click="..." 和在 Vue.js 中使用 onclick="..." 有什么区别？

我知道使用 v-on:click 您需要在 Vue 对象内编写处理程序（如 example in the docs），但有什么优势？只需编写一个 onclick="..." 来调用函数（在 Vue 对象之外）似乎很简单。

【问题讨论】：

@VicJordan 不，这不是同一个问题。
@VicJordan 除非我弄错了，否则 OP 会询问 v-on 和本机 DOM API 的 onclick 之间的区别。您链接的帖子与此无关。
@VicJordan 我不认为它是重复的，引用的问题解释了句法速记
我想到了两个原因：1.) 一致性 - v-on: 表示法不仅可以用于原生 DOM 事件，还可以用于应用程序定义的 vue 事件，从而获得一致性。 2.) v-on: 处理程序不仅可以定义在 DOM 节点上，还可以定义在 vue 组件上。
@collapsar 我想我开始明白了。你可以处理特殊的东西，比如 v-on:click.self='...'。您的所有功能都必须在 Vue 类中定义，从而进行组织。尽管您的 Vue 课程不会变得庞大吗？另外，这部分帮助我理解了一点vuejs.org/v2/guide/events.html#Why-Listeners-in-HTML

标签： javascript vue.js

【解决方案1】：

主要区别之一是范围访问。 onclick 的绑定范围是全局的，因此您希望它调用的函数必须可以从全局范围访问。 v-on 的作用域是 Vue 模型。

另外一点，Vue 提供了一个非常简单的 API 来通过vm.$emit() 定义自定义事件。使用v-on:customevent="callback" 监听这些事件也很容易，可以很容易地认知映射到假设的onfizz="callback()"。

考虑到这一点，为一致的 API 提供 v-on:click 以及 v-on 提供的其他扩展也是有意义的。

/*
 * This pollutes scope.  You would have to start
 * making very verbose function names or namespace your 
 * callbacks so as not collide with other handlers that
 * you need throughout your application.
 */
function onClickGlobal() {
  console.log("global");
}

const fizzbuzz = {
  template: "<button @click='onClick'>FizzBuzz</button>",
  methods: {
    onClick() {
      this.$emit("fizz");
    }
  }
};

const app = new Vue({
  el: "#app",
  components: {
    fizzbuzz
  },
  methods: {
    onClickModel() {
      console.log("model");
    },
    onFizz() {
      console.log("heard fizz");
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<div id="app">
  <section>
    <h2>Buttons and Clicks</h2>

    <!-- Calling function of the bound scope -->
    <button @click="onClickModel">v-on Model</button>
    <!-- Works as well, but calls the global  -->
    <button @click="onClickGlobal">v-on Global</button>

    <!-- You need to explicitly invoke the function from onclick -->

    <!-- This won't work because onClickModel isn't global -->
    <button onclick="onClickModel()">onclick Model</button>
    <!-- Works because onClickGlobal is global -->
    <button onclick="onClickGlobal()">onclick Global</button>

    <!-- You can technically call onClickModel through the global app -->
    <!-- but you really shouldn't -->

    <!-- Works because app.onClickModel is technically global -->
    <button onclick="app.onClickModel()">onclick Global through app.onClickModel</button>

  </section>
  <section>
    <h2>Custom Events</h2>
    <fizzbuzz @fizz="onFizz"></fizzbuzz>
    <!-- The element below doesn't work -->
    <button onfizz="onClickGlobal">Hypothetical Fizz</button>
  </section>
</div>

【讨论】：

好答案。一件事：<button onclick="onClickGlobal"> 实际上不起作用，因为您需要像onclick="onClickGlobal()" 一样显式调用它。 Vue 会自动调用传递给事件监听器的函数，但onclick 不会
另外，从技术上讲，您可以使用onclick 调用app Vue 实例的方法，例如<button onclick="app.onClickModel()">onclick Model</button>。除非您有一个非常独特的用例，否则几乎可以肯定是不好的做法，但仅供参考
@thanksd 你说得对，我已经更新了示例以反映这一点。

【解决方案2】：

一切都与范围有关。要回答您的问题“但有什么优势”：

只要你在自己的小框架中使用它没有任何好处。但是一旦你想使用它，例如另一个项目本身有一些 JS 组件，你就不得不担心与一些现有的全局函数发生冲突。在组件本身拥有一切的同时，您不必担心任何事情。

【讨论】：