javascript - 在 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，不会呈现任何文本。

为什么是这样？

标签： javascriptvue.js

Answer 1

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

当data函数被 Vue 内部调用时，计算的属性还没有被评估，这是很早就完成的，在created钩子之前。

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

查看组件生命周期：

(*) 为简洁起见裁剪了图表

在上图中的“初始注入和反应性”步骤中评估计算的属性。

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