语法 - 高级语法

Question

我知道vue期望数据是一个返回对象的函数，所以：

data () {
  return {}
}

有效，但这不起作用：

data: () => {

}

为什么它不起作用？不是'它们都是返回对象的相同函数

Answer 1

那是因为当你在arrow functions中使用{时，你会开始一个块，而不是一个对象。

以下方法可行：

data: () => ({

})

注意(和)。来自MDN/Arrow Functions/Syntax：

语法 - 高级语法

// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})

但是，无论如何，不要在Vue中使用它们。来自API Docs：

请注意您不应使用data属性的箭头功能（例如data: () => { return { a: this.myProp }}）。原因是箭头函数绑定了父上下文，因此this将不是您期望的Vue实例，并且this.myProp将是未定义的。

更新：

每条评论：但即使采用推荐的方式，您仍然无法使用this那么重点是什么？

你可以。考虑props。您可能想要改变prop的值（使用v-model），这是不推荐的。要实现该功能，最佳做法是在internalStuff中创建内部属性（例如data）并使用props值初始化：

Vue.component('my-component', {
  props: ['stuff'],
  data() {
    return {internalStuff: this.stuff}; // this works fine, wouldn't with arrow functions
  },
  template: `<input type="text" v-model="internalStuff">`
}

vuejs数据函数返回对象不起作用

1 个答案:

语法 - 高级语法