Uniapp development: uniapp can quickly experience the setup syntax sugar of vue3.2. How to use it is cool

catalogue

• outline
• setup syntax for the prologue
• Lifecycle hook
• Comparison between ref function and reactive function
• computed calculated attribute
• Monitoring (watch, watchEffect)
• Component value transfer
• provide/inject
• style uses v-bind to bind dynamic values
• Get routing information
• Transfer of global API
• Advantages of Composition API
• Pay attention to me and don't get lost
• vue3.x related will be continuously updated in the future

outline

With the release of Vue 3.0, Vue 3.2 was released soon after, and now uniapp also supports the compilation of Vue 3.2. I won't say much about the advantages of vue3.x here. I'll learn more about it uniapp official vue3 tutorial.

Starting from the learning front end, the main framework of learning is Vue, which has always been a loyal fan of Vue. Now the release of 3.x makes me feel that it is the best choice for mobile terminals. After all, I don't need to consider ie compatibility. The original intention of the uniapp itself is to be born for the mobile terminal, so vue3.x is perfect to be used on the uniapp.

At present, vue3.2 only supports h5 in uniapp, and the applet side only supports vue3.0. It's only a matter of time. The applet in uniapp will certainly support vue3.2, so we can take h5 to warm up first! The usage of vue3.2 in uniapp is exactly the same in Vue cli scaffold project. Rest assured to learn.

vue3.2 improved setup syntax sugar, how to use how cool! Some features of Vue 3.2 have been changed on the basis of Vue 3.0. This article directly summarizes the features of Vue 3.2. Next, let's quickly experience Vue 3.2.

The content explained below is not limited to the changes made in Vue 3.2, and some writing methods have been changed in Vue 3.0.

setup syntax for the prologue

Starting from vue3.2, setup is written directly on the script tag, which means that all js code is completed directly in the middle of the script. Setup syntax sugar is definitely a trend in the future of Vue, and this trend has come.

< script setup > < / script > is a compile time syntax sugar that can be used in SFC Composition API Greatly improve work efficiency. Declared in script
js variable, which can be directly read and used in the template. A large number of relevant cases will be shown later.

life cycle

Although the writing method of 3.x is very different from the code in 2.x script, the life cycle is still essential. After all, there are still requirements for processing logic at different stages in the development process.

Feature: add "on" before the 2.x lifecycle hook to access the component lifecycle hook.
Learn more about vue3.x lifecycle hooks

<script setup> import { onBeforeMount, onMounted } from 'vue'; onBeforeMount(() => { console.log('onBeforeMount life cycle') }) onMounted(() => { console.log('onMounted life cycle') }) </script>

Differences between vue2.x and vue3.x life cycles:

Tips: because setup runs around the beforeCreate and created lifecycle hooks, there is no need to explicitly define them. In other words, any code written in these hooks should be written directly in the setup function.

Comparison between ref function and reactive function

• From the perspective of defining data types:
  • ref is used to define basic data types.
  • reactive is used to define: object (or array) type data.
  • Note: ref can also be used to define object (or array) type data, which will automatically convert proxy objects through reactive.
• From the perspective of principle:
  • ref completes the response (data hijacking) through the get and set of Object.defineProperty().
  • reactive implements responsive (data hijacking) by using Proxy, and operates the data inside the source object through Reflect.
• From the perspective of use:
  • Data defined by ref:. value is required to operate data in js, and. value is not required to read data in template template:

  const v = ref(999); consle.log(v.value);// The value thus obtained is 999

  • reactive defined data: neither operation data nor read data: need. value.

  const data = reactive({ a:1, b:2 }); consle.log(data);// The values thus obtained are

computed calculated attribute

computed is consistent with the configuration items of vue2.x

<template> <view> <view>{}</view> <view>{}</view> </view> </template> <script setup> import { reactive,computed } from 'vue' let person = reactive({ firstName:'especially', lastName:'large' }); // Calculation properties - short form const fullname1 = computed(()=>{ return `$-$` }) // Calculation properties - complete const fullname2 = computed({ get(){ return `$-$` }, set(value){ const nameArr = value.split('-') person.firstName = nameArr[0] person.lastName = nameArr[1] } }) </script>

