Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to use Composition API in Vue3", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use Composition API in Vue3" this article.

What is Composition API?

Composition API, also known as modular API, is a new feature in Vue3.x. By creating Vue components, we can extract the repeatable part of the interface into reusable code snippets. Before Composition API, the code related to Vue needs to be configured to a specific area of option. If in a large project, this approach will lead to later maintenance complexity, and code reusability is not high, Vue3's Composition API is to solve this problem.

Using ref and reactive to define responsive data in setup

Before you can define data using ref and reactive, you need to deconstruct it from vue.

Import {ref,reactive} from 'vue'

Both ref and reactive can define responsive data, and the defined data can be obtained directly in the Vue template, but if it is obtained by method, the data defined by ref and reactive are different in acquisition. The data defined by ref needs to be obtained indirectly through the value attribute, and the data defined by reactive can be obtained directly, as well as when modifying these two types of data.

Export default {setup () {/ / define responsive data const title = ref using ref ("this is a title"); / / define responsive data const userinfo = reactive ({username: "Zhang San", age: 20}) using reactive; / / get attributes in reactive and directly get const getUserName = () = > {alert (userinfo.username)} / / to obtain the data in ref, you need to use the value attribute const getTitle = () = > {alert (title.value)}; const setUserName = () = > {/ / modify the attribute in reactive can directly modify userinfo.username = "modified Zhang San"} Const setTitle = () = > {/ / modify the attributes in ref by value title.value = "this is the modified title"} Return {title, userinfo, getUserName, getTitle, setTitle, setUserName}}, data () {return {msg: "this is the msg of the Home component"}}, methods: {run () {alert ('this is the run method of the Home component')}

You can use v-model for two-way data binding directly.

ToRefs deconstructs responsive object data

ToRefs is needed because the data deconstructed by toRefs is also responsive, while deconstructed by traditional extension operators does not have responsive characteristics, which is why toRefs is needed.

Deconstructing toRefs from vue

Import {ref,reactive,toRefs} from 'vue'

Make the following modifications in the returned data of setup

Return {title, userinfo, getUserName, getTitle, setTitle, setUserName,... toRefs (article)}

Calculation properties in setup

The evaluation property in setup is similar to the normal calculation property, except that the this cannot be read.

Setup () {let userinfo = reactive ({firstName: ", lastName:"}); let fullName = computed (() = > {return userinfo.firstName +"+ userinfo.lastName}) return {... toRefs (userinfo), fullName}}

Readonly: deep read-only agent

The purpose of readonly is to be able to transform responsive objects into ordinary primitive objects.

Introduce readonly.

Import {computed, reactive,toRefs,readonly} from 'vue'

Pass a responsive object to the readonly.

Let userinfo = reactive ({firstName: "666", lastName: ""}); userinfo = readonly (userinfo)

WatchEffect in setup

WatchEffect in setup has the following characteristics.

It can listen for data changes in setup, and once the data changes, it will execute the callback function in watchEffect.

Even if the data in the setup does not change, it will be executed once initially.

Setup () {let data = reactive ({num: 1}); watchEffect () = > {console.log (`num2=$ {data.num} `);}); setInterval (() = > {data.num++;}, 1000) return {... toRefs (data)}}

Watch in setup

The basic method of using watch to monitor data.

Setup () {let keyword = ref; watch (keyword, (newData,oldData) = > {console.log ("newData is:", newData); console.log ("oldData is:", oldData);}) return {keyword}}

The difference between watch and watchEffect

Watch will not be executed the first time the page is rendered, but watchEffect will.

Watch can get the values before and after the data state changes.

Life cycle Hook function in setup

In setup, a lifecycle hook is similar to calling a function directly.

Setup () {let keyword = ref; watch (keyword, (newData,oldData) = > {console.log ("newData is:", newData); console.log ("oldData is:", oldData);}) onMounted () = > {console.log ('onMounted');}) onUpdated (() = > {console.log (' onUpdated');}) return {keyword}}

Props in setup

The parent component passes the value.

Declare to receive

Props: ['msg'], setup (props) {console.log (props);}

Provide and inject

Sometimes we need to pass data from the parent component to the child component, but if the parent component to the child component is a deeply nested relationship, it will be troublesome to pass through props, in which case we can use provide and inject to do so.

General usage

The root component passes data through provide.

Export default {data () {return {}}, components: {Home}, provide () {return {title: "title in app component"}

Components that need to receive data are declared to receive it through the inject

Export default {inject: ['title'], data () {return {}}, components: {}}

It can be used directly after the declaration is received.

This is the Location component {{title}}

Provide can get the data in this

Export default {data () {return {title: "data of the root component"}}, components: {Home}, provide () {return {title: this.title}

Note: in the general usage above, if the data in the parent component changes, the child component will not change, so it is recommended to use the provide and inject in the composition API below to achieve synchronous changes.

Provide and inject in setup

Root component

Import Home from'. / components/Home.vue'import {ref,provide} from 'vue'export default {setup () {let title = ref (' title' in the app root component); let setTitle = () = > {title.value = "changed title"} provide ("title", title) Return {title, setTitle}, data () {return {}}, components: {Home}}

Components that use data

Import {inject} from 'vue'export default {setup () {let title = inject (' title'); return {title}}, data () {return {}}, components: {}}

Unlike props, data in a child component is synchronized to the parent component if two-way data binding is used.

The above is all the contents of the article "how to use Composition API in Vue3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.