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

This article mainly explains "how to use API in Vue3". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use API in Vue3".

1. Initialize the project / / ① npm I-g @ vue/cli// ② vue create my-project// ③ npm install @ vue/composition-api-vue'import VueCompositionApi from / ④ main,jsimport Vue from 'vue'import VueCompositionApi from' @ vue/composition-api'Vue.use (VueCompositionApi) 2. Setup method

Setup is a new method of manipulating component properties in vue3.x. It is a unified API that exposes all the properties and methods within the component.

2.1 timing of execution

The timing of setup execution is after beforeCreate and before created.

Setup (props, ctx) {console.log ('setup')}, beforeCreate () {console.log (' beforeCreate')}, created () {console.log ('created')}, 2.2 accept props data / / pass the first formal parameter of the setup function Receive props data: setup (props) {console.log (props)}, / / define the parameter name allowed to be passed by the current component in props: props: {p1: String} / * {} p1: "pass value to com-setup" get p1: "reactiveGetter () set p1: reactiveSetter (newVal) _ _ proto__: Object*/2.3 context"

The second formal parameter of the setup function is a context object, which contains some useful properties that need to be accessed through this in vue 2.x. In vue 3.x, they are accessed as follows:

Setup (props, ctx) {console.log (ctx) console.log (this) / / undefined}, / * attrs: Objectemit: listeners: Objectparent: VueComponentrefs: Objectroot: Vue...*/

Note: this cannot be accessed in the setup () function

3. Reactive

The reactive function takes a normal function and returns a responsive data object.

The reactive function is equivalent to the Vue.observable () function in vue 2.x, and the reactive () function is provided in vue 3.x to create responsive data objects. The basic code example is as follows:

The current count value is: {{count}}

