vue3中defineModel没有时时更新？

Question

// Index.vue
<common-search
    v-model:model="model"
    v-model:searchParams="searchParams"
  >
    <el-form-item label="菜单名称">
      <el-input v-model="model.name" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="菜单路径">
      <el-input v-model="model.path" placeholder="请输入" />
    </el-form-item>
  </common-search>

<script setup>
const initValue: () => SearchMenuInput = () => ({
  pageNo: 1,
  pageSize: 10
})

const model = ref(initValue())
const searchParams = ref(initValue())
</script>

// common-search.vue

<template>
  <el-button :loading type="primary" @click="search">查询</el-button>
</template>

<script setup lang="ts" generic="P extends Params">
const model = defineModel<P>('model', { required: true })
const searchParams = defineModel<P>('searchParams', { required: true })

const submit = () => {
  console.log('model', model.value)
  searchParams.value = {
    ...model.value,
    pageSize: searchParams.value.pageSize
  }
  console.log('searchParams', searchParams.value)

  searchService.execute(searchParams.value)
}
</script>

我在Index.vue页面引入CommonSearch，菜单名称输入1，菜单路径输入2，然后点击查询，控制台打印出来的searchParams没有时时更新

model Proxy(Object) {pageNo: 1, pageSize: 10, name: '1', path: '2'}
searchParams Proxy(Object) {pageNo: 1, pageSize: 10}

Answer 1

感觉像是输出时机的问题。

稍微调整了一下:

<template>
  <slot></slot>
  <button @click="submit">查询</button>
</template>

<script setup>
import { nextTick } from 'vue'
const model = defineModel('model', { required: true })
const searchParams = defineModel('searchParams', { required: true })

const submit = () => {
  console.log('model', model.value)
  searchParams.value = {
    ...model.value,
    pageSize: searchParams.value.pageSize
  }
  nextTick(() => {
    console.log('searchParams', searchParams.value)
  })
}
</script>

Vue SFC Playground