diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index ea9e6d5bdf..12805674a5 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -94,6 +94,7 @@ const sidebar = { 'migration/functional-components', 'migration/async-components', 'migration/custom-directives', + 'migration/data-option', 'migration/filters', 'migration/fragments', 'migration/render-function-api', diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md new file mode 100644 index 0000000000..ee2e759adb --- /dev/null +++ b/src/guide/migration/data-option.md @@ -0,0 +1,67 @@ +--- +types: + - breaking +--- + +# Data Option {{ type }} + +## 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: + +```html + + + + + +``` + +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: + +```html + +``` + +## How to Migrate + +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