+ 1 import {reactive} from'@ vue/composition-api'export default {setup (props, ctx) {/ / create a responsive data object, and the resulting state is similar to the responsive object const state = reactive ({count: 0}) state.count + = 1 console.log (state) / / setup function returned by data () in vue 2.x. Return the responsive data object out for template to use return state} 4. Ref

The ref () function is used to create a responsive data object based on a given value, and the return value of the ref () function call is an object that contains only one .value attribute:

02.ref.vue file

RefCount: {{refCount}}

+ 1 import {ref} from'@ vue/composition-api'export default {setup () {/ create a responsive data object count with an initial value of 0 const refCount = ref (0) / / if you want to access the value of a responsive data object created by ref (), you must pass the .value attribute. The .value attribute console.log (refCount.value) / output 0 / / Let the value of refCount + 1 refCount.value++ / / print the value of refCount again console.log (refCount.value) / / output 1 return {refCount} 4.1 to access responsive data created by ref in the reactive object

When the responsive data object created by ref () is mounted on reactive (), the responsive data object is automatically expanded to the original value and can be accessed directly without going through .value, for example:

Setup () {const refCount = ref (0) const state = reactive ({refCount}) console.log (state.refCount) / / output 0 state.refCount++ / / No .value is needed to directly access the original value console.log (refCount) / / output 1 return {refCount}}

Note: the new ref will overwrite the old ref. The sample code is as follows:

Setup () {/ / create ref and mount to reactive const C1 = ref (0); const state = reactive ({C1}); / / create ref again, named c2 const c2 = ref (9); / / replace old ref C1 with new ref c2 state.c1 = c2; state.c1++; console.log (state.c1); / / output 10 console.log (c2.value); / / output 10 console.log (c1.value) / / output 0} 5. IsRef

IsRef () is used to determine whether a value is an object created by ref (); application scenarios: when you need to expand a value that may be created for ref (), for example:

Import {ref, reactive, isRef} from "@ vue/composition-api"; export default {setup () {const unwrapped = isRef (foo)? Foo.value: foo}}; 6. ToRefs

The toRefs () function can convert a responsive object created by reactive () into a normal object, but each attribute node on this object is responsive data of type ref ().

03.toRefs.vue file

{{count}}-{{name}}

+ 1 + 1 import {reactive, toRefs} from "@ vue/composition-api"; export default {setup () {/ / responsive data const state = reactive ({count: 0, name: "zs"}); / / method const add = () = > {state.count + = 1;} Return {/ / non-responsive data / /... state, / / responsive data... toRefs (state), add};}; 7. Computed calculation properties 7.1 read-only calculation properties 04.computed.vue file

RefCount: {{refCount}}

Calculate the value of the attribute computedCount: {{computedCount}}

The value of refCount + 1 calculation attribute computedCount + 1 import {computed, ref} from'@ vue/composition-api'export default {setup () {const refCount = ref (1) / / read-only let computedCount = computed (() = > refCount.value + 1) console.log (computedCount) return {refCount, computedCount}

RefCount: {{refCount}}

Calculate the value of the attribute computedCount: {{computedCount}}

RefCount + 1 import {computed, ref} from'@ vue/composition-api'export default {setup () {const refCount = ref (1) / / readable and writable let computedCount = computed ({/ / value function get: () = > refCount.value + 1 / / assignment function set: val = > {refCount.value = refCount.value-5}}) console.log (computedCount.value) / / the operation of assigning values to calculated attributes After the set function computedCount.value = 10 console.log (computedCount.value) / / triggers the set function, the value of count will be updated console.log (refCount.value) return {refCount, computedCount} 8. Watch

The watch () function is used to monitor changes in certain data items, thus triggering certain actions, which need to be imported on demand before use:

Import {watch} from'@ vue/composition-api'8.1 basic usage 05.watch.vue file

RefCount: {{refCount}}

Import {watch, ref} from'@ vue/composition-api'export default {setup () {const refCount = ref / / defines watch, as long as the count value changes The watch callback / / component will be triggered to execute watch watch (() = > console.log (refCount.value), {lazy: false}) setInterval (() = > {refCount.value + = 2}, 5000) return {refCount}} when it is first created. 8.2 Monitoring data sources

Monitor data sources of type reactive:

05.watch.vue file

Count: {{count}}

/ / not responsive data import {watch, ref, reactive} from'@ vue/composition-api'export default {setup () {const state = reactive ({count: 100}) watch (/ / listening count () = > state.count, / / if the transformation executes the following functions (newVal, oldVala) = > {console.log (newVal, oldVala)} {lazy: true}) setInterval (() = > {state.count + = 2}, 5000) return state}}

Monitor data sources of type ref:

Export default {setup () {/ / define the data source let count = ref (0); / / specify the data source to monitor watch (count, (count, prevCount) = > {console.log (count, prevCount)}) setInterval (() = > {count.value + = 2}, 2000) console.log (count.value) return {count}}

Monitor data sources of type reactive:

Export default {setup () {const state = reactive ({count: 100, name: 'houfei'}) watch (/ / listen count name [() = > state.count, () = > state.name], / / if the transformation executes the following functions ([newCount, newName], [oldCount, oldName]) = > {console.log (newCount, oldCount) console.log (newName, oldName)} {lazy: true} / / when watch is created Do not execute the code in the callback function) setTimeout (() = > {state.count + = 2 state.name = 'qweqweewq'}, 3000) return state}}

Monitor data sources of type ref:

Export default {setup () {/ / define the data source const count = ref (10) const name = ref ('zs') / / specify the data source watch ([count, name], ([newCount, newName], [oldCount, oldName]) > {console.log (newCount, oldCount) console.log (newName, oldName)} {lazy: true}) setInterval (() = > {count.value + = 2}, 2000) console.log (count.value) return {count}} 8.4 clear Monitoring

The watch monitor created within the setup () function automatically stops when the current component is destroyed. If you want to explicitly stop a monitor, you can call the return value of the watch () function, with the following syntax:

/ / create a monitor and get the stop function const stop = watch (() = > {/ *... * /}) / / call the stop function to clear the corresponding monitoring stop ()

Count: {{count}}

Stop listening to import {watch, ref, reactive} from "@ vue/composition-api" Export default {setup () {/ / define data source const count = ref (10) const name = ref ('zs') / / specify the data source to monitor const stop = watch ([count, name], ([newCount, newName], [oldCount, oldName]) = > {console.log (newCount, oldCount) console.log (newName, oldName)} {lazy: true}) setInterval (() = > {count.value + = 2 name.value = 'houyue'}, 2000) / / stop monitoring const stopWatch = () = > {console.log ("stop monitoring But the data is still changing ") stop ()} console.log (count.value) return {stop, count, stopWatch} 8.5 clear invalid asynchronous tasks in watch

Sometimes, when the value monitored by watch changes, or after the watch itself is stop, we expect to be able to clear those invalid asynchronous tasks, and a cleanup registrator function is provided in the watch callback function to perform the cleanup. The cleanup function is called under the following circumstances:

Watch has been repeated.

Watch was forced to stop.

An example of code in Template is as follows:

Keywords:--- {{keywords}}

An example of code in Script is as follows:

Import {watch, ref, reactive} from "@ vue/composition-api"; export default {setup () {/ / define responsive data keywords const keywords = ref (""); / / Asynchronous task: print the keywords entered by the user const asyncPrint = val = > {/ / print return setTimeout (() = > {console.log (val);}, 1000);} / / define watch snooping watch (keywords, (keywords, prevKeywords, onCleanup) = > {/ / execute asynchronous task and get timerId const timerId = asyncPrint (keywords) that closes asynchronous task; / / if watch snooping is executed repeatedly, the last outstanding asynchronous task onCleanup (() = > clearTimeout (timerId)) will be cleared first. }, / / watch is not executed when it is first created {lazy: true}); / / return the data needed in template to return {keywords};}; 9. Provide & inject component passes a value

Provide () and inject () enable data transfer between nested components. These two functions can only be used in the setup () function. The provide () function is used in the parent component to pass data down; in the child component, inject () is used to get the data passed by the upper layer.

9.1 sharing common data

App.vue root component:

Parent import {ref, provide} from'@ vue/composition-api'import Son from'. / components/06.son.vue'export default {name: 'app', components: {' son': Son}, setup () {const color = ref ('green') provide (' themecolor', color) return {color}

06.son.vue son components:

Son component import {inject} from'@ vue/composition-api'import Grandson from'. / 07.grandson.vue'export default {components: {'grandson': Grandson}, setup () {const color = inject (' themecolor') return {color}

07.grandson.vue son components:

Grandson component import {inject} from'@ vue/composition-api'export default {setup () {const color = inject ('themecolor') return {color}} 9.2 share ref responsive data

App.vue root component:

Parent component import {provide} from'@ vue/composition-api'import Son from'. / components/06.son.vue'export default {name: 'app', components: {' son': Son}, setup () {provide ('themecolor',' red')}}

06.son.vue son components:

Son component import {inject} from'@ vue/composition-api'import Grandson from'. / 07.grandson.vue'export default {components: {'grandson': Grandson}, setup () {const color = inject (' themecolor') return {color}

07.grandson.vue son components:

Template > grandson component import {inject} from'@ vue/composition-api'export default {setup () {const color = inject ('themecolor') return {color}} 10. Node reference template ref10.1 dom reference TemplateRefOne import {ref, onMounted} from'@ vue/composition-api'export default {setup () {/ / create a DOM reference const h4Ref = ref (null) / / after DOM is loaded for the first time To get the reference to the element onMounted (() = > {/ / set the font color for the dom element / / h4Ref.value is the native DOM object h4Ref.value.style.color = 'red'}) / / return the created reference to the return {h4Ref}} 10.2component reference

App parent component:

The parent component shows the value of the child component import Son from'. / components/06.son.vue'export default {name: 'app', components: {' son': Son}, setup () {const comRef = ref (null) const showComRef = () = > {console.log (comRef) console.log ('str1 is' + comRef.value.str1) comRef.value.setStr1 ()} return {comRef ShowComRef}

06.son.vue sub-component:

Son component

{{str1}}

Import {ref} from'@ vue/composition-api'export default {setup () {const str1 = ref ('this is a subcomponent!') Const setStr1 = () = > {str1.value = 'assigned'} return {str1, setStr1} 11 nextTick 09.nextTick components

Learn $nextTick

Show the text box export default {data () {return {isShowInput: false}}, methods: {showInput () {this.isShowInput =! this.isShowInput / / console.log (this.$refs) this.$nextTick (() = > {this.$refs.ipt.focus ()})} Thank you for reading. That's what API in Vue3 is all about. After the study of this article, I believe you have a deeper understanding of how to use API in Vue3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.