By Michael Thiessen

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

In some cases, we have to force Vue to re-render components. If not, then maybe you are not doing a responsible enough job. I always need to re-render components anyway.

While it is relatively rare that Vue does not automatically update, it is useful to know how to fix this when it does occur.

In most cases, the root cause of this problem is that our understanding of Vue is still not responsive enough. So, try to make sure we’re using Vue correctly. Responsiveness can be tricky, and I often don’t know what to do.

In this section, we’ll do something we haven’t done or haven’t done before: rerender components using keys.

In this article, these knowledge points will be involved:

  • How does key change components
  • How does key work with multiple child components
  • How do I force child components to update themselves

By changing thekeyTo re-render the component

My favorite approach is to use the key attribute, because the way you use the key, Vue knows that a particular component is associated with a particular data.

If the key remains unchanged, the component is not changed. However, if the key changes, Vue knows that it should remove the old component and create a new one.

Here’s a very basic approach:

<template>
  <ComponentToReRender
    :key="componentKey"
  />
</template>

<script>
  export default {
    data() {
      return {
        componentKey: 0,
      };
    },
    methods: {
      forceRerender() {
        this.componentKey += 1;
      }
    }
  }
</script>
Copy the code

The value of componentKey changes every time forceRerender is called. When the value of componentKey changes, Vue knows to remove the ComponentToReRender component and create a new one.

So ComponentToReRender rerenders and resets the state inside. nice nice!

Force multiple child nodes to update

The same can be done with multiple child components:

<template>
  <div>
    <Child
      :key="key1"
    />
    <Child
      :key="key2"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        key1: 0,
        key2: 0,
      };
    },
    methods: {
      forceRerender(child) {
        if (child === 1) {
          this.key1 += 1;
        } else if( child === 2) {
          this.key2 += 1;
        }
      }
    }
  }
</script>
Copy the code

Here we use two separate keys to control whether or not each child component is rerendered. They are separated to render one of the child components without affecting the other.

But if you want the two child components to always update together, you can use the same KYE. However, the key must be unique, so the following way will not work:

<template>
  <div>
    <Child
      :key="componentKey"
    />
    <Child
      :key="componentKey"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        componentKey: 0,
      };
    },
    methods: {
      forceRerender(child) {
        this.componentKey += 1;
      }
    }
  }
</script>
Copy the code

In this case, only the first Child component is rendered. The second one is ignored because it has a duplicate key.

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

To solve this problem, we can construct a new key for each child based on componentKey:

<template>
  <div>
    <Child
      :key="`${componentKey}1 `"
    />
    <Child
      :key="`${componentKey}- 2 `"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        componentKey: 0,
      };
    },
    methods: {
      forceRerender(child) {
        this.componentKey += 1;
      }
    }
  }
</script>
Copy the code

Because we added -1 and -2 to componentKey each time, the two keys were always unique, and now both components will be re-rendered.

If it is in a list, you can use the following methods:

<template>
  <div>
    <Child
      v-for="(item, index) in list"
      :key="`${componentKey}-${index}`"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return{ list: [ // ... ] , componentKey: 0, }; }, methods: { forceRerender(child) { this.componentKey += 1; } } } </script>Copy the code

Here, we construct the key as ${componentKey}-${index}, so each item in the list gets a unique key, and as soon as componentKey changes, all components in the list will be rerendered at the same time.

Of course, there is an even easier way to wrap the list around a div and update the div directly:

<template>
  <div :key="componentKey">
    <Child
      v-for="item in list"
      :key="item.id"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return{ list: [ // ... ] , componentKey: 0, }; }, methods: { forceRerender(child) { this.componentKey += 1; } } } </script>Copy the code

This idea can be used in many ways, it can get us out of a lot of difficulties, you should keep it in mind.

Well, that’s it for today, and we’ll see you next time. Thanks for watching.

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: morioh.com/p/08963bf07…

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.