watch属性中 handler方法、immediate属性
Vue中的Watch
在Vue实例中，我们可以通过在watch对象中定义属性来监听数据的变化。当被监听的数据发生变化时，关联的handler方法将被触发。这为我们提供了一种响应式地处理数据变化的方式，尤其是在需要进行异步操作或者复杂逻辑处理时
示例代码
代码语言：javascript复制<template>
<div>
<p>Current Time: {{ formattedTime }}</p>
</div>
</template>
<script>
export default {
data() {
return {
time: 0,
formattedTime: ''
};
},
watch: {
time: {
handler(newVal, oldVal) {
this.formattedTime = this.formatTime(newVal);
},
immediate: true
}
},
methods: {
formatTime(time) {
// 将时间格式化为 HH:MM:SS
// 实际项目中可能会使用库来处理时间格式
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time % 3600) / 60);
const seconds = time % 60;
return `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}`;
},
pad(value) {
// 在单个数字前面添加零
return value < 10 ? '0' value : value;
}
},
mounted() {
// 模拟计时器，每秒递增时间
setInterval(() => {
this.time ;
}, 1000);
}
};
</script>在这个例子中，我们使用watch监听time属性，并在handler方法中调用formatTime方法来格式化时间。通过设置immediate: true，我们确保在组件创建时就会执行一次handler方法，更新初始UI。
