Vue.js中的“data：”、“data：()”和“data()”有什么区别？
提问于 2019-04-27 02:09:52
到目前为止，在Vue.js文档中，我发现了两种定义数据的方法：data: {}和data() { return; }。
data: {
defaultLayout: 'default'
}
data() {
return {
defaultLayout: 'default'
}
}到目前为止，我还不知道第三种方式：data: () => ({})。它与上述两种不同之处。
data: () => ({
defaultLayout: 'default'
})
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-04-27 02:13:26
在一个物体的文字里，
data() {
return {
defaultLayout: 'default'
}
}是一个缩写
data: function() {
return {
defaultLayout: 'default'
}
}可以用箭头函数编写：
data: () => ({
defaultLayout: 'default'
})Stack Overflow用户
发布于 2019-04-27 02:22:39
箭头函数是返回值的缩写。如果您编写以下代码：
() => "aaa"它返回"aaa“字符串。所以那里有一个隐藏的返回语句。如果我们看看：
data: () => ({
defaultLayout: 'default'
})返回具有"defaultLayout“属性的对象。让我们看一下您的第一个代码示例。
data() {
return {
defaultLayout: 'default'
}
}等于：
data: function() {
return {
defaultLayout: 'default'
}
}因此，第二和第三代码样本几乎相等。只有一个不同之处，箭头函数有词法"this“。
你的第一个样本是个坏习惯。你可以在这里读到它。
Stack Overflow用户
发布于 2020-08-20 12:22:00
只有第二个例子是有效的。特别是避免为data使用箭头函数，它将this设置为全局函数，这样您就无法引用vue实例中的任何内容。
data: () => ({
someValue = 'default',
defaultLayout: this.someValue //!!undefined!!!
})唯一有效的办法是：
data() {
return {
defaultLayout: 'default'
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55879428
复制相关文章
![linux ldd命令源代码,Linux中ldd命令的用法详解[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/629da835500ca7356f8ea1318f382b90.jpeg)
腾讯云开发者
