Vue.js能否在data函数中调用methods中定义的方法？

问题原因 #

首先可以明确：不能在data()函数执行阶段调用methods里的方法，核心原因是Vue实例的初始化生命周期顺序是固定的：

1. 初始化props
2. 初始化data
3. 初始化methods、computed等配置

你写的data()函数执行的时候，包括全局mixin注入的方法在内的所有methods都还没挂载到this上，自然无法调用。
另外你的代码写法本身也存在问题：直接写capitalizeFirstLetter('title')是在全局作用域查找这个函数，而不是找挂载在Vue实例上的方法，就算初始化顺序允许，也得写成this.capitalizeFirstLetter('title')才能访问到实例方法。

解决方案 #

方案1：抽离公共工具函数（最推荐） #

把通用的字符串处理函数单独抽成公共工具模块，不需要挂载到Vue实例上，哪里需要就导入哪里用：

// utils/string.js
export const capitalizeFirstLetter = (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

组件里直接导入使用即可：

import { capitalizeFirstLetter } from '@/utils/string'
export default {
  data() {
    return {
      title: capitalizeFirstLetter('title')
    }
  }
}

方案2：在created钩子中赋值 #

如果需要使用实例上挂载的方法，可以在data中先给初始值，等到created阶段（此时methods已经完成挂载）再赋值：

data() {
  return {
    title: ''
  }
},
created() {
  this.title = this.capitalizeFirstLetter('title')
}

方案3：使用计算属性 #

如果这个标题值后续需要根据其他响应式变量动态变化，用计算属性更合适：

computed: {
  title() {
    return this.capitalizeFirstLetter('title')
  }
}

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