Vue的双向绑定用着确实方便，但自动档虽好，手动档也不是一无是处，而且自动更新会出现各种坑，在特定的情况下，还真的要手工触发“刷新”操作，目前有几种方案可以选择：
-通过Vue 的key-changing优化组件
-使用v-if标记
-使用内置的forceUpdate方法
通过Vue 的key-changing优化组件
通过vue key 实现，原理很简单，vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。所以当key 值变更时，会自动的重新渲染。这应该是目前最优雅的解决办法了。
官网原文：
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：
-完整地触发组件的生命周期钩子
-触发过渡
例如：
{{text}}
当 text发生改变时，span总是会被替换而不是被修改，因此会触发过渡。
下面是一个样例，当组件的数据更新时，会触发watch函数，使得key值变化，达到强制渲染组件的目的。
exportdefault{
data(){
return{
menuKey:1,
menuData:"",
}
},
watch:{
menuData(){
++this.menuKey
}
}
}
使用v-if标记
当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题。
使用案例如下，同样是使用watch 监听，通过变更v-if的值，强制触发组件渲染。需要注意的是，使用了$nextTick()方法。
exportdefault{
data(){
return{
reFresh:true,
menuTree:[]
}
},
watch:{
menuTree(){
this.reFresh=false
//在DOM渲染之后再把reFresh设置为原来的值，达到更新组件的效果
this.$nextTick(()=>{
this.reFresh=true
})
}
}
}
[ 注意 ]
Vue.nectTick()是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM，这个方法作用是当数据被修改后使用这个方法，会回调获取更新后的dom再render出来。
简而言之，如果你在数据改变之后的操作跟改变之后的DOM有关，那么就应该使用Vue.nextTick()
使用内置的forceUpdate方法
这个方法在实际使用时，有存在无效的情况，斟酌使用。
组件内置$forceUpdate方法，使用前需要在配置中启用。
使用案例：
importVuefrom'vue'
Vue.forceUpdate()
exportdefault{
methods:{
handleUpdateClick(){
//built-in
this.$forceUpdate()
}
}
}
