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

Question

在下面的代码中：

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

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

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

https://jsfiddle.net/hk49eL38/

如果我替换：

this.myMessage 使用字符串（例如“ Hello world”），则可以正确呈现。

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

为什么是这样？

Answer 1

问题是您正在尝试将计算属性用作message数据属性的初始值。

当dataVue在内部调用该函数时，尚未评估计算出的属性，这是在created挂钩之前很早完成的。

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

请参阅组件生命周期：

（*）为简洁起见裁剪图

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

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