Vue 中 data 与 computed 设置属性的差异及解决方法

在 Vue 开发过程中，我们常常会遇到各种关于数据绑定和属性计算的问题。其中一个常见的困惑(也是笔者今天遇到的一个小问题)是：

我需要在模板中动态使用一个值，而且是有多种情况的，不是简单的非 A 即 B

<CheckTable
  :checkType="checkType"
  ...其它代码...
  v-on="$listeners"
  v-bind="$attrs"
/>

① 在 data 里面设置某个属性(如checkType)，采用类似这样的方式并不生效，读取到的是默认值 ''

data(){
  return{
    collapseType: this.operateType === 'add' ? 45 : this.taskSubTypeId,
    checkType: this.collapseType === 62 ? 'software' 
    : this.collapseType === 63 ? 'softwareTest' 
    : this.collapseType === 127 ? 'digital' : ''
  }
}

② 而在 computed 中通过 switch 语句设置却能正常工作。

computed: {
  checkType(){
    switch (this.collapseType) {
      case 62:
        return 'software'
      case 63:
        return 'softwareTest'
      case 127:
        return 'digital'
      default:
        return ''
    }
  },
}

在 data 中定义 collapseType 时，若 operateType 和 taskSubTypeId 在初始化阶段有稳定值，collapseType 能得到初始计算结果用于当前渲染。但后续 operateType 或 taskSubTypeId 变化，collapseType 不会更新，它不是响应式计算。 而 checkType 在 data 中设置不生效，是因为 data 中表达式只在初始化时执行一次。当 collapseType 改变，checkType 不会重新计算。

在 computed 中设置 checkType 生效，是由于 computed 基于响应式依赖，collapseType 变化会触发 checkType 重新计算。

在 data 选项和 computed 属性中设置 checkType 出现不同效果，主要是由于它们的执行时机和响应式原理不同。

**在 data

里设置 checkType

不生效的原因**

在 Vue 实例中，data 选项是一个函数，它在组件实例创建时被调用一次，用于初始化组件的数据状态。在 data 函数内部的表达式只会在组件初始化时执行一次，之后不会再根据 this.collapseType 的变化而重新计算。

**在 computed

里设置 checkType

生效的原因**

computed 属性是基于响应式依赖进行缓存的。当依赖的响应式数据（如 this.collapseType）发生变化时，computed 属性会自动重新计算。

问题分析

data 选项的特性

data选项是一个函数，在组件实例创建时被调用一次，用于初始化组件的数据状态。在data函数内部的表达式只会在组件初始化时执行一次。这意味着，当我们像上面那样设置checkType时，它仅仅根据collapseType的初始值进行了计算，之后collapseType值的变化并不会触发checkType的重新计算。所以，尽管collapseType的值改变了，checkType仍然保持着初始化时计算得到的旧值。

computed 属性的特性

computed属性则不同，它是基于响应式依赖进行缓存的。当依赖的响应式数据（如this.collapseType）发生变化时，computed属性会自动重新计算。

总结

如果需要根据其他响应式数据动态计算一个值，应该使用computed属性，而不是在data选项中进行一次性的计算。