vue中的$forceupdate

vue中的$forceupdate

介绍

$forceupdate 迫使 Vue 实例重新渲染。

注意：

1. 只是渲染虚拟DOM，并不是重新加载组件，只会触发beforeUpdate和updated钩子函数。
2. 仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

使用场景

<template>
    <div>{{user.name}}</div>
    <button @click="changeName">设置名字</button>
</template>

<script>
export default {
    data() {
        return {
             user: {}
        }
    },
    methods: {
        changeName() {
             this.user.name = '小明';
             // 调用之后触发 dom 改变
             this.$forceUpdate();
        }
    }
}
</script>

注：data中的user 中的 name 属性不是一个响应式的，通过this.user.name = “xx”, 设值的方式并不会改变 视图，this.user.name 设置之后 应该调用$forceUpdate 强制重新渲染。

这种做法并不推荐 应该 在data 中初始化 name, 让其变成响应式。就能避免使用、 $forceUpdate

data() {
    return { 
        user: {
           name: ''
        }
    }
}