表单输入
在Vue 3中,v-model
指令的用法稍有不同于Vue 2。在Vue 3中,v-model
指令实际上是一个语法糖,它会自动将value
属性和input
事件绑定到组件或元素上,以实现双向数据绑定。
在自定义组件中使用v-model
时,需要在组件内部定义modelValue
和update: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>
在上面的代码中,我们同样首先导入了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
是一个用于监视响应式数据变化并执行副作用函数的函数。当监视的响应式数据发生变化时,副作用函数会被重新执行。
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>
在上面的代码中,我们首先导入了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、发送网络请求等。
总的来说,watch
适用于需要精确控制监视行为的情况,而watchEffect
适用于简单的副作用代码。在实际开发中,根据具体需求选择合适的函数来监视响应式数据的变化。
回调的触发时机
当更改响应式状态,它可能会同时会触发vue组件更新和监听器回调
默认情况下,用户创建的监听器回调,都会在vue组件更新之前被调用。这意味着你在监听器回调中访问的dom
是vue更新之前的状态
如果想在 监听器中访问 vue更新之后的dom flush:'post'