vue中出现组件不渲染更新的问题，方法总结

最新推荐文章于 2023-03-01 17:49:00 发布

原创最新推荐文章于 2023-03-01 17:49:00 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

VUE 同时被 2 个专栏收录

36 篇文章

订阅专栏

javascript

31 篇文章

订阅专栏

本文详细介绍了Vue中组件不更新的常见原因及解决方案，包括使用this.$forceUpdate()强制更新，利用this.set()修改对象和数组，通过v-if结合key实现组件的重新渲染，为解决Vue组件更新问题提供实用指南。

vue中出现组件不渲染更新的问题，方法总结

1.用this.$forceUpdate()方法

例如：

this.data.status= false; // 数据改变
this.$forceUpdate(); // 调用

2.如果是object或者是array类型的话改变值最好用 this. $s e t (), t h i s .$ delete(),array.splice()等方法进行修改

this.$set(this.data,'status',false)

3.用v-if来控制组件让改变值后组件件消失后重新来渲染一次。

视图

<Input v-if="show" key="1" id="keyword" name="keyword" 
		prefix="ios-search" placeholder="搜索"/>

js:

$this.show= false;
this.data.status= false;
$this.show= true;

4.用v-if如果值改变成功了没有重新渲染的话很可能是组件太相似让vue没有识别出来，必须加个key来区分这些组件。

<Input v-if="tabDefault==='company'" key="1" id="keyword"
	 name="keyword" prefix="ios-search" placeholder="搜索"/>
<Input v-if="tabDefault==='role'" key="2"  id="keyword2" 
	name="keyword2" prefix="ios-search" placeholder="搜索"/>
<Input v-if="tabDefault==='interior'" key="3"  id="keyword3"
	 name="keyword3" prefix="ios-search" placeholder="搜索"/>