只是一个简单的问题。

你能强迫Vue.js重新加载/重新计算所有内容吗?如果有,怎么做?


当前回答

有两种方法,

你可以在你的方法处理程序中使用$forceUpdate()

<您的组件@click = " reRender ()" > < /组件>

<script>
export default {
   methods: {
     reRender(){
        this.$forceUpdate()
     }
   }
}
</script>

你可以给你的组件一个:key属性,并在想要渲染时增加

<your-component:key="index" @click="reRender()" > < /组件>

<script>
export default {
   data() {
     return {
        index: 1
     }
   },
   methods: {
     reRender(){
        this.index++
     }
   }
}
</script>

其他回答

添加:key到vue-router库的router-view组件的方法会引起我的fickers,所以我使用vue-router的“组件内保护”来拦截更新,并在同一路由上的路径更新时相应地刷新整个页面(如$router. exe)。美元,路由器。推,路由器。替换也无济于事)。唯一需要注意的是,通过刷新页面,我们暂时打破了单页应用行为。

  beforeRouteUpdate(to, from, next) {
    if (to.path !== from.path) {
      window.location = to.path;
    }
  },

添加以下代码:

this.$forceUpdate()

使用vm。美元(varName,价值)。

在Change_Detection_Caveats中查看详细信息

除了页面重载方法(闪烁),没有一个适合我(:键没有工作)。

我发现这个方法从旧vue.js论坛,这是为我工作:

https://github.com/vuejs/Discussion/issues/356

<template>
    <div v-if="show">
       <button @click="rerender">re-render</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {show:true}
        },
        methods:{
            rerender(){
                this.show = false
                this.$nextTick(() => {
                    this.show = true
                    console.log('re-render start')
                    this.$nextTick(() => {
                        console.log('re-render end')
                    })
                })
            }
        }
    }
</script>
<router-view :key="$route.params.slug" />

只需使用你的任何参数的关键,它的自动重载子..