在Vue.js中，为什么我的计算属性不起作用

Question

在以下代码中：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class YourService {
  // Your service logic goes here
}

new Vue({
  el: '#app',
  computed: {
    myMessage: function() {
      return "hello";
    }
  },
  data: {
    message: this.myMessage
  },
  mounted: function() {
    console.log(this.myMessage);
  }
})

https://jsfiddle.net/hk49eL38/

如果我替换：

<script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ message }}</p> </div>带有字符串（例如“ Hello world”），它可以正确呈现。

但是当我使用this.myMessage时，不会显示任何文本。

这是为什么？

Answer 1

问题是您试图将计算所得的属性用作message数据属性的初始值。

当Vue内部调用data函数时，尚未对计算的属性进行求值，这是在created钩子之前很早完成的。

如果您尝试将计算属性的值记录在beforeCreated钩子（第一个生命周期钩子）中，而不是示例中的mounted，您将看到它是{ {1}}。

请参见component life-cycle：

（*）为简洁起见裁剪图

在上图中的“初始进样和反应性” 步骤中评估计算出的特性。

计算的属性值不能用作undefined属性的初始值，通常它们取决于data属性值以及其他外部和反应性值（例如Vuex吸气剂，Vue路由器参数，等）。

Answer 2

您不应该在编写this之前使用myMessage，因为VueJS不能那样工作。它已经考虑了this上下文中的所有内容。您应该这样：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ myMessage }}</p>
</div>

Answer 3

尝试在安装组件时将 myMesssage 的值设置为消息。

mounted: function() {
    this.message = this.myMessage
}

Answer 4

尝试在计算出的我的消息中更改数据消息