在Vue.js中什么是内联处理器？

Question

在文档中 内联处理器中的方法：

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

请问下内联处理器是指的什么呢？

Answer 1

比较一下这两个写法有什么不同：

写法一

<div id="example-3">
  <button v-on:click="say">Say hi</button>
  <button v-on:click="say">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function () {
      alert('hello');
    }
  }
});

写法二

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message);
    }
  }
});

差异

一个有括号，一个没括号，对吧？

没括号的这个，直接就是函数名，有括号的这个，实际是一条JS语句，有括号的这个就叫『内联处理器』。

没括号的好处

看上去，有括号的更直观，更容易理解。那为什么还要搞什么无括号？

没括号的有这么一个好处：

<div id="example-3">
  <button v-on:click="say">Say hi</button>
  <button v-on:click="say">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (event) {
      alert(event.target.tagName);
    }
  }
});

虽然我没括号，但我天生自带event参数呀，你在上面不用写event，我下面就自带event了，你有括号的括号里几个参数，下面就得几个参数，你不能无中生有的。

有括号的逆袭

为了让有括号的也能得到无括号娘胎里自带的event参数，我们可以这样写：

<div id="example-3">
  <button v-on:click="say('hi', $event)">Say hi</button>
  <button v-on:click="say('what', $event)">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message, event) {
      alert(message);
      alert(event.target.tagName);
    }
  }
});

送他一个美刀$，于是有括号的也可以快乐地使用天然无雕饰的event参数了！

Answer 2

我知道内联语句，这样说的话也就是say()，这算一个内联处理器。say('hi')这也是一个内联处理器。但是say不算。

Answer 3

今天遇到了一个错误：vue infinite update loop

排查了一下发现是因为我用JSX进行列表渲染时用这种内联表达式给子组件绑定了事件。

JSX处理时不会在外层给你包层方法，这也算是JSX与模板语法的差异之一。