Serval Ways to Force Update in Vue

I have to mention this before we go on. As the doc-Forcing-an-Update says:

If you find yourself needing to force an update in Vue, in 99.99% of cases, you’ve made a mistake somewhere.

When I come back to write a blog, I find it's totally true. Well, let's begin. Here is the demo code based on [email protected] and [email protected]_:

<div id="app">
  <p v-for="item in items" :key="item.id">{{ item.label }}</p>
  <hr />
  <el-tree
    :data="items"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2, 3]"
    v-if="isElTreeShow"
    :key="elTreeVersion"
  >
  </el-tree>
</div>
<script>
  window.app = new Vue({
    el: '#app',
    data: {
      isElTreeShow: true,
      elTreeVersion: 100,
      items: [
        {
          id: 1,
          label: 'Level one 1'
        },
        {
          id: 2,
          label: 'Level one 2',
          children: [
            {
              id: 21,
              label: 'Level two 2-1'
            }
          ]
        },
        {
          id: 3,
          label: 'Level one 3'
        }
      ],
      compare(a, b) {
        return a.id - b.id
      },
      compareReverse(a, b) {
        return -this.compare(a, b)
      }
    }
  })
</script>

Auto Update with Vue's Reactivity System

Go check the doc.

$forceUpdate

For example, if someone made a mistake and wrote the code like

let length = app.items.length
app.items[length] = { id: length + 1, label: `Level one ${length + 1}` }

You will not see the data update because you just add an nonreactive attribute. In this case, you might need app.$forceUpdate(). However, better idea is using code like:

let length = app.items.length
app.items.push({ id: length + 1, label: `Level one ${length + 1}` })

or

let length = app.items.length
this.$set(app.items, length, {
  id: length + 1,
  label: `Level one ${length + 1}`
})

Reassign

However, it's common to use third party components. In this case, it may not be easy to modify the component if we find something not good. For example, if we sort the data using:

app.items.reverse()

Here is the result:

The part above the hr works as expected while the el-tree doesn't change even you use $forceUpdate. So, in this case, what can we do?

We can make it update by reassigning like:

app.items = app.items.slice()

Until now, every thing about force update has been solved. I haven't met problems which can't be solved by ways above. However, there is some way stronger I have to mention.

v-if/key

In some cases, we do need to destroy and rebuild the component. But I didn't find any API about rebuild except this issue. Some guys said we can rebuild using v-if="isElTreeShow":

app.isElTreeShow = !app.isElTreeShow
app.$nextTick(() => {
  app.isElTreeShow = !app.isElTreeShow
})

or a better idea use :key="elTreeVersion"

app.elTreeVersion++

See? That's pretty cool.

Original Post