Monitoring (watch, watchEffect)

1. watch function

• The configuration item of watch is consistent with that in vue2.x.

• Note: in uniapp, newValue and oldValue should not be written as new and old, otherwise an error will be reported.

Scenario 1: monitor the responsive data defined by a single ref:

<script setup> import { ref } from 'vue' const v1 = ref(1); const v2 = ref(2); watch(v1, (newValue, oldValue) => { console.log('v1====', newValue, oldValue) },) watch(v2, (newValue, oldValue) => { console.log('v2====', newValue, oldValue); }) </script>

Scenario 2: monitor the responsive data defined by multiple ref s:

<script setup> import { ref } from 'vue' const v1 = ref(1); const v2 = ref(2); watch([v1,v2], (newValue, oldValue) => { console.log('v1====', newValue, oldValue); }) </script>

Scenario 3: monitor multiple reactive defined responsive data:

• Note: if the watch monitors the reactive data defined, the deep monitoring is forced on, that is, the setting is invalid.

<script setup> import { ref, reactive } from 'vue' let data = reactive({ a: 1, b: 2, c:{ sss:'yes' } }); watch(data, (newValue, oldValue) => { console.log('v1====', newValue, oldValue); }) </script>

Scenario 4: monitor an attribute in the responsive data defined by reactive:

<script setup> import { ref, reactive } from 'vue' let data = reactive({ a: 1, b: 2, c:{ sss:'yes' } }); watch(() => data.a, (newValue, oldValue) => { console.log('monitor reactive An attribute in the defined responsive data a: ', newValue, oldValue) }) watch(() => data.c.sss, (newValue, oldValue) => { console.log('monitor reactive An attribute in the defined responsive data sss: ', newValue, oldValue) }) </script>

Scenario 5: monitor multiple attributes in the reactive data defined by reactive:

<script setup> import { ref, reactive } from 'vue' let data = reactive({ a: 1, b: 2, c:{ sss:'yes' } }); watch([() => data.a,() => data.c.sss], (newValue, oldValue) => { console.log('monitor reactive Multiple attributes in the defined responsive data a and sss: ', newValue, oldValue) }) </script>

Scenario 6: monitor the array defined by reactive:

<script setup> import { reactive } from 'vue' const list = reactive([1,2,3]) watch(()=>[...list], (newValue, oldValue) => { console.log('Monitor array:', newValue, oldValue) }) </script>

Case 7: monitor the value in vuex:

• The similarities and differences in the use of vuex in vue3 can be found in another blog for more details: vue3.2 development: rapid experience of the similarities and differences between vue3 and vue2 of vuex

<script setup> import { useStore } from 'vuex' const store = useStore() console.log('store',store.state.count) watch(()=>store.state.count, (newValue, oldValue) => { console.log('monitor vuex Values in:', newValue, oldValue) }) </script>

2. watchEffect function

• watchEffect is similar to computed:
  • However, computed focuses on the calculated value (the return value of the callback function), so the return value must be written.
  • watchEffect pays more attention to the process (the function body of the callback function), so there is no need to write the return value.
• The routine of watch is to specify both the monitored properties and the monitored callbacks.
• The routine of watchEffect is: you don't need to specify which attribute to monitor, and which attribute is used in the monitored callback, then monitor which attribute.

<script setup> import { ref, reactive, watchEffect } from 'vue' const v1 = ref(0) let data = reactive({ a: 1, b: 2 }) watchEffect(() => { console.log(v1.value) console.log(data) }) </script>

Component value transfer

1. props/emit

• In vue3.2 child components, defineProps is used to accept the value of the parent component, and defineEmits is used to pass methods to the parent component.

Parent component father.vue

