vue监听实现

Vue 监听实现方法

Vue 提供了多种方式来实现数据监听，以下是常见的几种方法：

watch 选项

在 Vue 实例中使用 watch 选项可以监听数据变化并执行相应操作：

new Vue({
  data: {
    message: 'Hello'
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`消息从 ${oldVal} 变为 ${newVal}`);
    }
  }
});

$watch 方法

可以通过实例方法 $watch 动态添加监听器：

const vm = new Vue({
  data: {
    count: 0
  }
});

vm.$watch('count', function(newVal, oldVal) {
  console.log(`计数从 ${oldVal} 变为 ${newVal}`);
});

computed 计算属性

计算属性会根据依赖的响应式数据自动更新：

new Vue({
  data: {
    firstName: '张',
    lastName: '三'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

深度监听对象

使用 deep 选项可以深度监听对象内部变化：

new Vue({
  data: {
    user: {
      name: '李四',
      age: 25
    }
  },
  watch: {
    user: {
      handler(newVal) {
        console.log('用户信息变化', newVal);
      },
      deep: true
    }
  }
});

立即触发监听

使用 immediate 选项可以让监听器在创建时立即执行一次：

new Vue({
  data: {
    value: '初始值'
  },
  watch: {
    value: {
      handler(newVal) {
        console.log('当前值:', newVal);
      },
      immediate: true
    }
  }
});

监听路由变化

在 Vue Router 中可以监听路由变化：

watch: {
  '$route'(to, from) {
    console.log(`从 ${from.path} 跳转到 ${to.path}`);
  }
}

数组变更监听

Vue 能检测以下数组方法触发的变更：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

new Vue({
  data: {
    items: [1, 2, 3]
  },
  watch: {
    items: {
      handler(newVal) {
        console.log('数组变化:', newVal);
      },
      deep: true
    }
  }
});

注意事项

1. 对于对象和数组的深度监听可能影响性能，应谨慎使用
2. 计算属性默认有缓存，只有当依赖变化时才会重新计算
3. 对于复杂数据结构，可能需要使用特殊方法确保响应性
4. 在组件销毁时，手动添加的监听器需要手动移除