在 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数据属性的初始值。

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

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

查看组件生命周期：

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

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

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

Answer 2

在编写myMessage之前你不应该使用this ，因为 VueJS 不是这样工作的。 它已经考虑了this方面的一切。 你应该这样做：

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

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

Answer 3

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

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

Answer 4

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