Vue.js 在Vuejs中的数据中使用computed属性

如何在数据中使用计算属性或通过总线发送它

我有以下vue实例，但MyComputerd始终未定义，但computedData工作正常

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

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

---

要使事情尽可能简单，只需在watcher中进行操作，除非您希望将更改发送到不同的组件或有许多变量需要通知，否则您可能必须使用Vuex或事件总线：

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

---

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

已使用{{}在模板中访问Computed

但是你可以使用

---

如果您使用的是计算/反应对象，那么它应该位于

计算的
中，而不是
数据中，而不是

只需将代码更改为使用computed而不是data

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

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

您试图将
数据
用作
计算的
，这不应被忽略。
数据的行为与计算对象不同

这并不是因为组件创建的时间。如果我们更改了组件创建时间会怎么样？这不会解决任何问题，因为数据将只获取第一个计算值（仅一个），并且在之后不会更新。
您对其进行了过度编码。计算道具的访问方式与模板中的数据道具相同

var vm=new Vue({
计算：{
我的计算机（）{
返回“你好，世界”
}
}
})

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


{{mycomputerd}}

您可以只使用计算函数

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

在你的模板中

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


{{computedData}}
您为什么需要这个？你总是可以像访问
this.computedData
一样访问
this.myComputed
它不能使用这个。computedData，它是未定义的。我的意思是，您可以以与访问数据完全相同的方式访问计算属性，这样就不需要执行您试图执行的操作。因此，我尝试发出计算属性，而这不是像so
bus.$emit（'send-computed-data'，this.computedData'）有什么想法吗？听起来这不是调用上下文中的组件，你现在甚至可以<代码>监视：{computedData:{handler:val=>this.mycomputerd=val，immediate:true，}}
并跳过重复的
创建的
部分。。。看见
<template>
  <div>{{ computedData }}</div>
</template>