Vue强制重新渲染组件

首先看一下官网对$forceUpdate的介绍

例子：

<template>
    <div>
        <h1>HOME</h1>
        <p>名字:{{arr[0]}}</p>
        <input type="button" value="点击改变名字" @click="changName">
    </div>
</template>

<script>
export default {
    data(){
        return{
            arr:["123","456"],
        }
    },
    methods:{
        changName(){
            this.arr[0]="helloworld";
            console.log(this.arr);
        }
    },
}
</script>

<style lang="less" scoped>

</style>

在没有使用$forceUpdate函数下

点击后，可以看到，数组元素已经改变了，但页面并没有重新渲染
这时候就要使用$forceUpdate函数迫使组件重新渲染

<template>
    <div>
        <h1>HOME</h1>
        <p>名字:{{arr[0]}}</p>
        <input type="button" value="点击改变名字" @click="changName">
    </div>
</template>

<script>
export default {
    data(){
        return{
            arr:["123","456"],
        }
    },
    methods:{
        changName(){
            this.arr[0]="helloworld";
            console.log(this.arr);
            this.$forceUpdate();
        }
    },
}
</script>

<style lang="less" scoped>

</style>