vue watch 实现方法

监听基本数据类型

在Vue中使用watch监听基本数据类型（如String、Number、Boolean）时，可以直接在watch选项中定义：

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

监听对象属性

需要监听对象特定属性时，可以使用点语法或字符串路径：

data() {
  return {
    user: {
      name: 'Alice'
    }
  }
},
watch: {
  'user.name'(newVal) {
    console.log(`用户名变为 ${newVal}`)
  }
}

深度监听对象

当需要监听对象所有属性变化时，需设置deep: true：

watch: {
  user: {
    handler(newVal) {
      console.log('用户对象发生变化')
    },
    deep: true
  }
}

立即触发回调

配置immediate: true可在组件创建时立即执行watch回调：

watch: {
  value: {
    handler(newVal) {
      console.log('初始值:', newVal)
    },
    immediate: true
  }
}

监听数组变化

Vue能自动检测数组变异方法引起的变化，但需注意直接通过索引修改元素的情况：

watch: {
  items: {
    handler(newVal) {
      console.log('数组发生变化')
    },
    deep: true
  }
}

使用$watch API

在组件实例中动态添加监听器：

created() {
  this.$watch(
    'counter',
    (newVal, oldVal) => {
      console.log(`计数器变化: ${oldVal} → ${newVal}`)
    }
  )
}

监听计算属性

可以直接watch计算属性：

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
},
watch: {
  fullName(newVal) {
    console.log(`全名变为: ${newVal}`)
  }
}

取消监听

通过$watch返回的函数可以取消监听：

mounted() {
  const unwatch = this.$watch('data', handler)
  // 取消监听
  unwatch()
}

监听路由变化

在组件内监听路由参数变化：

watch: {
  '$route.params.id'(newId) {
    this.fetchData(newId)
  }
}