Vue是目前前端开发中使用较广泛的框架之一，它提供了许多便捷的方式来实现数据响应式、模板渲染以及组件化等功能。在Vue中，我们经常会使用watch来监听数据的变化，但是，当需要监听数组变化时，我们需要注意一些细节。
在Vue中，我们可以使用watch来监听单个属性或者对象的变化，其基本使用方式如下：
watch: { // 监听对象属性 obj: { handler: function (newVal, oldVal) { // ... }, deep: true }, // 监听单个属性 prop: function (newVal, oldVal) { // ... }}
登录后复制
如果我们要监听数组变化，需要注意以下几点：
1.使用vm.$watch方法
Vue提供了vm.$watch方法来监控数据变化，该方法返回一个取消监听的函数。这里的vm指的是Vue的实例。对于数组而言，我们可以使用该方法监控数组的变化。其基本使用方式如下：
立即学习“前端免费学习笔记（深入）”；
vm.$watch('arr', function (newVal, oldVal) { // ...}, { deep: true})
登录后复制
这里的arr就是我们需要监控的数组，handler回调函数中的newVal和oldVal分别表示监控到的新值和旧值。另外，由于数组中每个元素都是对象的情况比较常见，因此需要设置deep为true，才能做到深度监听。
需要注意的是，使用vm.$watch方法监听的数组，Vue不会自动对其进行劫持。因此，我们需要手动对数组进行劫持，才能监听到数组的变化。
2.监听数组中的每个元素
如果我们需要监听数组中每个元素的变化，可以使用vm.$watch方法中的immediate和handler参数，代码如下：
arr.forEach(function (item, index) { vm.$watch( function () { return arr[index]; }, { immediate: true, deep: true, handler: function (newVal, oldVal) { // ... } } );});
登录后复制
这里的immediate为true，意味着在监听的时候就会执行一次回调函数。需要注意的是，上面的代码并没有对整个数组进行劫持，而是单独对每个元素进行监听。
3.利用computed计算属性
Vue中的计算属性可以基于已有的数据计算出新的数据，因此我们可以利用计算属性来监听数组的变化。其基本使用方式如下：
computed: { // 监听arr数组 arrWatcher: function () { this.arr; // 调用一次arr，以实现依赖收集 return this.arr; }},watch: { // 监听计算属性 arrWatcher: { handler: function (newVal, oldVal) { // ... }, deep: true }}
登录后复制
这里的arrWatcher就是我们定义的计算属性，该计算属性的返回值是监听的数组。在watch中监听该计算属性的变化即可。由于计算属性会自动进行依赖收集，因此当数组变化时，计算属性会自动更新，从而触发watch回调函数。
在使用计算属性监听数组变化的时候，需要注意一点：如果我们只需要监听数组长度的变化而不关心数组中元素的变化，那么可以简单地使用计算属性来实现。但如果需要监听数组中元素的变化，还需要对数组中的每个元素进行劫持，同样需要使用vm.$watch方法。
综上所述，我们可以利用vm.$watch方法、监听数组中的每个元素以及利用计算属性等方式来监听Vue中数组的变化。需要特别注意的是，在使用这些方法的时候，应该对数组进行劫持操作，以确保Vue能够正确地监听到数组的变化。
以上就是Vue中如何使用watch监听数组的变化的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3229456.html
