在下面的代码中:
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 时，没有呈现文本。
这是为什么？
最佳答案
问题是您正在尝试使用计算属性作为 message 的初始值数据属性。
当 data函数由 Vue 内部调用，计算属性尚未计算，这是很早就完成的，在 created 之前钩子(Hook)。
如果您尝试在 beforeCreated 中记录计算属性的值钩子(Hook)(第一个生命周期钩子(Hook))而不是 mounted在您的示例中，您会看到它是 undefined .
参见 component life-cycle :
(*) 为简洁起见裁剪了图表
计算属性在上图中的“Init injections & reactivity”步骤中进行评估。
计算属性值不能用作 data 属性的初始值, 通常它们取决于 data属性值和其他外部和 react 值(例如 Vuex getter、Vue 路由器参数等)。
关于javascript - 在 Vue.js 中，为什么我的计算属性不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55877051/