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

news2024/10/6 20:39:47

表单输入

在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、发送网络请求等。