イベントループサイクルの途中でUIを強制的に更新したいと思います。

Vue.nextTick

Vue.nextTickはの更新バージョンを提供しているようですが、vm.$el実際にはUIを更新しません。

CodePen：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';
}

計算された

この一般的な回答が推奨するように、計算されたプロパティを使用しても、何もしないようです。

1. の値は変更されていないようですvm.$el。
2. UIを更新していないようです。

CodePen：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の使用も機能しません。

CodePen：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

setTimeout動作しているように見える唯一のものです。ただし、遅延が100。の場合にのみ一貫して機能します。遅延がの場合、0動作することがありますが、一貫して動作しません。

1. vm.$el 更新。
2. UIが更新されます。

CodePen：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. setTimeout遅延がであるのに、なぜ一貫性のない動作をするの0ですか？
3. setTimeoutハッキーのようです。UIの更新を強制する「適切な」方法はありますか？