在vue3中 利用计算属性和响应式原理 实现获取计算机当前时间 并实时刷新

在Vue 3中，可以通过计算属性和响应式原理来实现获取计算机当前时间并实时刷新。具体实现方法如下：

1. 在data中定义一个currentTime属性，初始值为null。

data() {
  return {
    currentTime: null
  }
}

2. 创建一个计算属性，用来获取当前时间。

computed: {
  getCurrentTime() {
    return new Date().toLocaleTimeString()
  }
}

3. 在mounted生命周期钩子中，使用setInterval函数每秒钟更新一次currentTime属性的值。

mounted() {
  setInterval(() => {
    this.currentTime = this.getCurrentTime
  }, 1000)
}

4. 在模板中使用{{currentTime}}来显示当前时间。

完整代码如下：

<template>
  <div>
    <p>{{currentTime}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: null
    }
  },
  computed: {
    getCurrentTime() {
      return new Date().toLocaleTimeString()
    }
  },
  mounted() {
    setInterval(() => {
      this.currentTime = this.getCurrentTime
    }, 1000)
  }
}
</script>