Vue强制组件重新渲染的方法讨论


Posted in Javascript onFebruary 03, 2020

有时候,依赖 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>

// Outputs
Evan - 0
Sarah - 1
James - 2

如果删除Sarah,得到:

Evan - 0
James - 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更改方法而不是其他方法。

Javascript 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
javascript中的事件代理初探
Mar 08 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
JavaScript中的类型检查
Feb 03 #Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 #Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 #Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 #Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 #Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 #Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 #Javascript
You might like
简单易用的计数器(数据库)
2006/10/09 PHP
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
js获取内联样式的方法
2015/01/27 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
浅谈vue父子组件怎么传值
2018/07/21 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
python版学生管理系统
2018/01/10 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
应届生个人求职信模板
2013/11/26 职场文书
微电影大赛策划方案
2014/06/05 职场文书
快递员岗位职责
2014/09/12 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
五一劳动节慰问信
2015/02/14 职场文书
结婚十年感言
2015/07/31 职场文书