vue中实现监听数组内部元素

要实现监听Vue数组内部元素的变化，可以使用Vue提供的watch方法和变异方法。下面是完整的攻略：

1. 使用Vue提供的watch方法

在Vue中，可以使用watch方法来监视数组内部元素的变化。

下面是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{item}}</li>
    </ul>
    <input v-model="newItem" @keyup.enter="addItem">
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['apple', 'banana', 'pear'],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      this.arr.push(this.newItem)
      this.newItem = ''
    }
  },
  watch: {
    arr: {
      handler(newValue, oldValue) {
        console.log('数组发生了变化：')
        console.log('新值：' + newValue)
        console.log('旧值：' + oldValue)
      },
      deep: true
    }
  }
}
</script>

在上面的示例代码中，我们通过监视arr这个数组的变化，当数组变化时，我们在控制台中输出了新值和旧值。watch选项中的deep属性表示是否递归地监听数组内部元素的变化。

2. 使用变异方法

在Vue中，push、pop、shift、unshift、splice、sort、reverse 这些数组操作方法可以触发视图更新。因为这些操作会改变原始数组本身，并且在执行这些操作时，Vue 会自动触发视图的更新。

以下是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{item}}</li>
    </ul>
    <input v-model="newItem" @keyup.enter="addItem">
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['apple', 'banana', 'pear'],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      this.arr.push(this.newItem)
      this.newItem = ''
    }
  }
}
</script>

在上面的示例代码中，我们通过使用push方法向数组中添加新元素。当我们触发push操作时，Vue会自动检测到数组修改并进行视图更新。

使用变异方法是一种更加简单和灵活的方法，但是需要注意不要直接替换整个数组。如果直接替换整个数组，Vue将不能侦测到数组变化，并且可能会导致一些意想不到的问题。

以上是vue中实现监听数组内部元素的完整攻略，希望对你有所帮助。