#Vue3.5 common features organized

Vue3.5 has been released for nearly half a year.

Response PROPS deconstruction

Props in Vue3.5 officially supports deconstruction and adds responsive tracking.

Set the default value

Use JavaScript's native default value grammar to declare the default value of PROPS

before

const props = withDefaults(
  defineProps<{
    count?: number
    msg?: string
  }>(),
  {
    count: 0,
    msg: 'hello'
  }
)

Now

const { count = 0, msg = 'hello' } = defineProps<{
  count?: number
  message?: string
}>()

Response deconstruction

when in the same<script setup>Access in the code blockdefinePropsWhen destructuring variables, the Vue compiler will automatically add them in frontprops

before

const { foo } = defineProps(['foo'])

 watchEffect(() => {
   // only ran once before 3.5
   (foo)
 })

Now

const {foo} = DEFINEPROPS (['Foo'])

 watcheffect (() => {{
   // Re -execute in the "FOO" PROP change in 3.5
   (FOO)
   // `foo` is converted from the compiler to` `, the above is equivalent to` () `
 })

Similarly, the prop variable that listened to the solution or the decomposition may be transmitted to the combination item while retaining the response at the same time.

before

const { foo } = defineProps(['foo'])

watch(foo, /* ... */)

Now:

// watch (foo,/ * ... */) is equivalent to watch (, ...), we convey a value instead of the response data source
 Watch (() => Foo, / * ... * /)

 // Pass the deconstructed PROP to the external function and maintain the response
 Usecomposable (() => FOO)

monitor(watch / watcheffect) related

watch supports specifying depth deep: number

WatchdeepOptions now support passing a number to specify the listening depth

const state = ref({
   a: {
     b: {
       c: 1
     }
   }
 })

 watch(state, (newValue) => {
     (`state: ${newValue}`)
   },
   { deep: 2 }
 )

  = { c: 2 } // Changed the properties of the second layer, triggering monitoring
  = 2 // The properties of the third layer are changed and the monitoring is not triggered.

Clean the function onWatcherCleanup / OneFFECTCLEANUP

When we used to send asynchronous requests in the monitoring function, it is likely that the request parameter changes. At this time, we need to set up a global variable storageAbortControllerAnd clean it up before the component is uninstalled

import { watch, onBeforeUnmount } from "vue"

 let controller = new AbortController()

 watch(state, (newValue) => {
 () //Cancel the last request
 controller = new AbortController()

 fetch(`/api/${newValue}`, { signal: }).then(() => {
     //Callback logic
   })
 });

 // Components must also be cleaned before uninstalling
 onBeforeUnmount(() => ())

Now there is a cleanup functiononWatcherCleanup / onEffectCleanupAfter that, we can call it directly to clean up the previous calling (asynchronous) function/request

import { watch, onWatcherCleanup } from 'vue'

 watch(id, (newId) => {
   const controller = new AbortController()

   fetch(`/api/${newId}`, { signal: }).then(() => {
     //Callback logic
   })

   onWatcherCleanup(() => {
     // Terminate expired request
     ()
   })
 })

onEffectCleanupThe function writing method is similar to the above, the difference is the import source

import { onEffectCleanup } from "@vue/reactivity";

[!WARNING]
onWatcherCleanupOnly support in Vue 3.5+, and must be inwatchEffecteffect function orwatchCalled during synchronous execution of a callback function: you cannot call it in an asynchronous functionawaitCall it after the sentence.

Watch return value enhancement

The newly paused/resumed listener in the Watch return value can more detailed control and monitoring scope

const {stop, pause, resume} = watch (() => {})

 // Specify the listener
 pause ()

 // Recovery later
 resume ()

SSR improvement

Lazy Hydration

Asynchronous components can passdefineAsyncComponent() APIinhydrateOptions to control when to activate

Activate in idle time

Import {defineasynccomponent, hydrateonidle} from 'vue'

 const Asynccomp = DEFINEASYNCCCCOMPONENT ({{
   loader: () => Import ('./'),
   Hydrate: Hydrateonidle (/ * Pass optional maximum timeout */)
 })

Activates when element becomes visible

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./'),
  hydrate: hydrateOnVisible()
})

Custom strategy

Import {defineasynccomponent, type hydrationStrategy} from 'vue'

 Const mystrategy: hydrationstrategy = (hydrate, foreachelement) => {
   // Foreachelement is an auxiliary function of all root elements in the DOM not activated DOM traversal components.
   // Because the root element may be a fragment rather than a single element
   foreachelement (EL => {{
     // ...
   })
   // Call when you are ready `hydrate`
   hydrate ()
   Return () => {
     // If necessary, return a destruction function
   }
 }

 const Asynccomp = DEFINEASYNCCCCOMPONENT ({{
   loader: () => Import ('./'),
   hydrate: mystrategy
 })

other

Please checkVue3 official document -inert activation, we won’t go into details here.

useId()Generate unique application ID

It is used to generate the only ID in each application for barrier -free attributes or table elements. In our daily applications, it can mainly solve the server and client generatedidDifferent issues causing rendering errors

<script setup>
import { useId } from 'vue'

const id = useId()
</script>

<template>
  <form>
    <label :for="id">Name:</label>
    <input : type="text" />
  </form>
</template>

data-allow-mismatch

If a client value inevitably differs from its server counterpart (e.g. date), we can use propertiesdata-allow-mismatchto avoid the resulting activation mismatch warning

<span data-allow-mismatch>{{ () }}</span>

Specific types can also be specified. Allowed values ​​are:text，children(Only allow direct sub -components to not match),class，style，attribute

other

useTemplateRef()

Returns a shallow ref, which can bind elements more intuitively and also supports dynamic binding.

<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'

const targetRef = ref('input1')
const inputRef = useTemplateRef<HTMLInputElement>()

onMounted(() => {
  ()
})
</script>

<template>
  <input ref="input1" />
	<input ref="input2" />
</template>

Others that are not commonly used will not be explained.