Vue2 里怎么监听 props 的变化？

做 Vue2 项目时，子组件响应父组件传的 props 变化是很常见的需求，比如父组件切换筛选条件，子组件要刷新列表；或者父组件修改了用户信息，子组件得更新展示，那 Vue2 里到底有哪些办法能监听 props 变化？不同场景该选哪种方式？今天就把这些实用技巧拆开来聊聊~

用 watch 选项直接监听 props

最直接的方式就是用 Vue 的 watch 选项，不管是单个 prop、多个 prop，还是复杂数据类型（对象/数组）的 prop，watch 都能应对，只是配置细节有区别。

监听单个基础类型 prop

假设父组件给子组件传了个字符串 msg，子组件要在 msg 变化时执行逻辑，代码可以这么写：

export default {
  props: {
    msg: String
  },
  watch: {
    msg(newVal, oldVal) {
      console.log('msg 变了：', oldVal, '→', newVal)
      // 这里写变化后的逻辑，比如发请求、更新本地数据
    }
  }
}

这样只要父组件里 msg 的值一改，子组件的 watch 就会触发。

监听多个 prop 的变化

要是想同时监听多个 prop，有两种写法，一种是给每个 prop 单独写 watch：

watch: {
  propA(newVal) { /* 处理 propA */ },
  propB(newVal) { /* 处理 propB */ }
}

另一种是用对象形式监听多个,不过更推荐分开写，逻辑更清晰，如果多个 prop 变化要联动处理，也可以把它们合并到一个计算属性里，再监听计算属性（后面会讲）。

处理对象/数组类型的 prop（深监听）

prop 是对象或数组，直接监听默认只能监听到“引用变化”（比如整个对象被重新赋值），要是想监听对象内部属性或数组元素的变化，得开 deep: true：

props: {
  userInfo: {
    type: Object,
    default: () => ({})
  }
},
watch: {
  userInfo: {
    handler(newVal, oldVal) {
      console.log('userInfo 内部变了', newVal)
    },
    deep: true // 开启深监听
  }
}

但深监听要谨慎用,因为对象层级深的话，性能消耗大，如果只是监听某一个属性，更推荐“监听具体属性路径”：

watch: {
  'userInfo.name'(newVal) {
    // 只监听 name 属性变化，性能更好
  }
}

借助生命周期钩子函数

除了 watch，Vue 的生命周期钩子也能帮我们感知 props 变化，不过得结合组件更新的逻辑来用。

updated 钩子：props 变化后执行逻辑

当 props 变化导致组件重新渲染后，updated 钩子会触发，比如子组件里有个表格，props 是表格数据，数据变化后要重置分页，就可以这么做：

export default {
  props: ['tableData'],
  data() { return { page: 1 } },
  updated() {
    // 每次 tableData 变化导致更新后，重置分页
    this.page = 1
  }
}

但要注意,updated 里不要直接修改 props（props 是父组件传的，子组件不能改），只能处理自己的 data 或执行方法。

beforeUpdate 钩子：对比 props 变化前后

beforeUpdate 在组件更新前触发，这时候可以拿到“更新前的 props”和“即将更新的 props”，比如想统计 props 变化频率：

export default {
  props: ['count'],
  data() { return { prevCount: this.count } },
  beforeUpdate() {
    if (this.count !== this.prevCount) {
      console.log('count 变化了：', this.prevCount, '→', this.count)
      this.prevCount = this.count // 更新记录
    }
  }
}

这种方式更偏向“手动对比”，没有 watch 那么直接，但适合需要精细控制更新前后逻辑的场景。

计算属性 + watch 的组合玩法

props 不能直接用，得先加工（比如过滤、格式化），这时候用计算属性处理 props，再监听计算属性会更灵活。

举个例子：父组件传了个用户列表 userList，子组件只需要显示“已激活”的用户，可以先写计算属性 activeUsers，再监听它的变化：

export default {
  props: {
    userList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    activeUsers() {
      return this.userList.filter(user => user.isActive)
    }
  },
  watch: {
    activeUsers(newVal) {
      console.log('已激活用户变化：', newVal)
      // 比如根据新的激活用户列表更新图表
    }
  }
}

这样既避免了直接修改 props，又能在加工后的数据变化时执行逻辑，代码也更内聚。

实际开发的常见场景与避坑点

知道了方法,还要结合真实场景灵活用，这些细节踩过坑才懂：

父组件异步传 props，子组件怎么监听？

父组件可能通过接口异步获取数据后再传给子组件,这时候子组件用 watch + immediate: true 就能同时处理“初始化（第一次传值）”和“后续变化”：

watch: {
  asyncProp: {
    handler(newVal) {
      if (newVal) { // 防止第一次传空的情况
        this.initComponent(newVal)
      }
    },
    immediate: true // 组件创建后立刻执行一次
  }
}

避免不必要的监听，优化性能

• 基础类型 prop 别开深监听，纯浪费性能；
• 对象监听尽量精确到属性（'obj.key'），别整个对象深监听；
• 如果多个地方要监听同一个 prop，把逻辑抽到方法里，避免重复代码。

组件销毁重建时的 props 处理

如果子组件被 v-if 控制显示隐藏（销毁重建），每次重建时 props 会重新传入，这时候用 watch 的 immediate 或者 created 钩子处理初始化逻辑更稳，因为组件销毁后再创建，生命周期会重新走一遍。

Vue2 里监听 props 变化没有“银弹”，得看场景选工具：简单场景直接用 watch；需要结合更新前后逻辑用生命周期；加工后的数据变化用计算属性+watch；还要注意性能和异步场景的细节，把这些方法吃透，子组件响应父组件数据变化就会丝滑很多~要是你在开发中碰到 props 监听的特殊情况，比如跨组件通信结合 props 的场景，评论区聊聊你的案例，咱们一起拆解解法～