如何在 Vue 组件中正确地使用 data 函数?

在 Vue 组件中正确使用 data 函数有以下几点需要注意:

返回一个对象: data 函数必须返回一个对象,这个对象包含了组件实例需要用到的所有数据属性。

export default {
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    }
  }
}

不要使用箭头函数: data 函数不应该使用箭头函数 () => { ... },因为箭头函数会绑定外部的 this 值,而不是当前组件实例。

// 错误示例
export default {
  data: () => ({
    message: 'Hello, Vue!'
  })
}

访问组件实例: 在 data 函数内部,你可以访问组件实例的其他属性和方法,比如 this.someMethod()。

export default {
  data() {
    return {
      message: this.getWelcomeMessage()
    }
  },
  methods: {
    getWelcomeMessage() {
      return 'Hello, Vue!'
    }
  }
}

不要修改 data: 组件实例的 data 属性是响应式的