vue中数据赋值后不渲染问题总结

vue中常会出现组件不会渲染更新的问题，常用的方法总结了一下

1.用this.$forceUpdate()方法，改变值时直接调用就行

例如：

this.$forceUpdate();
this.data.tabDefault = false;

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

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

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

视图

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

js:

$this.show= false;
this.data.tabDefault = 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="搜索"/>

5.将改变放大，如果层次太深那就连带上级一起更新，实在没办法也不怎么影响性能的时候可以这么干。

备注此文章为随笔记录分享文章，完全看懂需要一定的vue基础。