{"id":11389,"date":"2024-10-03T04:21:30","date_gmt":"2024-10-03T04:21:30","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=11389"},"modified":"2024-10-03T04:21:30","modified_gmt":"2024-10-03T04:21:30","slug":"data-function-with-vue-3-composition-api","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/data-function-with-vue-3-composition-api","title":{"rendered":"Vue 3 Composition API data() Function"},"content":{"rendered":"

With the Composition API, you no longer use `data().` Instead, you declare a reactive state using the `ref` and `reactive` functions.<\/p>\n

1. Using `ref`: For primitive values (like strings, numbers, etc.), use `ref`:<\/p>\n

import { ref } from 'vue';\r\n   export default {\r\n     setup() {\r\n       const message = ref('Hello, Vue!');\r\n       return { message };\r\n     },\r\n   };\r\n<\/pre>\n
You access the value with `message.value`.<\/p>\n
2. Using `reactive`: For objects or arrays, use `reactive`:<\/p>\n
\r\nimport { reactive } from 'vue';\r\n   export default {\r\n     setup() {\r\n       const state = reactive({\r\n         message: 'Hello, Vue!',\r\n         count: 0,\r\n       });\r\n       return { state };\r\n     },\r\n   };\r\n<\/pre>\n
You can access the properties directly, like `state.message`.<\/p>\n
This approach gives you more flexibility and better organization for complex components.<\/p>\n","protected":false},"excerpt":{"rendered":"
With the Composition API, you no longer use `data().` Instead, you declare a reactive state using the `ref` and `reactive` functions. 1. Using `ref`: For primitive values (like strings, numbers, etc.), use `ref`: import { ref } from ‘vue’; export default { setup() { const message = ref(‘Hello, Vue!’); return { message }; }, }; […]<\/p>\n","protected":false},"author":1,"featured_media":11390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-11389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11389"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=11389"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11389\/revisions"}],"predecessor-version":[{"id":11392,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11389\/revisions\/11392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/11390"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=11389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=11389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=11389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}