如何在 Vue.js 的事件循环周期中强制 UI 更新？

Question

我想强制 UI 在事件循环周期中途更新。

Vue.nextTick

Vue.nextTick 似乎为您提供了vm.$el 的更新版本，但实际上并不会导致 UI 更新。

代码笔：https://codepen.io/adamzerner/pen/RMexgJ?editors=1010

HTML：

<div id="example">
  <p>Value: {{ message }}</p>
  <button v-on:click="change()">Change</button>
</div>

JS：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'A'
  },
  methods: {
    change: change
  }
})

function change () {
  vm.message = 'B';
  // vm.$el.children[0].textContent === "Value: A"
  Vue.nextTick(function () {
    // vm.$el.children[0].textContent === "Value: B"
    // but the UI hasn't actually updated
    for (var i = 0; i < 10000000; i++) {}
    vm.message = 'C';
  });
}

vm.$forceUpdate

vm.$forceUpdate 似乎根本没有做任何事情。

1. vm.$el 的值似乎没有改变。
2. 似乎没有更新 UI。

CodePen：https://codepen.io/adamzerner/pen/rdqpJW?editors=1010

HTML：

<div id="example">
  <p>Value: {{ message }}</p>
  <button v-on:click="change()">Change</button>
</div>

JS：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'A'
  },
  methods: {
    change: change
  }
})

function change () {
  vm.message = 'B';
  // vm.$el.children[0].textContent === "Value: A"
  vm.$forceUpdate();
  // vm.$el.children[0].textContent === "Value: A" still
  // and the UI hasn't actually updated
  for (var i = 0; i < 10000000; i++) {}
  vm.message = 'C';
}

v-bind:key

v-bind:key 似乎也没有做任何事情：

1. vm.$el 的值似乎没有改变。
2. 似乎没有更新 UI。

Codepen：https://codepen.io/adamzerner/pen/WzadKN?editors=1010

HTML：

<div id="example">
  <p v-bind:key="message">Value: {{ message }}</p>
  <button v-on:click="change()">Change</button>
</div>

JS：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'A'
  },
  methods: {
    change: change
  }
})

function change () {
  // vm.$el.children[0].textContent === "Value: A"
  vm.message = 'B';
  // vm.$el.children[0].textContent === "Value: A" still
  // and the UI hasn't actually updated
  for (var i = 0; i < 10000000; i++) {}
  vm.message = 'C';
}

计算

使用计算属性as this popular answer recommends 似乎也没有做任何事情：

1. vm.$el 的值似乎没有改变。
2. 似乎没有更新 UI。

代码笔：https://codepen.io/adamzerner/pen/EEdoeX?editors=1010

HTML：

<div id="example">
  <p>Value: {{ computedMessage }}</p>
  <button v-on:click="change()">Change</button>
</div>

JS：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'A'
  },
  computed: {
    computedMessage: function () {
      return this.message;
    },
  },
  methods: {
    change: change
  }
})

function change () {
  // vm.$el.children[0].textContent === "Value: A"
  vm.message = 'B';
  // vm.$el.children[0].textContent === "Value: A" still
  // and the UI hasn't actually updated
  for (var i = 0; i < 10000000; i++) {}
  vm.message = 'C';
}

承诺（在编辑中添加）

使用 Promise 也不起作用。

代码笔：https://codepen.io/adamzerner/pen/oqaEpV?editors=1010

HTML：

<div id="example">
  <p>Value: {{ message }}</p>
  <button v-on:click="change()">Change</button>
</div>

JS：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'A'
  },
  methods: {
    change: change
  }
})

function change () {
  // vm.$el.children[0].textContent === "Value: A"
  vm.message = 'B';
  // vm.$el.children[0].textContent === "Value: A" still
  // and the UI hasn't actually updated
  var promise = new Promise(function (resolve, reject) {
    for (var i = 0; i < 10000000; i++) {}
    resolve();
  });
  promise.then(function () {
    vm.message = 'C';
  });
}

设置超时

setTimeout 是唯一可行的方法。但它只有在延迟为100 时才能始终如一地工作。当延迟为0 时，它有时会起作用，但不会始终如一地起作用。

