Vue之this.$forceUpdate——強制更新數據

 依據官網的生命周期，數據更新時，相關的組件生命周期包括 beforeUpdate 、 updated 。

生命周期	描述
beforeUpdate	數據更新前調用。
updated	由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。

  $forceUpdate 迫使組件或實例強制渲染。

 示例

方法用於更新數據。當執行 this.$forceUpdate() 時，重新刷新數據。（輸出“更新了數據”）

<template>
    <view class="flex flex-direction">
        <view>姓名:{{ student.name }}</view>
        <view>年齡：{{ student.age }}</view>
        <button class="margin-top cu-btn bg-blue" @click="addAge">年齡+1</button>
        <button class="margin-top cu-btn bg-blue" @click="reload">更新數據</button>
    </view>
</template>

<script>
    export default {
        name:"comp-x",
        data() {
            return {
                student:{
                    name :'張三',
                    age:15
                }
            }
        },
        updated:function(){
            console.log("更新了數據");
        },
        methods:{
            addAge: function(){
                this.student.age += 1;
            },
            reload: function(){
                this.$forceUpdate();
            }
        }
    }
</script>

 

 

 

參考網址

• https://cn.vuejs.org/v2/api/#vm-forceUpdate
• 組件生命周期： https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e7%bb%84%e4%bb%b6%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f