Vue中如何正确强制组件重新渲染？（方法介绍）

码农天地 - 2020-06-23 21:35:36

---

有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？

强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。

这是一个非常简单的解决方案。

当然，你可能会对其他方式会更感兴趣：

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

简单粗暴的方式：重新加载整个页面

这相当于每次你想关闭应用程序时都要重新启动你的电脑。

这种方式或许有用，但这是一个非常糟糕的解决方案，不要这样做，我们来看看更好的方法。

不妥的方式：使用 v-if

v-if指令，该指令仅在组件为true时才渲染。 如果为false，则该组件在DOM中不存在。

来看看，v-if 是怎么工作的，在template中，添加v-if指令：

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

在script 中，使用nextTick的方法

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

上面的过程大致如下：

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

在这个过程中，有两个部分比较重要

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

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

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

另外，nextTick 可以与 promise 一起使用:

forceRerender() { // 从 DOM 中删除 my-component 组件 this.renderComponent = false; this.$nextTick().then(() => { this.renderComponent = true; });}

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

较好的方法：forceUpdate 方法

这是解决这个问题的两种最佳方法之一，这两种方法都得到了Vue的官方支持。

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

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

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

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

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

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

// 全局import Vue from 'vue';Vue.forceUpdate();// 使用组件实例export default { methods: { methodThatForcesUpdate() { // ... this.$forceUpdate(); // ... } }}

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

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

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

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

正是我们需要的！

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

为什么我们需要在 Vue 中使用 key

一旦你理解了这一点，那么这是了解如何以正确方式强制重新渲染的很小的一步。

假设我们要渲染具有以下一项或多项内容的组件列表：

有本地的状态某种初始化过程，通常在created或mounted钩子中通过jQuery或普通api进行无响应的DOM操作

如果你对该列表进行排序或以任何其他方式对其进行更新，则需要重新渲染列表的某些部分。 但是，不会希望重新渲染列表中的所有内容，而只是重新渲染已更改的内容。

为了帮助 Vue 跟踪已更改和未更改的内容，我们提供了一个key属性。 在这里使用数组的索引，因为索引没有绑定到列表中的特定对象。

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

如果我们使用索引将其渲染出来，则会得到以下结果：

<ul> <li v-for="(person, index) in people" :key="index"> {{ person.name }} - {{ index }} </li></ul>// OutputsEvan - 0Sarah - 1James - 2

如果删除Sarah，得到：

Evan - 0James - 1

与James关联的索引被更改，即使James仍然是James。 James会被重新渲染，这并不是我们希望的。

所以这里，我们可以使用唯一的 id 来作为 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>

在我们从列表中删除Sarah之前，Vue删除了Sarah和James的组件，然后为James创建了一个新组件。现在，Vue知道它可以为Evan和James保留这两个组件，它所要做的就是删除Sarah的。

如果我们向列表中添加一个person，Vue 还知道可以保留所有现有的组件，并且只需要创建一个新组件并将其插入正确的位置。这是非常有用的，当我们有更复杂的组件，它们有自己的状态，有初始化逻辑，或者做任何类型的DOM操作时，这对我们很有帮助。

所以接下来看看，如果使用最好的方法来重新渲染组件。

更改 key 以强制重新渲染组件

最后，这是强制Vue重新渲染组件的最佳方法（我认为）。

我们可以采用这种将key分配给子组件的策略，但是每次想重新渲染组件时，只需更新该key即可。

这是一个非常基本的方法

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

每次forceRerender被调用时，我们的componentKey都会改变。当这种情况发生时，Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。

如果确实需要重新渲染某些内容，请选择key更改方法而不是其他方法。

原文地址：https://hackernoon.com/the-correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad

推荐学习：vue视频教程！

以上就是Vue中如何正确强制组件重新渲染？（方法介绍）的详细内容，更多请关注php中文网其它相关文章！

微信分享相关标签：Vue 组件 重新渲染本文转载于：segmentfault，如有侵犯，请联系a@php.cn删除上一篇：一文搞懂JavaScript中 ! 和 !! 的区别！下一篇：没有了

相关文章

相关视频

Vue组件通信的六种方式PHPCMS能用Vue开发吗？15道Vue常见面试题解析用mpvue开发微信小程序基础知识Vue中如何正确强制组件重新渲染？（方法介绍）使用vue-awesome-swiper构建首页幻灯片vue组件的重要选项深入vue组件初始化vue项目

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论立即提交专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

青灯夜游

今天学习一小步，明天提升一大步

最近文章一文搞懂JavaScript中 ! 和 !! 的区别！12610个 你可能不熟悉的 css伪类 及其用例介绍533详解ES6模块化和CommonJS模块化的区别238发布技术文章最新文章热门排行

Vue中如何正确强制组件重新渲染？（方法介绍）一文搞懂JavaScript中 ! 和 !! 的区别！怎么开启浏览器的cookie设置？微信小程序中自定义select下拉选项框组件最详尽的 JS 原型与原型链详解Ajax接收JSON数据localStorage. sessionStorage、Cookie的区别recorder.js 基于 HTML5 实现录音功能

RN布局的实例详解jQ选择器汇总JS是什么意思json格式是什么？json格式文件怎么打开？vue.js中created方法的使用详解echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码）js数组如何删除指定位置的元素？删除指定位置元素的2种方法怎样实现Vue项目中使用Vux推荐视频教程麦子学院Vue.js视频教程Vue2.0入门及学习实战项目视频教程Vue.js + Node.js构建音乐播放器实战视频教学Vue框架视频教程视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 287557;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典

php中文网：公益在线php培训，帮助PHP学习者快速成长！ 合肥彼岸互联信息技术有限公司

Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 关于我们免责申明赞助与捐赠广告合作

座机号码：0551-64933227  安徽省合肥市政务新区置地广场D座2101

  var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();$('.content').viewer();

Tags 标签