We need to investigate the migration of VUE 2 to VUE 3 for internal sharing.

I think there’s only one translator online so far, the first few chapters.

But I was in a hurry, so I had to turn it over myself. Translator level 4 is not passed, all depends on Youdao and Google.

Vue 3 — Data Option

The Data optionsbreaking

An overview of

Destructive changes:

  • dataThe option can only be declared asfunction, can no longer be used purelyobjectTo declare.

2. X syntax

In 2.x, developers can declare data options using object or function.

Such as:

<! --ObjectStatement - ><script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'}})</script><! --FunctionStatement - ><script>
  const app = new Vue({
    data() {
      return {
        apiKey: 'a1b2c3'}}})</script>
Copy the code

While this approach provides some convenience in sharing root instance state, it also leads to possible confusion on the root instance.

3. X syntax

In 3.x, the data option is standardized and can only be declared using function that returns object.

The above example has only one implementation in 3.x:

<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>
Copy the code

Migration strategy

For developers using object declarations, we recommend:

  • Extract shared data into an external object and use it asdataThe properties in the
  • Rewrite references to the shared data to point to a new shared object