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 时，没有呈现文本。

这是为什么？

Answer 1

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

当 data函数由 Vue 内部调用，计算属性尚未计算，这是很早就完成的，在 created 之前钩子(Hook)。

如果您尝试在 beforeCreated 中记录计算属性的值钩子(Hook)(第一个生命周期钩子(Hook))而不是 mounted在您的示例中，您会看到它是 undefined .

参见 component life-cycle :

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

计算属性在上图中的“Init injections & reactivity”步骤中进行评估。

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