[vue][原理]利用vue响应式原理实现一个时钟

Posted 2020-12-20 丹哥不是哥

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[vue][原理]利用vue响应式原理实现一个时钟相关的知识，希望对你有一定的参考价值。

关于vue2.x响应式原理核心内容可以查看这里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reactive timer</title>
</head>
<body>
<div id="app"></div>
<script>
// 数据响应式：
// Object.defineProperty()
const app = document.getElementById(\'app\')
const obj = {}
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(\'get\', key)
      return val
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(\'set\', key)
        val = newVal
        update()
      }
    }
  })
}

defineReactive(obj, \'foo\', \'\')

function update() {
// dom 操作
  app.innerText = obj.foo.toLocaleTimeString()
}

setInterval(() => {
  obj.foo = new Date()
}, 1000)
</script>
</body>
</html>

以上是关于[vue][原理]利用vue响应式原理实现一个时钟的主要内容，如果未能解决你的问题，请参考以下文章

vue3.0的proxy响应式原理简单实现