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