By Michael Thiessen

Translator: Front-end wisdom

Source: hackernoon

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Sometimes it is not enough to rely on Vue responsiveness to update the data; instead we need to manually re-render the components to update the data. Or maybe we just want to throw out the current DOM and start over. So how do you get Vue to rerender components in the right way?

The best way to force Vue to re-render a component is to set it up on the component:key. When we need to re-render a component, just morekeyVue will re-render the component.

This is a very simple solution.

Of course, you might be more interested in other ways:

  • The crude way: reload the entire page
  • Improper way: usev-if
  • Better: Use Vue’s built-inforceUpdatemethods
  • Best approach: Do it on componentskeyTo change the

The crude way: reload the entire page

This is the equivalent of having to reboot your computer every time you want to close an app.

This approach may work, but it’s a very bad solution. Don’t do it. Let’s look at a better one.

Improper way: usev-if

The V-if directive, which renders only if the component is true. If false, the component does not exist in the DOM.

To see how v-if works, add the v-if directive to template:

<template>
  <my-component v-if="renderComponent" />
</template>
Copy the code

In script, use the nextTick method

<script> export default { data() { return { renderComponent: true, }; }, methods: {forceRerender() {// Remove the my-component component this.renderComponent = false; This.$nextTick(() => {// Add my-component this. RenderComponent = true; }); }}}; </script>Copy the code

The above process is roughly as follows:

  1. RenderComponent is initially set to true, so render my-Component components

  2. When we call forceRerender, we immediately set the renderComponent to false

  3. We stopped rendering my-Component because the V-if directive now evaluates to false

  4. Set renderComponent back to true in the nextTick method

  5. When the v-if directive evaluates to true, render my-Component again

There are two important parts to this process

First, we have to wait for nextTick, otherwise we won’t see any changes.

In Vue, a tick is a DOM update cycle. Vue collects all updates made in the same tick, and when the tick ends, it renders the content in the DOM based on those updates. If we don’t wait for the next tick, our update to the renderComponent will cancel automatically and nothing will change.

Second, when we render the second time, Vue will create a brand new component. Vue will destroy the first one and create a new one, which means our new My-Component will go through all its life cycles as normal -created, Mounted, etc.

In addition, nextTick can be used with promise:

ForceRerender () {// Remove the my-component component from the DOM this.renderComponent = false; this.$nextTick().then(() => { this.renderComponent = true; }); }Copy the code

This isn’t a very good solution, though, so let’s do what Vue wants us to do

Better method: forceUpdate method

This is one of the two best ways to solve this problem, both of which are officially supported by Vue.

Typically, Vue responds to changes in dependencies by updating views. However, when we call forceUpdate, we can force the update even though none of the dependencies have actually changed.

Here are the biggest mistakes most people make using this method.

If Vue updates automatically when things change, why do we need to force updates?

The reason is that sometimes the Vue’s response system can be confusing, we think that the Vue will respond to a change in a property or variable, but it doesn’t. In some cases, Vue’s response system does not detect any changes at all.

So just like the previous method, if you need this to re-render your components, there’s probably a better way.

There are two different ways to call forceUpdate on the component instance itself and globally:

// import Vue from 'Vue '; Vue.forceUpdate(); Export default {methods: {methodThatForcesUpdate() {//... this.$forceUpdate(); / /... }}}Copy the code

Important: This does not update any calculated properties, and the call to forceUpdate simply forces the view to be rerendered.

Best approach: Do it on componentskeyTo change the

In many cases, we need to re-render components.

To do this correctly, we will provide a key property so that Vue knows that a particular component is associated with a particular piece of data. If the key stays the same, the component is not changed, but if the key changes, Vue knows to remove the old component and create a new one.

Just what we need!

But first, we need to take a short detour to understand why we use keys in Vue.

Why do we need keys in Vue

Once you understand this, it’s a small step to understanding how to force rerender in the right way.

Suppose we want to render a list of components with one or more of the following:

  • There is a local state

  • Some kind of initialization process, usually in a Created or Mounted hook

  • Unresponsive DOM manipulation via jQuery or normal apis

If you sort the list or update it in any other way, some parts of the list will need to be rerendered. However, you don’t want to re-render everything in the list, just what has changed.

To help Vue keep track of changed and unchanged content, we provide a key attribute. The index of the array is used here because the index is not bound to a specific object in the list.

const people = [
  { name: 'Evan', age: 34 },
  { name: 'Sarah', age: 98 },
  { name: 'James', age: 45 },
];
Copy the code

If we render it using an index, we get the following result:

<ul>
  <li v-for="(person, index) in people" :key="index">
    {{ person.name }} - {{ index }}
  </li>
</ul>

// Outputs
Evan - 0
Sarah - 1
James - 2
Copy the code

If you delete Sarah, you get:

Evan - 0
James - 1
Copy the code

The index associated with James is changed, even though James is still James. James will be re-rendered, which is not what we wanted.

So here, we can use a unique ID as the key

const people = [
  { id: 'this-is-an-id', name: 'Evan', age: 34 },
  { id: 'unique-id', name: 'Sarah', age: 98 },
  { id: 'another-unique-id', name: 'James', age: 45 },
];

<ul>
  <li v-for="person in people" :key="person.id">
    {{ person.name }} - {{ person.id }}
  </li>
</ul>
Copy the code

Before we remove Sarah from the list, Vue removes Sarah’s and James’s components and then creates a new component for James. Now, Vue knows it can keep both components for Evan and James, and all it has to do is delete Sarah’s.

If we add a Person to the list, Vue also knows that we can keep all the existing components and just create a new component and insert it in the right place. This is very useful when we have more complex components that have their own state, initialization logic, or do any kind of DOM manipulation.

So let’s take a look at the best way to re-render components.

Change the key to force a re-rendering of the component

Finally, this is the best way to force Vue to re-render components (I think).

We could use this strategy of assigning a key to a child component, but each time we want to re-render the component, we simply update the key.

This is a very basic approach

<template> <component-to-re-render :key="componentKey" /> </template> export default { data() { return { componentKey: 0}; }, methods: { forceRerender() { this.componentKey += 1; }}}Copy the code

Our componentKey changes every time forceRerender is called. When this happens, Vue will know that it must destroy the component and create a new one. What we get is a child component that reinitializes itself and “resets” its state.

If you do need to re-render something, choose the key change method over the other method.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: hackernoon.com/the-correct…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.