watch vue3
时间: 2023-11-18 18:06:12 浏览: 37
在Vue3中,watch函数用于监听响应式数据的变化,并在数据变化时执行回调函数。与watch不同,watchEffect函数不需要指定要监听的属性,而是会自动追踪响应式数据的变化,并在变化时执行回调函数。
下面是一个使用watch函数监听ref类型数据变化的例子:
```html
<template>
<div>
<h2>{{ name }}</h2>
<button @click="changeName">修改姓名</button>
</div>
</template>
<script>
import { ref, watch } from 'vue';
export default {
setup() {
const name = ref('小明');
watch(name, (newValue, oldValue) => {
console.log('修改了name', newValue, oldValue);
});
function changeName() {
name.value += '666';
}
return {
name,
changeName,
};
},
};
</script>
```
在上面的例子中,我们使用了ref函数创建了一个响应式数据name,并使用watch函数监听了name的变化。当name的值发生变化时,watch函数会执行回调函数并打印出新值和旧值。
另外,watch函数还可以接收一个可选的选项对象作为第三个参数,用于配置监听的行为,例如深度监听、立即执行等。