Vue 2中如何正确初始化可选类实例类型的data属性

核心规则说明 #

Vue 2 的响应式系统仅会对初始化data函数中声明的属性做递归劫持，后续直接给组件实例追加的属性默认不具备响应式能力。

推荐实现方案 #

方案1：初始化赋值为null（需要响应式时首选） #

直接在data中把secondApi初始化为null即可，该写法满足语义化、响应式两个要求：

• 语义明确：null清晰表示该属性当前处于未初始化的空对象状态
• 符合Vue 2响应式规则：初始化时已声明属性，后续赋值后自动具备响应式能力，无需额外调用$set

代码示例：

new Vue({
  el: '#my-element',
  props: ['enableSecondApi'], // 控制是否启用第二个API客户端的prop
  data() {
    return {
      apiUrl: apiUrl,
      api: new ApiClient(this.apiUrl),
      secondApi: null // 可选API实例初始化为null
    }
  },
  created() {
    if (this.enableSecondApi === true) {
      this.secondApi = new SecondApiClient(this.apiUrl)
    }
  }
})

使用时的判断逻辑非常直观：

// 调用前先判断是否已初始化
if (this.secondApi) {
  this.secondApi.getRequest()
}

方案2：直接挂载到实例（不需要响应式时首选） #

如果secondApi仅用于逻辑层调用，不会在模板中绑定、也不需要监听其变化，完全不需要响应式能力，可以不用在data中声明，直接在created中挂载到组件实例即可，省去响应式劫持的性能开销：

new Vue({
  el: '#my-element',
  props: ['enableSecondApi'],
  data() {
    return {
      apiUrl: apiUrl,
      api: new ApiClient(this.apiUrl)
    }
  },
  created() {
    if (this.enableSecondApi === true) {
      this.secondApi = new SecondApiClient(this.apiUrl)
    }
  }
})

不推荐的写法 #

不建议初始化为空对象{}，空对象不具备SecondApiClient的原型方法，调用时报错信息为xxx is not a function，排查难度高于null对应的Cannot read property 'xxx' of null，且语义模糊，无法区分「未初始化」和「已初始化为空对象」两种状态。

另外JS没有内置的空类数据类型，不需要额外定义空的API子类做初始化，null是目前最通用的实现方案。

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