<template> <view> Father's value:{} <Son :v="v" @change="change"></Son> </view> </template> <script setup> import { ref } from 'vue' import Son from './components/son.vue' const v = ref(0); function change(){ v.value++; } </script>

Subcomponent son.vue

<template> <view> son Values accepted in:{} <button type="default" @click="change">Buttons for subcomponents</button> </view> </template> <script setup> import { defineProps, defineEmits } from 'vue' defineProps({ v:Number }) const emits = defineEmits(['change']) function change(){ emits('change') } </script>

provide/inject

• provide/inject is an enhanced version of props. The parent component uses provide to provide data. All child components can obtain these data through inject. The parent component does not need to know which child components use the data it provides.

Basic routine:

// In parent component provide('value',value); // In subcomponents const v = inject('value');

be careful:

• provide can also pass normal data, but the data defined by ref or reactive is responsive.
• Unlike props, provide is a two-way data flow, that is, the value passed by the parent component can be modified in the child component.
• If you do not want the child component to modify the value passed by the parent component, use readonly. The following is an example.

Parent component father.vue

<template> <view> Father's value:{} <Son :v="v" @change="change"></Son> </view> </template> <script setup> import { ref, defineComponent } from 'vue' import Son from './components/s.vue' const v = ref(0); function change(){ v.value++; } </script>

Subcomponent son.vue

<template> <view> <text>Value read from parent component:{}</text> <grandChild></grandChild> </view> </template> <script setup> import { inject } from 'vue' import grandChild from './grandChild.vue' const count = inject('count') </script>

grandChild.vue

<template> <view> <text>Value received by sun component:{}</text> </view> </template> <script setup> import { inject } from 'vue' const count = inject('count') setTimeout(()=>{ count.value = 10;// After 3 seconds, it is found that the values have changed, which proves the second point in the above note },3000) </script>

readonly

<script setup> import { readonly } from 'vue'; const count = ref(1); provide('count',readonly(count)); </script>

style uses v-bind to bind dynamic values

• In the past, when I was working on a project, I thought that the dynamic values in js could be bound in style. Unexpectedly, it was supported in vue3.2. It's refreshing!
• v-bind enables component state driven dynamic CSS values in SFC tags.

<template> <view> <text>Colored text</text> </view> </template> <script setup> import { ref } from 'vue'; const color = ref('red'); const size = ref('60px'); </script> <style scoped> .txt { color: v-bind(color); font-size: v-bind(size); } </style>

Get routing information

Note: useRoute and useRouter cannot be used to obtain routing information in uniappp. The official scheme is getCurrentPages, as follows:

<script setup> var pages = getCurrentPages(); var page = pages[pages.length - 1]; console.log(page); </script>

useRoute and useRouter can be used for Vue cli scaffold construction projects, as follows:

<script setup> import { useRoute, useRouter } from 'vue-router' const r1 = useRoute(); const r2 = useRouter(); console.log(r1,r2); </script>

Transfer of global API

1. Some global API s and configurations in vue2. X

For example, register global components, register global instructions, etc.

//Register global components Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>' }) //Register global directives Vue.directive('focus', { inserted: el => el.focus() }

2. These API s have been adjusted in vue3. X

Adjust the global API, Vue.xxx, to the application instance (app).

Advantages of Composition API

1. Problems with Options API in vue2. X

If you use the traditional Options API to add or modify a requirement, you need to modify it in data, methods and calculated respectively.

1. Advantages of Composition API in vue2. X

Using the Composition API, we can more gracefully organize our code and functions. Let the code of related functions be more orderly organized together.

Pay attention to me and don't get lost

If you have any questions, you can leave a message or chat in the comment area.

You can also scan the QR code below to add me wx and note 'region name technology type'. I will pull into my wechat technology sharing group. Note: the remarks must be clear.

You can also add QQ group communication: 568984539. Add group remarks' region name technology type '.

For more front-end, uniapp, nodejs and other related knowledge, please follow my personal blog: https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

22 November 2021, 19:32 | Views: 5835