vue监听数组变化获取数组旧值

在 Vue 中，可以使用 `watch` 监听数组的变化。但是 `watch` 默认是不会监听到数组中每个元素的变化的，而只会监听到数组本身的变化，如 push、pop、shift、unshift、splice 和 sort 等方法的调用。如果想要监听到数组中元素的变化，可以使用 `deep` 选项，将其设置为 `true`。代码示例如下：

watch: {
  arr: {
    handler(newVal, oldVal) {
      console.log('数组发生变化啦！')
      console.log('新值：', newVal)
      console.log('旧值：', oldVal)
    },
    deep: true // 开启深度监听
  }
}

需要注意的是，开启 `deep` 监听会带来一些性能上的损耗，因为每当数组中的元素发生变化时，都会触发一次回调函数。如果数组较大，可能会影响页面的性能。如果只想监听某个特定的元素，可以考虑使用 `$watch` 方法，手动监听该元素的变化。

相关问题

vue监听数组变化

在 Vue 中，可以使用 `watch` 监听数组的变化。但是由于 JavaScript 的限制，使用 `watch` 监听数组变化时只能监听到数组的长度变化和数组内部元素的引用变化，而不能监听到数组内部元素的属性变化。

如果需要监听数组内部元素的属性变化，可以使用 Vue 提供的 `$set` 或者 `splice` 方法来修改数组，并且在修改后使用 `watch` 监听数组的变化。

示例代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: "Vue.js 实战教程" },
        { title: "JavaScript 高级编程" },
        { title: "Python 基础教程" },
      ],
    };
  },
  mounted() {
    // 监听数组变化
    this.$watch("list", (newVal, oldVal) => {
      console.log("list changed:", newVal, oldVal);
    }, { deep: true }); // 使用 deep 选项可以监听到数组内部元素的属性变化
  },
  methods: {
    changeTitle(index, newTitle) {
      // 修改数组内部元素的属性
      this.$set(this.list[index], "title", newTitle);
    },
    addBook(title) {
      // 使用 splice 方法添加新元素
      this.list.splice(this.list.length, 0, { title });
    },
  },
};
</script>

在上面的示例中，我们使用 `$set` 方法来修改了数组内部元素的属性，并使用 `splice` 方法来添加了新元素，然后在 `mounted` 钩子中使用 `watch` 监听了数组的变化。注意，为了监听到数组内部元素的属性变化，我们需要将 `deep` 选项设置为 `true`。

vue 监听数组变化后赋值

在Vue.js中，监听数组的变化并自动更新视图通常通过`v-model`, `watch`属性或者`$set`方法来实现。`v-model`本身就能处理数组的深度监听，但如果直接操作数组元素可能会导致视图未更新的问题，这是因为Vue的响应式系统默认只监听数组的索引更改。

这里以`watch`为例：

data() {
  return {
    items: [1, 2, 3]
  }
}

// 使用 watch 监听数组变化
watch: {
  items(newItems) {
    // 这里使用 $set 方法确保 Vue 能跟踪到新添加或删除的元素
    this.$set(this, 'items', newItems);
  }
}

当你在`newItems`改变时，如`this.items.push(4)`，`watch`中的回调会被触发，并将新的数组赋值给`items`，从而使得视图自动更新。

另外一种常用的方式是在数组方法内部使用`this.$emit('update:items')`手动通知Vue更新：

methods: {
  addItem() {
    const newItem = { /* ... */ };
    this.items.push(newItem);
    this.$emit('update:items', this.items); // 触发视图更新
  }
}