1. vm.$el 更新。
2. UI 更新。

代码笔：https://codepen.io/adamzerner/pen/PRyExg?editors=1010

HTML：

<div id="example">
  <p>Value: {{ message }}</p>
  <button v-on:click="change()">Change</button>
</div>

JS：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'A'
  },
  methods: {
    change: change
  }
})

function change () {
  // vm.$el.children[0].textContent === "Value: A"
  vm.message = 'B';
  setTimeout(function () {
    // vm.$el.children[0].textContent === "Value: B"
    // the UI has updated
    for (var i = 0; i < 10000000; i++) {}
    vm.message = 'C';
  }, 100);
}

问题

1. 为什么Vue.nextTick、vm.$forceUpdate、v-bind:key 或计算属性不起作用？
2. 为什么延迟为0 时setTimeout 工作不一致？
3. setTimeout 看起来很老套。是否有“适当”的方式来强制更新 UI？

Answer 1

概要

B 没有在 UI 中更新/显示的错觉是由 Vue 的 Async Update Queue 和 JavaScript 的 Event Loop Process 模型的组合造成的。有关详细信息和校对，请继续阅读。

调查结果摘要

这些实际上做你想要的（但似乎没有）

• Vue.nextTick
• setTimeout - （但似乎没有短暂的超时）

这些按预期工作（但需要解释）

• v-bind:key
• vm.$forceUpdate
• 承诺

注意：上面的 but doesn't seem to 承认 Vue 正在做它应该做的事情，但没有出现预期的视觉输出。因此，代码没有产生预期的输出是准确的。

讨论

前两项工作

证明前两个做你想要的很容易。不将“B”放置在视图中的想法将被推翻。但需要进一步讨论以解决缺乏明显变化的问题。

• 在 Chrome 中打开每支笔
• 在开发工具中，在第 1789 行的 vue.js 中设置断点
• 逐步完成序列

当您逐步执行该序列时，您会注意到 UI 已按照应有的值更新为“B”（无论超时长度如何）。被驱散了。

那么缺乏可见性怎么办？这是由 JavaScript 的 Event Loop 流程模型引起的，具体与称为 Run-to-Completion 的原理有关。 MDN Event Loop Documentation 声明：

这种模式的一个缺点是，如果一条消息需要很长时间才能 完成，Web 应用程序无法处理用户交互 比如点击或滚动。

或运行渲染/绘制浏览器进程。所以当堆栈被执行时，B 被渲染然后C 紧接着，这似乎B 永远不会被渲染。当使用带有 JavaScript 繁重任务（例如引导 SPA）的动画 GIF 时，可以看到这个确切的问题。动画 GIF 要么会卡顿，要么根本不会动画 - Run-to-Completion 会阻碍。

所以 Vue 做它应该做的，而 JavaScript 做它应该做的正确。但是长时间运行的循环很麻烦。这就是像 lodash _debounce 或简单的 setTimout 这样的工具很有帮助的原因。

最后三件作品？

是的。在vue.js 中使用相同的断点将显示当 Vue 刷新其更新队列时发生的唯一中断。正如Vue's documentation about Async Update Queue 中所讨论的，每次更新都会排队，并且只呈现每个属性的最后一次更新。所以虽然message在处理过程中实际上变成了B，但由于Vue Async Queue的工作方式，它永远不会被渲染：

如果你还没有注意到，Vue 会执行 DOM 更新 异步。每当观察到数据变化时，它将打开一个 排队并缓冲同一事件中发生的所有数据更改 循环。

Answer 2

我不确定你想要什么，但试试这个...

var vm = new Vue({
      el: '#example',
      data: function(){
        return {
          message: 'A'
        }
      },
      methods: {
        change: function(){
          this.message = 'B';
          let el = this;
          setTimeout(()=>{
            el.$nextTick(function () {
              el.message = 'C';
            })
          },2000)
        }
      }
    })

Answer 3

我会考虑使用Vue Instance Lifecycle Hooks。

也看看这个Vue Instance Lifecycle Diagram。

如果你需要更新它，使用生命周期钩子应该可以让你在中途中断一些东西。也许对beforeMount hook 进行某种检查。