时间戳

首页 > 技术文章 > vue进阶之强制组件渲染 大深坑

vue进阶之强制组件渲染 大深坑

-constructor 2020-05-15 13:16 原文

首先来个前言

原来Vue的dom更新是异步的，当数据发生变化，vue并不是里面去更新dom，而是开启一个队列。跟JavaScript原生的同步任务和异步任务相同。
Vue在一个同步任务过程中是不会去更新渲染视图，而是在同步任务（事件循环队列）执行完毕之后，在主线程的同步执行完毕，读取任务队列时更新视图。
这个机制对于页面性能是非常重要的，因为我们要是每操作一个数据就更新一次视图，那么在性能上会非常差。而如果是在一次任务执行完毕之后更新视图，可以避免特别多的重复操作。

1.在开发过程中，我们很容易遇见需要先渲染数据然后操作dom

这时候就要使用vue提供的nextTick函数。

这个函数就是有了数据之后，渲染完成之后会执行，也就是说当你需要数据先渲染，然后去操作渲染完成之后的dom，要把操作dom的逻辑写在这个函数里面。

nextTick 可以与 promise 一起使用

官方定义 
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

//但是：：只要我调用了  他就会执行  不管dom有没有变化
forceRerender() {
  // 从 DOM 中删除 my-component 组件
  this.renderComponent = false;

  this.$nextTick().then(() => {
    this.renderComponent = true;
  });
}

2.那么问题就来到了我们如何强制重新渲染dom

强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。（这个方案存疑问  因为没办法检测dom重新渲染了）

//此处待验证 生命周期是否重新执行了

 

  • 简单粗暴的方式：重新加载整个页面
  • 不妥的方式：使用 v-if
  • 较好的方法：使用Vue的内置forceUpdate方法
  • 最好的方法：在组件上进行 key 更改

2.2现在看第二个方法

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


<script>
  export default {
    data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // 从 DOM 中删除 my-component 组件
        this.renderComponent = false;
        
        this.$nextTick(() => {
          // 在 DOM 中添加 my-component 组件
          this.renderComponent = true;
        });
      }
    }
  };
</script>

重点：首先，我们必须等到nextTick，否则我们不会看到任何变化

刚开始 renderComponent设置为true，因此渲染 my-component 组件
当我们调用forceRerender时，我们立即将renderComponent设置为false
我们停止渲染my-component，因为v-if指令现在计算结果为false
在nextTick方法中将renderComponent设置回true
当v-if指令的计算结果为true时，再次渲染my-component

在Vue中，一个 tick 是一个DOM更新周期。Vue将收集在同一 tick 中进行的所有更新，在 tick 结束时，它将根据这些更新来渲染 DOM 中的内容。如果我们不等到next tick，我们对renderComponent的更新就会自动取消，什么也不会改变。

其次，当我们第二次渲染时，Vue将创建一个全新的组件。 Vue 将销毁第一个，并创建一个新的，这意味着我们的新my-component将像正常情况一样经历其所有生命周期-created，mounted等。//此处待验证 生命周期是否重新执行了

不过，这并不是一个很好的解决方案，所以，让我们做 Vue 想让我们做的

2.3较好的方法：forceUpdate 方法

//官网
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件

Vue 会通过更新视图来响应依赖项中的更改。然而，当我们调用forceUpdate时，也可以强制执行更新，即使所有依赖项实际上都没有改变。

下面是大多数人使用这种方法时所犯的最大错误。

如果 Vue 在事情发生变化时自动更新，为什么我们需要强制更新呢？

原因是有时候 Vue 的响应系统会让人感到困惑，我们认为Vue会对某个属性或变量的变化做出响应，但实际上并不是这样。在某些情况下，Vue的响应系统根本检测不到任何变化。

所以就像上一个方法，如果你需要这个来重新渲染你的组件，可能有一个更好的方法。

有两种不同的方法可以在组件实例本身和全局调用forceUpdate：

// 全局
import Vue from 'vue';
Vue.forceUpdate();

// 使用组件实例
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();
      // ...
    }
  }
}

重要提示：这不会更新任何计算属性，调用forceUpdate仅仅强制重新渲染视图。

2.4最好的方法：在组件上进行 key 更改

在许多情况下，我们需要重新渲染组件。

要正确地做到这一点，我们将提供一个key属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会知道应该删除旧组件并创建新组件。

正是我们需要的！

但是首先，我们需要绕一小段路来理解为什么在Vue中使用key。详情

 

参考来源 

Vue异步更新视图 https://www.jianshu.com/p/a1b0ed525f8e

Vue 中 强制组件重新渲染的正确方法 https://segmentfault.com/a/1190000021599461

推荐阅读