Introduction:
In Vue 3 composition api alone with Typescript is available and gaining popularity in web and application development industry. In this lecture, we will talk about the usage and adventages of options API and composition API in term of Life-cycle.
Why Life-Cycle?
Because JavaScript is a single-threaded, non-blocking, asynchronous, concurrent programming language, which allows you to open parts of web pages at the same time and single crush doesn’t cause the shut down of the entire website, and Vue Cli is mainly built with JavaScript. Therefore we need to define a procedure for data fetching and operational logic. Otherwise if the logical function run before the data is ready, it will cause error. If you choose to use options API, you always need to remember or try which part of your events are and where your data are coming from.
Here it is the grammar of the options API. Async is required when await even it defined inside.
Note that setup() is called before data() and components, so inside setup there is no access to data(), such as this.name in async mounted().
How to get and post data in setup()?
Suppose the data provided from other component, you need an inject package from ‘vue’ then therefore async setup can have access to the inject(‘id’). To post a data from setup, we need return it, for example trylist, audioList here. In async beforeUpdate(), we can directly use audioList.
Console.Log Problems
In JavaScript synchronous function, console.log can't execute until the method it called is done. In async function console.log executes independently and doesn’t wait till the response. It may cause error sometimes, so a better way to check data validation is to use it in or Html to show data on pages.
Composition API
Instead of thinking about the sequence of life-cycle in options API. In composition API with TypeScript, everything can be defined inside setup function. The syntax followed:
import { inject } from 'vue'
import { defineComponent } from 'vue'
import {useStore} from ‘vuex’
const store = useStore()
const onsubmitresult = () =>{
}
We can consider composition API is in options setup function without return. With TypeScript, which is object-oriented programming language, you can use it like Java or C++.
Therefore with the concept of object- oriented programming, we don’t need to check the life-cycle of API and step procedure, such as await then ... ,and we only need to think about how logic of function,data types, etc.
Top comments (0)