不幸的是，由于组件创建时间的原因，无法在数据中使用computed属性：data在计算属性之前求值。

为了使事情尽可能简单，只需在watcher中完成工作，除非你想将更改发送到不同的组件，或者你想通知很多变量，那么你可能必须使用Vuex或事件总线：

var vm = new Vue({
  data(){
    return{
      myComputed: '',
      computedData: 'Hello World'
    }
  },
  created() {
    this.myComputed = this.computedData;
  },
  watch: {
    computedData() {
      this.myComputed = this.computedData;
    }
  }
});

1. Computed在模板中已可使用{{ }}访问。
   1.但您可以使用

watch:{
  //your function here
}

而不是计算的

如果你使用的是计算/React对象，那么它应该在computed内部，而不是在data内部。
只需将代码更改为使用computed而不是data

var vm = new Vue({
  data(){
    return{}
  },

  computed: {
    computedData(){
      return 'Hello World'
    },
    myComputed(){
     return this.computedData
    }
  }
})

你试图使用data作为computed，这是不应该的。数据不像计算对象。
这并不是因为组件创建的时间。如果我们更改组件创建时间会怎样？这不会解决任何问题，因为数据将仅采用第一个计算值（仅一个）并且之后将不更新。

你可以只处理计算函数

var vm = new Vue({
      data(){
        return{
          //is not necessary
        }
      },
    
      computed: {
        computedData(){
          return 'Hello World'
        }
      }
    })

在您的模板中

<template>
  <div>{{ computedData }}</div>
</template>

你太夸张了。计算属性的访问方式与模板中的数据属性相同。

var vm = new Vue({
  computed: {
    myComputed(){
      return 'Hello World'
    }
  }
})

在模板中，您可以访问此内容，就像您访问数据一样：

<template>
  <div>{{ myComputed }}</div>
</template>

https://v2.vuejs.org/v2/guide/computed.html

尝试在方法中转换计算的

var vm = new Vue({
  data(){
    return{
      myComputed: this.computedData
    }
  },

  methods: {
    computedData(){
      return 'Hello World'
    }
  }
})

这很简单，它的工作原理（不是React式的），但有一个成本：
https://medium.com/notonlycss/the-difference-between-computed-and-methods-in-vue-js-9cb05c59ed98

初始化data时computed不可用。

如果它应该是一次性的（并且不是被动的），您可以通过使用created()钩子在计算属性可用时设置数据来实现这一点：

export default {
  data: () => ({
    myDataBackend: '',
  }),
  computed: {
    computedData () {
      return 'Hello World'
    }
  },
  created() {
    this.$set(this, 'myDataBackend', this.computedData)
  }
}

进一步阅读：有关生命周期挂钩的Vue文档

如果您尝试使用v-model：

您也可以在元素中使用:value和一些事件，如@change或@keyup。

• :value是输入元素最初使用的值
• 在输入字段中写入一些字母后，@keyup事件会更改数据。

通常，事件携带target.value的更新表单值

• changeMyData方法设置值
• 计算的属性监听数据变化，并且输入字段的:value得到更新。
• 注意：* 我使用data作为数据存储。但是你也可以使用vuex来代替。

<template>
<div>
  <input
    type="text"
    :value="computedData"
    @keyup="changeMyData"
  />
  <p>{{myDataBackend}}</p>
</div>
</template>

<script>

export default {
  data: () => ({
    myDataBackend: 'Hello World'
  }),
  methods: {
    changeMyData(evt) {
        this.$set(this, 'myDataBackend', evt.target.value)
        console.log('Changed the value to: ' + evt.target.value)
    }
  },
  computed: {
    computedData () {
      return this.myDataBackend
    }
  }
}
</script>

是的，你可以通过使用vue的computed函数在data中使用computed。这里有一个例子。

<template>
  <div>{{ person.info }}</div>
  <div><button @click="changePersonId">change id</button></div>
</template>

<script>
import { computed } from 'vue';

export default {
  data: function() {
    return {
      person: {
        name: 'Evgeny',
        id: this.generateId(),
        info: computed(() => `${this.person.name} with id = ${this.person.id}`)
      }
    }
  },

  methods: {
    generateId() {
      return +`${Math.random()}`.slice(2);
    },

    changePersonId() {
      this.person.id = this.generateId();
    }
  }
}
</script>

这是一个关于性能的有趣问题。我希望它没有坏的影响。如果没有，那么这是一个很好的机会，将属性分组在一起，并在子组件之间共享它，而无需在那里重复计算属性。