Data Option breaking

Overview

  • BREAKING: data component option declaration no longer accepts a plain JavaScript object and expects a function declaration.

2.x Syntax

In 2.x, developers could define the data option with either an object or a function.

For example:

  1. <!-- Object Declaration -->
  2. <script>
  3.   const app = new Vue({
  4.     data: {
  5.       apiKey: 'a1b2c3'
  6.     }
  7.   })
  8. </script>
  10. <!-- Function Declaration -->
  11. <script>
  12.   const app = new Vue({
  13.     data() {
  14.       return {
  15.         apiKey: 'a1b2c3'
  16.       }
  17.     }
  18.   })
  19. </script>

Though this provided some convenience in terms of root instances having a shared state, this has led to confusion due to the fact that its only possible on the root instance.

3.x Update

In 3.x, the data option has been standardized to only accept a function that returns an object.

Using the example above, there would only be one possible implementation of the code:

  1. <script>
  2.   import { createApp } from 'vue'
  4.   createApp({
  5.     data() {
  6.       return {
  7.         apiKey: 'a1b2c3'
  8.       }
  9.     }
  10.   }).mount('#app')
  11. </script>

Migration Strategy

For users relying on the object declaration, we recommend:

  • Extracting the shared data into an external object and using it as a property in data
  • Rewrite references to the shared data to point to a new shared object