Vue 选项式 API 中 this 自动绑定组件实例，是因初始化时对 methods 等函数做了 bind 或 call 处理；生命周期钩子、computed getter、watch 回调均被 Vue 显式绑定 this，但内部普通函数、异步回调等需手动处理。
在 Vue 选项式 API 中，this 能自动绑定到组件实例，不是因为 Vue “重写了 JavaScript 的 this 规则”，而是通过函数调用时的上下文（context）劫持实现的——本质是 Vue 在初始化时对方法做了包装。
Vue 对 methods 做了自动绑定
你写在 methods 选项里的函数，Vue 会在组件实例创建时，把它们逐个绑定到当前实例上（即 fn.bind(vm)）。所以无论你在哪里调用（比如模板中点击事件、生命周期钩子内调用），this 都指向组件实例。
- 模板中：
@click="handleClick"→ Vue 内部实际执行的是vm.handleClick()，已绑定 - 在
mounted中：this.handleClick()→ 直接调用，也已绑定 - 即使解构后调用也会失效：
const { handleClick } = this; handleClick();→this变成undefined（严格模式）或全局对象，因为脱离了绑定环境
data、computed、watch 中的函数也有类似处理
data 返回的对象属性不会被绑定（它只是响应式数据源），但其中定义的函数如果被挂到 this 上（比如返回一个方法），就和 methods 一样需手动绑定；而 computed 和 watch 的回调函数，Vue 会显式以组件实例为 this 调用（内部用 fn.call(vm, ...)），所以也能访问 this.xxx。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
-
computed的 getter：Vue 确保每次求值都用vm作为this -
watch的回调：Vue 同样用vm调用，且传入新旧值参数 -
data中返回的函数：除非你显式绑定（如return { fn: this.method.bind(this) }），否则不自动绑定
生命周期钩子本身就是绑定好的方法
你写的 created、mounted 等选项，Vue 在初始化阶段会把它们收集起来，并统一以组件实例为 this 执行。所以你在这些钩子里直接写 this.message 或 this.$emit 完全没问题。
立即学习“Java免费学习笔记（深入）”；
- 这些钩子不是“普通函数字面量”，而是被 Vue 注册进实例调度系统的方法
- 即使你用箭头函数写钩子（如
mounted: () => { console.log(this); }），this会丢失——因为箭头函数没有自己的this，它捕获的是定义时的外层作用域（通常是window或undefined），所以 Vue 不允许在选项中使用箭头函数定义钩子
不被自动绑定的场景需要你手动处理
以下情况 Vue 不干预，this 行为遵循原生 JS 规则：
- 在
methods内部定义的普通函数（非选项）：比如methods: { foo() { const bar = function() { console.log(this); }; bar(); } }→ 这里的bar是普通函数调用，this不是实例 - 定时器、事件监听器、Promise 回调等异步函数：必须用箭头函数或
.bind(this)，否则this会丢失 - 第三方库回调（如
axios.then(...)、mapbox.on('click', ...)）：同样需要确保this正确，推荐箭头函数
