Skip to content

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

Open
@xieyuschen

Description

@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:

d5cafeeecd8536da3241c84fa7729075

What is actually happening?

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

image

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>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions