数据更新后，页面不重新渲染

Love The Way You Lie 2022-11-29 03:02 232阅读 0赞

## 在vue中 更改数组和对对象 但是页面不重新渲染 ##

在这个确实已经更改数据成功了 但是vue没有重新渲染页面，好像没监听到数据改变一样  
这时候最粗鲁的做法是在更改数据之后强行触发vue重新渲染页面  
**this.$forceUpdate();**

## 对象操作未渲染 ##

<div id="box">
            <h2> { { obj.name}}--{ { obj.age}} </h2>
            <button @click="butClick">切换</button>
        </div>
        <script>
            new Vue({ 
                el:"#box",
                data:{ 
                    obj:{ 
                        name:"吕浩",
                        age:"20"
                    }
                },
                methods:{ 
                    butClick(){ 
                        this.$set(this.obj,"name","小明");//更改对象属性
                        this.$delete(this.obj,"name");//删除对象某个属性
                    }
                }
            })
        </script>

## 数组操作未未渲染 ##

<div id="box">
            <p v-for="i of arr">{ { i}} </p>
            <button @click="butClick">切换</button>
        </div>
        <script>
            new Vue({ 
                el:"#box",
                data:{ 
                    arr:["a","b","c"]
                },
                methods:{ 
                    butClick(){ 
                       this.arr.push("要插入的内容");//数组添加可直接渲染
                       this.arr.splice("下标",1);//删除可以直接渲染
                       this.arr[3]="内容";//设置成功不渲染
                       this.$forceUpdate();//强行渲染
                    }
                }
            })
        </script>