vue3 watch完整
时间: 2023-09-23 22:12:39 浏览: 53
在Vue3中,watch的完整写法如下:
```javascript
import { watch } from 'vue';
export default {
setup() {
// 响应式数据
const name = ref('小明');
// watch监听name的变化
watch(
name, // 监听的数据源
(newValue, oldValue) => { // 监听到变化时的回调函数
console.log('修改了name', newValue, oldValue);
},
{
deep: true, // 深度监视
immediate: true, // 创建时立即监听一次
}
);
return {
name
};
}
};
```
在Vue3中,我们可以使用`watch`函数来监听数据的变化。上述代码中,我们首先引入了`watch`函数。然后在`setup`函数中创建了一个`ref`响应式数据`name`,并使用`watch`函数来监听`name`的变化。监听到变化时,执行回调函数并打印出新值和旧值。在`watch`函数的第三个参数中,我们可以设置一些选项,比如`deep`表示深度监视,`immediate`表示创建时立即监听一次。可以根据具体需求来配置这些选项。最后,我们将`name`作为返回值,以便在模板中使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>