vue中对数组值变化的监听与重新响应渲染的方法

在我们项目开发过程中,实例中的数据类型可以是对象、数组等。在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求。或者查阅博主的文章 https://blog.csdn.net/weixin_37861326/article/details/81034231

例如:

<script>
  export default {
    data(){
      return {
        objVal: {
          name: 'obj',
          type: 'obj'
        }
      }
    },
    watch:{
      objVal:{
        handler(val,oldval){

        },
        deep: true,
      }
    },
    methods:{
      changeObj(){
        this.objVal.name = 'newobj';
      }
    }
  }
</script>

但是,在使用同一种方式进行数组值更改监听时,这种做法是无效的

<script>
export default {
  data() {
    return {
      arrList: [1,2,3,4,5]
    };
  },
  watch: {
    arrList: {
      handler(val, oldval) {

      },
      deep: true
    }
  },
  methods: {
    changeArr() {
      // 无效
      this.arrList[0] = 10;
    }
  }
};
</script>

上述用以监听数组值变化的方法是无效的,vue是不会响应数据变化而重新去渲染页面。在vue中仅需要通过修改赋值语句的方式,即可让vue响应数组数据的变化。具体操作如下:

使用方法:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

具体使用案例:

<script>
export default {
  data() {
    return {
      arrList: [1,2,3,4,5]
    };
  },
  methods: {
    changeArr() {
      // this.arrList[0] = 10;
      // 修改为:
      this.arrList.splice(0, 1, 10);
    }
  }
};
</script>

或:

<script>
export default {
  data() {
    return {
      arrList: [1,2,3,4,5]
    };
  },
  methods: {
    changeArr() {
      // this.arrList[0] = 10;
      // 修改为:
      this.$set(this.arrList, 0, 10);
    }
  }
};
</script>

以上两种方式,均可达到监听数组值变化的效果。

阅读更多
换一批

没有更多推荐了,返回首页