应用场景:
数据通过异步操作后, 对之前刚加载的数据进行变更后, 发现数据不能生效
实现目的:
使组件强制二次渲染
解决方案:
当数据变更后, 通过 watch 监听, 先去销毁当前的组件, 然后再重现渲染. 使用 v-if 可以解决这个问题
- <template>
- <third-comp v-if="reFresh"/>
- </template>
- <script>
- export default{
- data(){
- return {
- reFresh:true,
- menuTree:[]
- }
- },
- watch:{
- menuTree(){
- this.reFresh= false
- this.$nextTick(()=>{
- this.reFresh = true
- })
- }
- }
- }
- </script>
通过 vue key 实现, 原理官方文档. 所以当 key 值变更时, 会自动的重新渲染.
- <template>
- <third-comp :key="menuKey"/>
- </template>
- <script>
- export default{
- data(){
- return {
- menuKey:1
- }
- },
- watch:{
- menuTree(){
- ++this.menuKey
- }
- }
- }
- </script>
卡布奇诺,
来源: http://www.jianshu.com/p/ea48834d8ab5