vue3 ——笔记 (表单输入，监听器)

表单输入

在Vue 3中，v-model指令的用法稍有不同于Vue 2。在Vue 3中，v-model指令实际上是一个语法糖，它会自动将value属性和input事件绑定到组件或元素上，以实现双向数据绑定。

在自定义组件中使用v-model时，需要在组件内部定义modelValue和update:modelValue属性，以及在适当的时候触发update:modelValue事件来更新数据。

下面是一个示例，演示如何在Vue 3中创建一个带有自定义v-model的组件：

<template><div><input :value="modelValue" @input="updateModelValue($event.target.value)" placeholder="Enter some text"><p>{{ modelValue }}</p></div>
</template><script>
import { defineComponent, ref } from 'vue';export default defineComponent({props: {modelValue: String},emits: ['update:modelValue'],setup(props, { emit }) {const internalValue = ref(props.modelValue);const updateModelValue = (value) => {internalValue.value = value;emit('update:modelValue', value);};return {modelValue: internalValue,updateModelValue};}
});
</script>

在这个示例中，我们定义了一个带有modelValue属性和update:modelValue事件的自定义组件。在组件内部，我们使用ref函数创建了一个响应式变量internalValue，并在updateModelValue方法中更新这个变量的值，并且触发update:modelValue事件。

在父组件中使用这个自定义组件时，可以像下面这样使用v-model指令：

<CustomInput v-model="message" />

这样，当用户在输入框中输入文本时，message变量的值会自动更新，并且在页面上显示出来。

总结来说，Vue 3中的v-model指令仍然用于实现双向数据绑定，但在自定义组件中的使用方式有所变化，需要在组件内部手动处理输入事件和值的更新。

监听器

在组合式api中，可以使用watch函数在每次响应式状态发生变化时触发回调函数

Watch(监听的变量，回调函数)

第一个参数可以是不同形式的数据源，但不能直接监听响应式对象的属性值得到只是值

需要用一个返回该属性的getter属性

watch函数是一个用于监视特定的响应式数据变化并执行回调函数的函数。与watchEffect不同的是，watch函数可以监视特定的响应式数据，并且可以提供更多的控制选项。

<template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const count = ref(0);const doubleCount = ref(0);watch(count, (newCount, oldCount) => {console.log('Count has changed:', newCount);doubleCount.value = newCount * 2;});const increment = () => {count.value++;};return {count,doubleCount,increment};}
};
</script>

在上面的代码中，我们同样首先导入了ref和watch函数。然后在setup函数中创建了两个响应式的变量count和doubleCount。使用watch函数来监视count的变化，并在回调函数中更新doubleCount的值为count的两倍。

当点击“Increment”按钮时，count的值会增加，这会触发watch的回调函数执行，并更新doubleCount的值。

这就是watch函数在Vue 3中的基本用法和代码演示。相比watchEffect，watch函数可以提供更多的控制选项，例如可以监视多个响应式数据、可以配置是否立即执行回调函数等。

深层监听器

直接给watch() 传入一个响应式对象，会隐式地创建一个深层监听器---该回调函数在所有嵌套变更时都会触发

{deep:true} 强制转换为深度监听深度监听会监听对象中的所有嵌套属性

及时回调的监听器

Watch 默认时懒加载：仅数据变化时才执行回调

{immeditate:true} 创建监听器时，立即执行一次强制监听器的回调立即执行

watchEffect

watchEffect是一个用于监视响应式数据变化并执行副作用函数的函数。当监视的响应式数据发生变化时，副作用函数会被重新执行。

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref, watchEffect } from 'vue';export default {setup() {const count = ref(0);watchEffect(() => {console.log('Count has changed:', count.value);// 在这里可以执行任何副作用代码，比如更新DOM、发送网络请求等});const increment = () => {count.value++;};return {count,increment};}
};
</script>

在上面的代码中，我们首先导入了ref和watchEffect函数。然后在setup函数中创建了一个响应式的count变量，并使用watchEffect函数来监视count的变化。每当count发生变化时，watchEffect中的副作用函数会被执行，这里我们简单地输出了count的值到控制台。

当点击“Increment”按钮时，count的值会增加，这会触发watchEffect中的副作用函数执行，并将新的count值输出到控制台。

watch vs watchEffect

在Vue 3中，watch和watchEffect都是用于监视响应式数据变化并执行副作用函数的函数，但它们之间有一些重要的区别：

watch：
- watch函数需要指定要监视的响应式数据，可以监视多个数据。
- watch函数可以提供更多的控制选项，例如可以配置是否立即执行回调函数、可以配置深度监视等。
- watch函数的回调函数接收两个参数：新值和旧值。
- watch函数适用于需要精确控制监视行为的情况，例如监视特定的数据变化并执行特定的操作。
watchEffect：
- watchEffect函数不需要指定要监视的响应式数据，它会自动追踪在副作用函数中使用的所有响应式数据。
- watchEffect函数没有提供额外的控制选项，简单易用。
- watchEffect函数的副作用函数会在组件渲染时立即执行一次，并在其中使用的响应式数据发生变化时重新执行。
- watchEffect适用于简单的副作用代码，例如更新DOM、发送网络请求等。