vue 函数调用加括号与不加括号的区别

在 Vue 中，使用函数的时候，可以加括号也可以不加括号。但这两者之间是有一些区别的。下面是详细介绍“vue 函数调用加括号与不加括号的区别”的攻略。

加括号和不加括号的区别

加括号和不加括号的区别是在函数是否被调用的时候。如果加括号，函数就被立即调用了，如果不加括号，函数只是被赋值给一个变量，函数不会被立即执行。

举个例子，当我们有一个函数 foo：

function foo() {
   return 'hello';
}

我们可以像下面这样调用：

foo() // 返回 'hello'

我们还可以把它赋值给一个变量：

const bar = foo;

现在，我们可以通过 bar 来调用 foo:

bar() // 返回 'hello'

这个例子中，如果在 bar 后加一个括号，就会立即调用 foo，但是不加括号，它只是一个指向 foo 的函数引用。在 Vue 指令或者计算属性中，这种区别特别明显。

例如，我们有下面的 Vue 组件：

<template>
  <div>
    <button @click="increment()">加</button>
    {{ count }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

下面是两种调用方法对应的效果：

<!-- 使用括号 -->
<button @click="increment()">加</button>

<!-- 不使用括号 -->
<button @click="increment">加</button>

如果不加括号，单击按钮时 increment 函数只是被赋值给了事件监听器的回调函数，只有当事件发生时才会被调用；但是如果加上括号，increment 函数会在组件被渲染时就会被调用。

总结

使用括号和不使用括号的主要区别在于是否立即调用函数。在 Vue 组件的模板和计算属性中，使用函数时需要注意这个区别。如果不需要立即调用函数，那么就不要使用括号。