Vue3 响应式系统中的 trigger 函数作用是什么?教你手动控制更新

雨枫酱_6805

雨枫酱_6805

2026-03-24

230人浏览

原创

trigger 是 vue3 响应式系统中负责派发更新的核心机制,由 proxy 的 set 拦截器隐式调用,根据操作类型(set/add/delete)触发对应依赖;它与 triggerref 的区别在于:前者是内部函数作用于 reactive/ref,后者是供开发者手动唤醒 shallowref 响应的 api。

vue3 响应式系统中的 trigger 函数作用是什么?教你手动控制更新

trigger 函数是 Vue3 响应式系统中负责“派发更新”的核心机制。它不主动监听变化,而是在数据被修改后,自动找出所有依赖该数据的副作用函数(比如 effect、计算属性、组件渲染函数),并依次执行它们,从而驱动视图更新。

trigger 是怎么被调用的?

它由 Proxy 的 set 拦截器隐式触发——当你给响应式对象赋值(如 state.count = 5)、添加属性(obj.newKey = 'val')或删除属性(delete obj.key)时,Vue 内部的 set 处理逻辑会判断操作类型(SET / ADD / DELETE),再调用 trigger 并传入目标对象、操作类型和相关键名。

  • 对普通对象,trigger 查找 targetMap.get(target).get(key) 对应的依赖集合
  • 对数组,除了 key 还会检查 'length' 依赖(例如 push 后 length 变了)
  • 若为新增属性(ADD)且目标是数组,还会触发 length 相关的 effect

trigger 和 triggerRef 有什么区别?

trigger 是底层运行时函数,用户代码中不可直接调用;triggerRef 则是暴露给开发者的 API,专用于 shallowRef 场景。

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习