在 Vuejs 的数据中使用计算属性答案

【问题标题】：Use computed property in data in Vuejs在 Vuejs 的数据中使用计算属性
【发布时间】：2017-11-03 05:45:57
【问题描述】：

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

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

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

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

【问题讨论】：

为什么需要这个？您始终可以像访问 this.myComputed 一样访问 this.computedData
它不适用于此。计算数据，它是未定义的。
我的意思是您可以像访问数据一样访问计算属性，因此无需执行您想要执行的操作。
所以我正在尝试发出计算属性，但它并没有像 bus.$emit('send-computed-data', this.computedData); 那样工作，那么有什么想法吗？
听起来你的 this 不是调用上下文中的组件

标签： vue.js vuejs2 vue-component

【解决方案1】：

不幸的是，由于组件创建时间的原因，不可能在数据中使用计算属性：数据在计算属性之前进行评估。

【讨论】：

【解决方案2】：

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

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

【讨论】：

您现在甚至可以... watch: { computedData: { handler: val => this.myComputed = val, immediate: true, } } 并完全跳过重复的created 部分... 请参阅vuejs.org/v2/api/#watch

【解决方案3】：

已使用 {{ }} 在模板中访问Computed。
但是你可以使用

watch:{
  //your function here
}

而不是计算

【讨论】：

【解决方案4】：

如果您使用的是计算/反应性对象，那么它应该在 computed 内，而不是在 data 内。

只需更改您的代码以使用计算而不是数据

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

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

您正在尝试将data 用作computed，但不应如此。数据不像计算对象。

这不是因为组件创建时间。如果我们改变组件创建时间怎么办？这不会解决任何问题，因为数据只会采用第一个计算值（只有一个），之后不会更新。

【讨论】：

【解决方案5】：

你可以只使用计算函数

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

在你的模板中

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

【讨论】：

【解决方案6】：

你过度编码了。计算 props 的访问方式与模板中的 data props 相同。

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

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

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

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

【讨论】：

【解决方案7】：

computed 在 data 初始化时不可用。

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



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

延伸阅读：Vue Documentation on Lifecycle Hooks

如果您尝试使用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>

【讨论】：