我以两种方式使用数据选项。在第一个片段数据对象中包含一个键值,但是在第二个数据中是一个函数。有没有个人的好处。在Vue.js Docs上找不到相关的解释 下面是两个代码片段:
new Vue({
el: "#app",
data: {
message: 'hello mr. magoo'
}
});
new Vue({
el: "#app",
data() {
return {
message: 'hello mr. magoo'
}
}
});
两者都给我相同的输出。
最佳答案
在考虑您的具体代码示例时,对您问题的评论似乎错过了一个关键点。
在根 Vue 实例中,即通过 new Vue({ ... })
构建,您可以简单地使用 data: { ... }
没有任何问题。问题是当您拥有通过 Vue.component(...)
定义的可重用组件时。在这些情况下,您需要使用 data() {return { ... };}
或 data: function() {return { ... };}
.
这样做的原因是为了确保对于可重用子组件的每个单独实例,都有一个包含所有正在操作的数据的唯一对象。如果在子组件中使用 data: { ... }
,则相同的数据对象将在子组件之间共享,这可能会导致一些严重的错误。
请查看 corresponding section of the Vue.js documentation有关此问题的更多信息。
关于javascript - Vue.js 中的 'data:' 和 'data()' 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48176345/