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

server/2024/9/23 11:00:07/

表单输入

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

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

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

javascript"><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指令:

javascript"><CustomInput v-model="message" />

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

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

监听器

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

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

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

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

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

javascript"><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>

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

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

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

深层监听器

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

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

及时回调的监听器

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

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

watchEffect

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

javascript"><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>

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

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

watch vs watchEffect

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

  1. watch

    • watch函数需要指定要监视的响应式数据,可以监视多个数据。
    • watch函数可以提供更多的控制选项,例如可以配置是否立即执行回调函数、可以配置深度监视等。
    • watch函数的回调函数接收两个参数:新值和旧值。
    • watch函数适用于需要精确控制监视行为的情况,例如监视特定的数据变化并执行特定的操作。
  2. watchEffect

    • watchEffect函数不需要指定要监视的响应式数据,它会自动追踪在副作用函数中使用的所有响应式数据。
    • watchEffect函数没有提供额外的控制选项,简单易用。
    • watchEffect函数的副作用函数会在组件渲染时立即执行一次,并在其中使用的响应式数据发生变化时重新执行。
    • watchEffect适用于简单的副作用代码,例如更新DOM、发送网络请求等。

总的来说,watch适用于需要精确控制监视行为的情况,而watchEffect适用于简单的副作用代码。在实际开发中,根据具体需求选择合适的函数来监视响应式数据的变化。

回调的触发时机

当更改响应式状态,它可能会同时会触发vue组件更新和监听器回调

默认情况下,用户创建的监听器回调,都会在vue组件更新之前被调用。这意味着你在监听器回调中访问的dom

是vue更新之前的状态

如果想在 监听器中访问 vue更新之后的dom  flush:'post'

停止监听器


http://www.ppmy.cn/server/19997.html

相关文章

【Pytorch】(十三)模型部署: TorchScript

文章目录 &#xff08;十三&#xff09;模型部署: TorchScriptPytorch动态图的优缺点TorchScriptPytorch模型转换为TorchScripttorch.jit.tracetorch.jit.scripttrace和script的区别总结trace 和script 混合使用保存和加载模型 &#xff08;十三&#xff09;模型部署: TorchScr…

iOS(Object C) 插入排序

插入排序的思想: 可以想象你在打牌,手里有一张牌2, 第一次摸到一张牌5; 5 比1 大,所以摸到的牌5放在1的右边; (此时手里的牌为 2->5) 第二次摸到一张牌3; 3比5小,所以3和5互换位置,再拿3和2比,3比2大,3不动(此时手里的牌为 2-> 3 -> 5) 第三次摸到一张牌1,1比5小,…

前端学习<四>JavaScript——54-原型链

常见概念 构造函数 构造函数-扩展 原型规则和示例 原型链 instanceof 构造函数 任何一个函数都可以被 new&#xff0c;new 了之后&#xff0c;就成了构造方法。 如下&#xff1a; function Foo(name, age) {this.name name;this.age age;//retrun this; //默认有这…

react 遇到的问题1 ——( 数据更新视图没更新)已解决

问题&#xff1a; 使用react开发项目时&#xff0c;使用useState 定义数据&#xff0c;通过定义的set方法修改数据&#xff0c;视图没有更新 原因&#xff1a; 在 React 中使用 useState 定义数据时&#xff0c;useState 返回一个数组&#xff0c;包含当前状态和更新的函数。…

【学习】软件测试自动化,是未来的趋势还是当前的必需

在当今快速迭代的软件开发周期中&#xff0c;速度和质量成为了企业生存的关键。随着DevOps实践的普及和持续集成/持续部署&#xff08;CI/CD&#xff09;流程的标准化&#xff0c;软件测试自动化已经从未来的趋势转变为当前的必要性。本文将探讨自动化测试的现状、必要性以及其…

ICCV 2021 | FcaNet: Frequency Channel Attention Networks 中的频率分析

ICCV 2021 | FcaNet: Frequency Channel Attention Networks 中的频率分析 论文&#xff1a;https://arxiv.org/abs/2012.11879代码&#xff1a;https://github.com/cfzd/FcaNet 文章是围绕 2D 的 DCT 进行展开的&#xff0c;本文针对具体的计算逻辑进行梳理和解析。 f ( u ,…

笔记:.NET的框架梳理及相关概念了解(“.NET Core“ “.NET“ “.NET Framework“)

一、.NET设计 架构&#xff1a;C/C程序是直接将源码编译成机器码&#xff08;CPU可以识别和运行的指令&#xff09;&#xff0c;对于不同CPU&#xff0c;其指令集不同&#xff0c;机器码也就不同&#xff0c;故&#xff1a;C/C程序编译时&#xff0c;需选择具体的CPU架构&…

深度学习基础:循环神经网络中的长期依赖问题

循环神经网络中的长期依赖问题 在深度学习中&#xff0c;循环神经网络&#xff08;RNN&#xff09;是一种经典的模型&#xff0c;用于处理序列数据&#xff0c;如自然语言处理、时间序列预测等任务。然而&#xff0c;传统的RNN存在着一个长期依赖问题&#xff0c;即在处理长序…