this绑定错误本身不会直接引发死循环，但会因状态修改逻辑失控导致“更新→钩子→改状态→再更新”闭环；需通过绑定修复、值比对、节流及副作用机制阻断该链路。
在 Vue 或 React 的生命周期钩子中，this 绑定出错本身不会直接引发死循环，但会间接导致逻辑失控——比如本该只执行一次的更新被反复触发，或状态修改逻辑因 this 指向丢失而重复调用，最终形成“更新→钩子→改状态→再更新”的闭环。真正要防的，是错误的 this 指向 + 不受控的状态变更组合。
Vue 中 this 失效常诱发 updated 死循环
Vue 选项式 API 的生命周期钩子（如 updated、mounted）中，this 默认指向组件实例，但一旦你把回调函数抽离或传给异步/第三方 API（如 setTimeout、addEventListener、图表库回调），this 就容易丢失。
- 错误写法：在
updated里调用未绑定的外部方法，该方法内部又修改响应式数据 → 触发新一轮更新 → 再进updated - 典型陷阱：
mounted() { window.addEventListener('resize', this.handleResize) }，若handleResize里写了this.list = [...this.list]且没做防重，窗口连续 resize 就可能高频触发更新 - 修复方式：用箭头函数、
.bind(this)或类字段语法确保 this 稳定；更重要的是，在修改数据前加比对（如if (newVal !== this.cachedVal)）或节流
React 类组件中 this 绑定错误放大 shouldComponentUpdate 风险
React 的 componentDidUpdate 或 componentDidMount 里，this 绑定失效常导致 setState 调用失败或作用于错误上下文，进而让 shouldComponentUpdate 判断失准——比如本该返回 false 阻止更新，却因 this.props 是 undefined 而误判为需要更新，反复触发渲染。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 常见错误：在
componentDidMount中用内联函数注册事件，如document.addEventListener('click', () => this.setState(...))—— 表面没问题，但若该回调又被其他逻辑多次注册，就可能叠加触发 - 更隐蔽的问题：
shouldComponentUpdate里直接比较this.state.xxx，而 this 因绑定问题指向了全局或undefined，比较结果恒为true，导致无限更新 - 推荐做法：统一用类字段语法声明方法（
handleClick = () => { ... }），避免手动绑定；shouldComponentUpdate优先用PureComponent或React.memo，减少手写判断出错概率
跨框架通用防护：切断“钩子→改状态→再钩子”链路
无论 Vue 还是 React，只要钩子中修改了驱动视图的状态，就必须主动设防。这不是靠绑对 this 就能解决的，而是要从逻辑层面阻断闭环。
立即学习“前端免费学习笔记（深入）”；
-
不依赖 this 是否正确，而依赖操作是否必要：在
updated或componentDidUpdate中，先缓存上一次的 DOM 值或计算结果，仅当新旧值不同时才更新状态 - 用副作用专用机制替代钩子：Vue 推荐用
watch监听具体字段变化；React 推荐用useEffect并明确列出依赖项，避免在 effect 中无条件调用setState - 异步操作加标记：例如在
componentDidUpdate中发起请求，先检查this.isUpdating标志位；请求成功后重置标志，防止响应返回时又触发一轮更新
