Vue组件中computed无法访问data及类型错误、初始化器缺失问题求助

错误原因 #

1. computed位置错误：你把computed放在了data的返回对象里，这不符合Vue组件结构规范，computed应该和data、methods等同级，作为组件的顶级选项。
2. computed用途错误：计算属性是用来基于现有数据生成新响应式值的，不应该在里面修改原始数据（比如this.value = true）或执行副作用（比如alert），这类操作要放在方法（methods）里。
3. TS类型错误：Vue类组件中，若直接在类里声明属性，必须初始化值，否则TypeScript会提示“Property has no initializer”；另外你之前的写法中，value在data里定义，但类组件无法正确推断类型，导致“property value does not exist on type”错误。

修复后的代码示例 #

方式一：vue-class-component装饰器写法（推荐） #

import Vue from 'vue'
import { Component, Computed } from 'vue-property-decorator'

@Component
export default class Something extends Vue {
  // 初始化value，解决TS初始化错误
  value = false

  // 用methods实现修改值的操作
  valueTransform() {
    this.value = true
    alert(this.value)
  }

  // 如需计算属性，用@Computed装饰器
  @Computed
  get transformedValue() {
    return this.value ? '已激活' : '未激活'
  }
}

方式二：选项式写法适配类组件 #

import Vue from 'vue'

export default class Something extends Vue {
  data() {
    return {
      value: false
    }
  }

  // methods与data同级，作为类的选项
  methods = {
    valueTransform() {
      this.value = true
      alert(this.value)
    }
  }

  // computed同样与data、methods同级
  computed = {
    transformedValue() {
      return this.value ? '已激活' : '未激活'
    }
  }
}

模板使用示例 #

<template>
  <div>
    <p>{{ value ? '值为true' : '值为false' }}</p>
    <p>{{ transformedValue }}</p>
    <button @click="valueTransform">修改值</button>
  </div>
</template>

关键注意点 #

• 永远不要在computed里修改data或执行副作用，保持computed的纯函数特性，只做值的计算。
• Vue类组件中，类属性直接对应data中的响应式数据，初始化后可直接在模板和方法中使用，避免TS类型错误。
• methods用来处理用户交互、数据修改等有副作用的操作。

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