好像有那麼一點感覺了，但感覺又太簡單，沒有隔壁鱈魚說的那麼誇張，應該需要更難一點的挑戰，畢竟我可是遇強則強，遇弱則弱的特殊體質。
#挽回愛情的第五天

useVModel API

功能

useVModel 是一個用於簡化 v-model 雙向綁定的 Vue 工具函數。它允許開發者更靈活地處理 props 和 emit 事件的綁定，並可透過 passive 模式來手動管理 props 的變更與資料流。當 passive: false 時，useVModel 會依賴 Vue 的內建雙向綁定機制；而當 passive: true 時，則會使用 watch 來手動處理資料同步。

Props

Options

當 passive: false 時無法使用的選項

當 passive: false 時，useVModel 會使用 Vue 自動的雙向綁定機制，某些選項將不會生效或無法使用：

1. deep：
   • 無效：深層監聽僅在 passive: true 下可用，當使用 Vue 自動綁定時，無法監聽深層嵌套物件的變化。
2. clone：
   • 無效：自動綁定時，資料直接反映到 props 上，無法使用深拷貝或自定義複製邏輯來隔離資料。
3. shouldEmit：
   • 無效：shouldEmit 只在手動同步模式 (passive: true) 下可用，控制是否發送 emit 事件。在 passive: false 時，emit 事件會自動觸發，無法進行條件判斷。

返回值

useVModel 返回一個 ref 或 computed 對象，用於與 props 和 emit 事件進行綁定：

• 當 passive: false 時：返回一個 computed，自動進行雙向綁定，透過 Vue 的內建 v-model 機制處理資料變更。
• 當 passive: true 時：返回一個 ref，並使用手動監聽 props 的方式來控制綁定邏輯。

用法範例

範例 1：使用 passive: false 的簡單雙向綁定

線上玩玩看這個範例

<template>
  <input v-model="value" />
</template>

<script setup>
import { useVModel } from '@vueuse/core'

const props = defineProps({
  modelValue: String,
})

const emit = defineEmits(['update:modelValue'])

// 使用 Vue 內建的 v-model 機制
const value = useVModel(props, 'modelValue', emit, { passive: false })
</script>

範例 2：使用 passive: true 進行自定義雙向綁定和驗證

線上玩玩看這個範例

<template>
  <input v-model="value" placeholder="輸入數字 (必須大於 10)" />
</template>

<script setup>
import { useVModel } from '@vueuse/core'

const props = defineProps({
  numberValue: Number,
})

const emit = defineEmits(['update:numberValue'])

// 使用 passive: true 手動控制資料同步，並添加驗證邏輯
const value = useVModel(props, 'numberValue', emit, {
  passive: true,
  shouldEmit: (newValue) => newValue > 10, // 僅當值大於 10 時才觸發更新
})
</script>

如果有不懂或是有寫錯的可以留言讓我知道喔