【vue3】对于复选框checkbox来说click和chenge事件的区别是什么

对于我们来说，看起来两个很相似的事件，为什么最后得到的结果会大相径庭呢，下边我们来看一下

<template>
  <div class="book">
    <!-- click事件的input -->
    <input type="checkbox" v-model="clickInputVal" @click="inpurClick" />
    <!-- change事件的input -->
    <input type="checkbox" v-model="changeInputVal" @change="inputChange" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
//声明变量进行双向绑定，并在触发事件时打印
let clickInputVal = ref(false);
let changeInputVal = ref(false);
//先从事件名称来说 
// click为点击事件，在鼠标按下后立即触发 ，触发时机先于更新输入框value ,所以click会打印复选框更新前的value
// 而change事件是当绑定的value发生改变时才会触发，所以change事件会成功打印更新后的值
const inpurClick = function (): void {
  console.log(clickInputVal.value); //---false
};
const inputChange = function (): void {
  console.log(changeInputVal.value); //---true
};
</script>