Vue数据更新视图未更新的几种解决方案

<template>
    <div>
        <h3>{{userInfo.name}}</h3>
        <button @click="changeUserName">点击我改变用户名</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            userInfo: {
                name: '张三',
                age: 16
            }
        }
    },
    watch:{
        'userInfo.name': {
            handler(newValue, oldValue) {
              console.log('用户名变化了，新值：' + newValue + '，旧值：' + oldValue);
            },
            immediate: true,
            deep: true
        }
    },
    methods:{
        changeUserName(){
            // 假设异步请求修改用户名
            const newUserName = '李四';
            this.userInfo.name = newUserName;
        }
    }
}
</script>

// 定义数据对象：
obj: { name: "小明", age: 18, },       

// 基本语法：
this.$set(需要改变的对象，"需要改变的对象属性"，"新值")

<template>
    <div>
        <h3>{{initList.message}}</h3>
        <button @click="changeMessage">点击我改变message值</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            initList: {
                message: 'hello'
            },
        }
    },
    methods:{
        changeMessage(){
            // 假设是异步调用获取到了新的message值
            const newMessage='world';
            this.$set(this.initList, 'message', newMessage);
        }
    }
}
</script>

methods: {
    // 在某些情况下需要强制重新渲染组件
    forceRerender() {
        // 调用 $forceUpdate()方法
        this.$forceUpdate();
    }
}

// 为确保视图更新，先将数据重新赋值给一个变量，然后再清空
const details = this.detailsList;
this.detailsList = [];

// 处理数据，并重新赋值
this.$nextTick(() => {
    // 处理数据
    const detailsList = this.formatList(details, data.playCourseChapterId);
    // 重新赋值
    this.detailsList = Object.assign([], detailsList);
})