美文网首页Vue.jsvue
Vue 中强制更新视图

Vue 中强制更新视图

作者: 冷r | 来源:发表于2022-11-15 09:43 被阅读0次

    前言

    当我们使用vue开发时经常会遇到当vue实例已经创建好了,有时候需要再次给数据赋值时,并不能在视图中改变

    在vue文档中写着如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
    因此比如我们修改一个数组其中的一个值,或者添加一条数据时,不管用。

    解决方案

    方法一:Vue.set() 方法(this.$set())

    Vue.set( target, key, value ) 中有三个参数
    target:要更改的数据源(可以是对象或者数组)
    key:要更改的具体数据 如果是数组 就是索引值
    value :重新赋的值

    this.$set(this.student,"age", 24)
    

    方法二:$forceUpdate

    对于深层的,最好用set方法,这样vue就可以知道发生了变化,同时vue也不建议直接修改length,可以给一个空数组来置空。用 forceUpdate 了,因为你修改了数据,但是页面层没有变动,说明数据本身是被修改了,但是vue没有监听到而已,用$forceUpdate就相当于按照最新数据给渲染一下。

    change: function(index) {
        this.list[index].sex = '男';
        this.$forceUpdate();
    },
    clear: function() {
        this.list.length = 0;
        this.$forceUpdate();
    }
    ``

    相关文章

      网友评论

        本文标题:Vue 中强制更新视图

        本文链接:https://www.haomeiwen.com/subject/wgmnortx.html