在vue中对数组值变化的监听与重新响应渲染操作

在Vue中监听和重新响应渲染数组的变化操作主要是通过Vue提供的Array原型方法进行实现，下面是详细步骤：

步骤一：在vue组件中定义数组

在Vue的组件中，需要先定义要监听的数组，可以在data()中定义一个数组类型的变量，例如：

data() {
  return {
    list: ["apple", "banana", "orange"]
  }
}

其中，list就是我们要监听的数组。

步骤二：利用Vue提供的Array原型方法监听数组变化

通过Vue提供的Array原型方法，我们可以监听数组发生的变化，包括添加元素、删除元素、修改元素等等，例如：

methods: {
  add() {
    this.list.push("pear"); //添加元素操作
  },
  remove() {
    this.list.splice(0, 1); //删除元素操作
  },
  modify() {
    this.list[0] = "watermelon"; //修改元素操作
  }
}

为了更好地监听数组变化，我们可以使用Vue.set()或者this.$set()方法进行添加和修改元素操作，例如：

methods: {
  add() {
    this.$set(this.list, 3, "pear") //添加元素操作，将"pear"添加到list的第4个位置
  },
  modify() {
    this.$set(this.list, 0, "watermelon") //修改元素操作，将list中的第1个元素修改为"watermelon"
  }
}

步骤三：使用Vue提供的computed属性重新响应渲染页面

当数组发生变化时，Vue会自动监听变化，并在页面上实时更新数据。如果需要将数组的变化展示在页面上，可以利用Vue提供的computed属性重新响应渲染页面，例如：

computed: {
  listLength() {
    return this.list.length; //监听list数组长度变化
  }
}

通过定义listLength属性，我们可以监听list数组的长度变化，在页面上实时更新数据。

示例一：在Vue中监听数组变化并实现数据实时更新

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
    <button @click="add">添加元素</button>
    <button @click="remove">删除元素</button>
    <button @click="modify">修改元素</button>
    <p>数组长度：{{listLength}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["apple", "banana", "orange"]
    }
  },
  methods: {
    add() {
      this.$set(this.list, 3, "pear"); //添加元素操作，将"pear"添加到list的第4个位置
    },
    remove() {
      this.list.splice(0, 1); //删除元素操作，删除list中的第1个元素
    },
    modify() {
      this.$set(this.list, 0, "watermelon"); //修改元素操作，将list中的第1个元素修改为"watermelon"
    }
  },
  computed: {
    listLength() {
      return this.list.length; //监听list数组长度变化
    }
  }
}
</script>

在上述示例中，当点击按钮进行数组操作时，页面会实时更新数组内容和数组长度。

示例二：在Vue中监听对象中数组属性的变化

在实际开发中，有时候需要对对象中的数组属性进行监听。可以在data()中创建一个对象类型的变量，包含数组属性值，例如：

data() {
  return {
    obj: {
      arr: ["apple", "banana", "orange"]
    }
  }
}

然后对数组进行监听和渲染操作，例如：

methods: {
  add() {
    this.$set(this.obj.arr, 3, "pear"); //添加元素操作，将"pear"添加到数组的第4个位置
  },
  remove() {
    this.obj.arr.splice(0, 1); //删除元素操作，删除数组中的第1个元素
  },
  modify() {
    this.$set(this.obj.arr, 0, "watermelon"); //修改元素操作，将数组中的第1个元素修改为"watermelon"
  }
},
computed: {
  arrLength() {
    return this.obj.arr.length; //监听数组长度变化
  }
}

最后，在模板中使用对象属性和数组属性的方式进行页面渲染，例如：

<template>
  <div>
    <ul>
      <li v-for="item in obj.arr" :key="item">{{item}}</li>
    </ul>
    <button @click="add">添加元素</button>
    <button @click="remove">删除元素</button>
    <button @click="modify">修改元素</button>
    <p>数组长度：{{arrLength}}</p>
  </div>
</template>

在上述示例中，我们可以通过监听obj.arr的变化来实现数组操作和页面渲染操作。