一文带你掌握 Vue3.5常用特性

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

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

const { foo } = defineProps(['foo'])
 
watchEffect(() => {
  // 在 3.5 之前只运行一次
  console.log(foo)
})

const { foo } = defineProps(['foo'])
 
watchEffect(() => {
  // 在 3.5 中在 "foo" prop 变化时重新执行
  console.log(foo)
  // `foo` 由编译器转换为 `props.foo`，以上等同于 `console.log(props.foo)`
})

const { foo } = defineProps(['foo'])
 
watch(foo, /* ... */)

// watch(foo, /* ... */) 等价于 watch(props.foo, ...)，我们给 watch 传递的是一个值而不是响应式数据源
watch(() => foo, /* ... */)
 
// 传递解构的 prop 到外部函数中并保持响应性
useComposable(() => foo)

const state = ref({
  a: {
    b: {
      c: 1
    }
  }
})
 
watch(state, (newValue) => {
    console.log(`state: ${newValue}`)
  },
  { deep: 2 }
)
 
state.a.b = { c: 2 } // 更改了第二层的属性，触发监听
state.a.b.c = 2 // 更改了第三层的属性，不触发监听

import { watch, onBeforeUnmount } from "vue"
 
let controller = new AbortController()
 
watch(state, (newValue) => {
    controller.abort() // 取消上一次的请求
    controller = new AbortController()
 
    fetch(`/api/${newValue}`, { signal: controller.signal }).then(() => {
    // 回调逻辑
  })
});
 
// 组件卸载前也要清理
onBeforeUnmount(() => controller.abort())

import { watch, onWatcherCleanup } from 'vue'
 
watch(id, (newId) => {
  const controller = new AbortController()
 
  fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
    // 回调逻辑
  })
 
  onWatcherCleanup(() => {
    // 终止过期请求
    controller.abort()
  })
})

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

const { stop, pause, resume } = watch(() => {})
 
// 暂停侦听器
pause()
 
// 稍后恢复
resume()

import { defineAsyncComponent, hydrateOnIdle } from 'vue'
 
const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnIdle(/* 传递可选的最大超时 */)
})

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

import { defineAsyncComponent, type HydrationStrategy } from 'vue'
 
const myStrategy: HydrationStrategy = (hydrate, forEachElement) => {
  // forEachElement 是一个遍历组件未激活的 DOM 中所有根元素的辅助函数，
  // 因为根元素可能是一个片段而非单个元素
  forEachElement(el => {
    // ...
  })
  // 准备好时调用 `hydrate`
  hydrate()
  return () => {
    // 如必要，返回一个销毁函数
  }
}
 
const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: myStrategy
})

<script setup>
import { useId } from 'vue'
 
const id = useId()
</script>
 
<template>
  <form>
    <label :for="id">Name:</label>
    <input :id="id" type="text" />
  </form>
</template>

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

<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'
 
const targetRef = ref('input1')
const inputRef = useTemplateRef<HTMLInputElement>(targetRef.value)
 
onMounted(() => {
  inputRef.value.focus()
})
</script>
 
<template>
  <input ref="input1" />
    <input ref="input2" />
</template>