响应式数据与DOM

Question

  const f = reactive({ name: 'x' })
  watch(f, (value, oldValue) => {
    console.log(f.name)
    console.log('DOM---', document.getElementById('app'))
    nextTick(() => {
      console.log('next', f.name)
      console.log('DOM---', document.getElementById('app'))
    })
  })
  setTimeout(() => {
    f.name = 'fxj'
    console.log('DOM---', document.getElementById('app'))
  })

这里打断点和浏览器直接执行的结果是不同的。我不是很能理解。

watch 和 DOM更新 的函数都是放在then方法里面异步触发，那f.name之后的log应该是拿不到更新后的DOM的呀。为什么不打断点直接执行时，是可以直接拿到的？我打了断点的log就拿不到。

Answer 1

Sunday 2023-05-21 15:34:37

你好

你的意思是： setTimeout 中的  log 拿到的 dom 文本不应该是 fxj 。是这个意思吗？

如果是这个意思的话，那么原因是因为：
在 浏览器中的打印是基于 复杂数据类型和简单数据类型打印导致的。因为你直接打印的是 dom 对象，它是一个复杂类型，会打印内存地址。当 dom 对象改变时，内存地址改变，所以打印出来的时候是《改变后的》

而同理，debugger 之所以打印不出来 fxj，是因为 程序终止，dom 还未改变（内存地址未改变）。

你可以尝试打印 dom.textContent 来获取非复杂数据类型数据，这样你应该可以得到一个你期望的结果

• 提问者 fw前端 #1

  niubi

• 提问者 fw前端 #2

  老师，我按照你的意思又测试了一下，<div id="x"> 1 </div>
      <script>
        var x = document.getElementById("x");
        console.log(x);
        setTimeout(() => {
          x.innerHTML = "xxx";
        }, 10);
      </script>
  这样的一个代码。我把time设置为0，他的log就一直是xxx，time增加几毫秒，有时候是xxx，有时候是1，设置时间一变长就几乎打印出的是1了。这是什么原因

• Sunday 回复 提问者 fw前端 #3

  你好： 这个就涉及到控制台的另外一个逻辑了，那就是《控制台展示内容的执行并不是实时的》。当你未打开控制台，刷新页面的时候。此时控制台的打印并未执行，只有打开控制台之后，才会执行。那么此时就会回到我们一开始说的逻辑，也就是此时展示的是内存地址的值。 而如果在一开始就打开了控制台，然后进行了刷新页面，那么此时就会是当前的 1 的结果。