created hook doesn't take effect when mixing composition api and options api and composition api occurs first

[xieyuschen]

Vue version

fbc0c42(default version of playground on 21Aug24)

Link to minimal reproduction

https://play.vuejs.org/#eNp9k02P0zAQhv/KyJe20ioVglNJK8GyBzgAAo6+BGeSeNexI390g6r8d8ZO3FSwWilKYs877zwzcS7swzAU54DswEqP/aAqjyeuAcruzelygd61ME1Q7mnJdbm/0dDSCSsHT++yH4z1cAGLDUzQWNPDhmw376MOxxStsamCIlX0d+jDsN3NCwBhtPOp2jF6bDnrUCnzbKyqOdslm6jb7+G+Uup3JZ5AmVYK8F3lwQbtgJ6+Q9gIi0RYb8D5qsVbf5FTj0Clj6dcfY4bhQV5Uu1rCRxRBPKaEWYpQRbnSgUkF85Sq03QwkujUwGQ2skac4ecLZnTbROfpEXh1Z85I2JntoV3WW1zXUtuVq/ARLHa0v0u3uvKV+tMX0g5ZOJFmcE5+99sGeN2lw18J10xf6Jsc9X84zRxTVe5Xw4Iu2Pe0Ygb2RaPzmg6bcmUM2H6QSq034aY7Dg7ZF7OaATm+Uva8zZggko5HYqnF/Yf3Rj3OPtu0aE9I2fXmK9si34OP/z8iiO9X4O9qYMi9SvBH0jHI8wNRtnHoGvCvtEl2s/pP5C6/eUeRo90EJamIug6Ws7o37h/pfUV923xLg+UTX8Bs0Uwjg==

Steps to reproduce

Can see the right side of the page.

What is expected?

I expected to see from created() function, as the lifecycle diagram shows the created will be executed after setup and Options API:

What is actually happening?

I saw from data() function, seems the created hook is ignored.

System Info

No response

Any additional comments?

if i change the place of setup and data, the issue disappears. the following data works as expected.

<template>
  <h1>{{ msg }} </h1>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      msg: "from data() function"
    };
  },
  setup() {
    const msg = ref("helloworld");

    // Callback logic that runs at the 'created' stage
    const callback = () => {
      console.log("Callback executed");
      msg.value = "from function call inside setup()";
    };

    // Directly call the callback
    callback();
    return {
      msg
    };
  },  
  created(){
     this.msg =  "from created() function"
  }
}
</script>

[edison1105]

@yangxiuxiu1115 ❤️ You were quick and submitted before me, I closed my PR and kept yours. Maybe you can refer to my changes.

[xieyuschen]

@yangxiuxiu1115 ❤️ You were quick and submitted before me, I closed my PR and kept yours. Maybe you can refer to my changes.

Cool, could i know what's the expected way after fixing? The final result should use the data from created, right?

by the way, if one field exist in both setup and data, which value will be chosen?

[yangxiuxiu1115]

setup has a higher priority than the data

[xieyuschen]

setup has a higher priority than the data

fyi @yangxiuxiu1115 , edison said the order is decided by the order, the latter will override the former one. You may need to revise the PR title.

1. If setup is defined before data, the variables used in the render function are from data.
2. If data is defined before setup, the variables used in the render function are from setup.

https://github.com/vuejs/core/pull/11675#discussion_r1724789757

[edison1105]

@xieyuschen The PR title is correct. setup will have a higher priority than data when that PR is merged. That's the expected behavior.

[LinusBorg]

Either way though, it doesn't really make sense to have data option properties (or, for that matter, computed option properties that have the same name as variables returned from setup().