Vue中如何实现数组值变化后自动触发重新渲染？

本文共计512个文字，预计阅读时间需要3分钟。

在项目开发过程中，实例中的数据类型可以是对象、数组等。在对象中，若某个属性值发生变更，我们可以通过深度监听，实现页面自动刷新的需求。或查阅本文了解详情。

在我们项目开发过程中，实例中的数据类型可以是对象、数组等。在对象中，某个属性值发生更改时，我们可以通过对象的深度监听，以达到重新渲染页面的需求。或者查阅这篇文章

例如：

<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>

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

补充知识：vue数组操作不触发前端重新渲染

暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决。

此外，能够监听的数组变异方法

cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95

还有就是set