Vue.js 处理组件属性更新引发的副作用函数-Vue.js-PHP中文网

vue中props更新触发副作用函数依赖“依赖收集+精准触发”闭环：访问props时track收集依赖，父组件修改props时trigger重执行effect；对象props需实际读取路径才响应深层变化，解构或条件访问易导致失效。

vue.js 处理组件属性更新引发的副作用函数

Vue.js 处理组件属性（props）更新时引发的副作用函数，核心在于“依赖收集 + 精准触发”闭环，而非简单监听变化。props 本身是只读响应式数据，其更新由父组件驱动，子组件通过 track 收集依赖、trigger 触发 effect 重执行，整个过程自动完成，但行为高度依赖访问路径和响应式结构。

props 更新如何触发副作用函数

当父组件修改传给子组件的 props 值（如 age: 25 → age: 26），子组件中已读取过 props.age 的副作用函数（如 render 函数、watchEffect 或 computed）会被重新执行。这是因为：

子组件初始化时，访问 props.age 触发 getter，将当前活跃 effect（如组件 render）加入 age 对应的依赖集合（Dep）
父组件更新 age 时，触发 setter，内部调用 trigger(target, 'set', 'age')
该 trigger 查找 age 的 Dep，把其中所有 effect 推入调度队列（如 queueJob）
下一个微任务中批量执行这些 effect，实现 DOM 重渲染或逻辑重计算

对象类型 props 的深层响应性关键点

当 props 是对象（如 person: { name: 'Alice', age: 30 }），子组件是否响应 person.age 变化，取决于它是否在初始化时“真正读取”过该路径：

php版微信js-sdk支付接口类

下载

若子组件模板写了 {{ person.age }} 或 script 中执行了 props.person.age，则 person 和 person.age 都被 track，父组件改 this.person.age = 31 会触发更新
若仅访问 props.person 而未深入读取 .age，则 person.age 的变化不会触发 effect —— Vue 不预收集未访问的嵌套属性
注意：对象引用不变时（如 this.person.age = 31），因 person 本身仍是同一响应式对象，其内部 age 的 set 拦截仍生效；但若父组件替换整个对象（this.person = { ... }），则旧依赖失效，需重新 track

常见失效场景与规避方式

props 更新后副作用未执行，多数源于依赖未建立或被绕过：

解构丢失响应性：写 const { age } = props 后使用 age，实际读取的是普通变量，不再触发 track；应改用 props.age 或 toRefs(props)
条件分支跳过读取：如 props.show && props.message，当 show 为 false 时 message 不被 track，后续 show 变 true 也不会自动补收依赖；可改用 watch(() => [props.show, props.message], ...) 显式监听
使用 shallowRef 或 markRaw 包裹 props 数据，会阻断 proxy 拦截，导致 set 不触发 trigger
在非 effect 上下文（如生命周期钩子外的普通函数）直接修改 props，违反只读约定，且无法触发响应链