在Vue.js中是否可以对函数进行数据绑定？

核心结论 #

Vue 模板完全支持调用函数进行数据绑定，你遇到的native function输出和Vue的绑定规则无关，是函数本身的逻辑或引用方式出错导致的。

触发native function字样的常见原因 #

• 你定义的nameofFunction执行后返回的是一个函数而非字符串、数字等可直接渲染的基础类型值，模板渲染时会自动调用返回值的toString()方法，原生JS内置函数toString后就会输出包含native function或[native code]的内容
• nameofFunction本身就是未被自定义覆写的JS原生内置函数，或者你给这个函数赋值时直接指向了原生函数，调用后返回值就是原生函数本身
• 你写错了函数名，实际组件中定义的函数名和模板调用的不一致，Vue会从全局作用域查找同名函数，刚好匹配到原生内置函数，调用后返回对应内容
• 未给函数加括号直接写了{{ nameofFunction }}，相当于直接输出函数本身的toString结果，你给出的代码里已经加了括号，这种情况可以排除

正确使用示例 #

<template>
  <!-- 调用组件方法渲染标题 -->
  <title>{{ getPageTitle() }}</title>
</template>

<script>
export default {
  data() {
    return {
      pageName: '首页'
    }
  },
  methods: {
    // 定义返回可渲染值的方法
    getPageTitle() {
      return `我的站点 - ${this.pageName}`
    }
  }
}
</script>

使用注意 #

• 模板中调用的函数必须是当前组件实例挂载的方法，或是作用域内可访问的自定义函数
• 不建议在模板中调用逻辑复杂的函数，模板每次重新渲染都会触发函数执行，性能开销比computed计算属性更高，静态返回值逻辑优先用计算属性实现

内容的提问来源于stack exchange，提问作者alex