vue3 watch触发事件
时间: 2023-05-27 20:06:00 浏览: 88
当被watch的数据发生变化时,watch会自动触发相应的回调函数。可以在回调函数中进行相应的操作,比如更新页面显示、发送请求等。以下是一个简单的示例:
```javascript
<template>
<div>
<p>{{ message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
import { reactive, watch } from 'vue'
export default {
setup() {
const state = reactive({
message: 'Hello, Vue3!'
})
const changeMessage = () => {
state.message = 'Hello, World!'
}
watch(() => state.message, (newValue, oldValue) => {
console.log(`message changed from ${oldValue} to ${newValue}`)
})
return {
message: state.message,
changeMessage
}
}
}
</script>
```
在上面的代码中,我们使用了`watch`函数来监测`state.message`的变化。当`state.message`发生改变时,watch会自动触发回调函数,并输出相应的信息到控制台中。在实际项目中,我们可以在回调函数中执行一些操作,比如更新页面显示、发送请求等。