模板内的逻辑正常运行但迁移至ts组件文件后失效是什么原因？

• 作用域不匹配：模板内直接编写逻辑时默认访问组件实例上下文，迁移到TS文件后如果变量、方法没有显式暴露给组件实例（比如Vue组合式API中未在setup函数内return、React组件中未声明为组件内部属性），模板读取时会拿到undefined导致逻辑崩溃。
• 响应式规则未遵守：使用响应式框架时，模板内的响应式变量会被框架自动追踪依赖，迁移到TS文件后如果变量没有用对应响应式API声明（Vue3中未用ref/reactive包裹、React中未用useState/useReducer定义），变量变更不会触发模板重渲染，表现为逻辑无响应。
• 执行时机不一致：模板内的逻辑默认在每次模板渲染时重新执行，迁移到TS组件后如果写在了仅执行一次的生命周期回调中（比如Vue的onMounted、React空依赖的useEffect），后续依赖变更时逻辑不会重新运行，和模板内的原执行效果不一致。
• TS类型校验拦截：模板内编写的逻辑通常不会触发严格TS校验，迁移到TS文件后如果存在类型不匹配问题（比如变量初始值设为null但后续按字符串操作、参数类型不符合定义），编译阶段就会抛出错误导致代码无法运行。
• this指向偏移：使用类组件或选项式API时，模板内逻辑的this默认绑定组件实例，抽离为TS文件的独立方法后如果没有显式绑定this，运行时this会指向undefined或全局对象，导致读取不到组件实例上的属性和方法。
• 命名或引用错误：模板内使用的变量名和TS文件中暴露的变量名拼写不一致、TS文件的导入路径写错，都会导致模板找不到对应变量或方法，触发运行时错误。

内容的提问来源于stack exchange，提问作者Merlin