在Vue2开发中，this的指向问题常常让开发者困惑。不同场景下，this可能指向Vue实例、DOM元素、window对象，甚至是undefined。本文将通过代码示例、对比表格和原理分析，全面探讨Vue2中this的行为。
先说结论：
- 匿名函数 function(){} 除了methods中的,其他都是 undefined
- 箭头函数 ()=> 只有methods中是undefined
-- 箭头函数没有自己的this，其this继承自父级作用域
一、Vue2中this的基本规则
Vue2通过代理机制，在组件实例化时，将data、methods、computed等选项中定义的属性和方法绑定到实例的上下文中。以下是this的核心逻辑：
| 现象 | 示例代码 | this指向 | 原理分析 |
|---|---|---|---|
| Vue实例方法 | methods: { fn() { this } } | Vue实例 | Vue将methods中的函数自动绑定到实例，通过bind或call隐式绑定this。 |
| 生命周期钩子 | created() { this } | Vue实例 | 钩子函数由Vue内部调用，上下文为当前组件实例。 |
| DOM事件处理器 | @click="handleClick" | Vue实例 | 事件回调被Vue包裹，确保this指向实例。 |
| 匿名函数或回调 | setTimeout(function() { this }) | window或undefined | 普通函数未绑定上下文，严格模式下为undefined。 |
| 箭头函数 | methods: { fn: () => this } | 外层作用域的this | 箭头函数无自身this，继承父级作用域（可能是window或模块作用域）。 |
二、不同场景下的this指代对比
1. Vue实例内部的方法
javascript
复制
export default {
data() {
return { count: 0 };
},
methods: {
increment() {
console.log(this); // Vue实例（可访问this.count）
}
}
};
- 原理：Vue在初始化时，通过
Object.defineProperty将methods中的函数绑定到实例。
2. DOM事件绑定的方法
vue
复制
<template>
<button @click="handleClick">Click</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log(this); // Vue实例
}
}
};
</script>
-
陷阱：若直接绑定匿名函数，可能丢失上下文：
<button @click="() => handleClick()">Click</button> <!-- 此时this仍正确，但需注意参数传递 -->
3. 异步回调中的this
export default {
methods: {
fetchData() {
setTimeout(function() {
console.log(this); // window或undefined（严格模式）
}, 1000);
}
}
};
-
解决方案：使用箭头函数或显式绑定：
setTimeout(() => { console.log(this); // Vue实例（箭头函数继承外层this） }, 1000); // 或 setTimeout(function() { console.log(this); // Vue实例 }.bind(this), 1000);
4. 第三方库中的回调
export default {
methods: {
initLibrary() {
axios.get('/api/data').then(function(response) {
console.log(this); // window或undefined（取决于库的实现）
});
}
}
};
-
修复方式：优先使用箭头函数：
axios.get('/api/data').then(response => { console.log(this); // Vue实例 });
5. 箭头函数在methods中的问题
export default {
methods: {
badPractice: () => {
console.log(this); // window或父级作用域（非Vue实例！）
}
}
};
- 关键点：永远不要在
methods中使用箭头函数定义方法，否则this指向错误。
三、特殊场景的this行为
1. Vue.extend动态组件
const Component = Vue.extend({
methods: {
showThis() {
console.log(this); // 组件实例（动态创建的组件）
}
}
});
new Component().showThis();
2. 混入（Mixins）中的this
const myMixin = {
created() {
console.log(this); // 使用混入的组件实例
}
};
3. Vuex和Vue Router中的this
export default {
methods: {
goToHome() {
console.log(this.$router); // Vue Router实例（通过Vue原型链注入）
console.log(this.$store); // Vuex Store实例
}
}
};
四、this指代问题对照表
| 场景 | 代码示例 | this指向 | 是否安全？ | 解决方案 |
|---|---|---|---|---|
| Vue实例方法 | methods: { fn() { this } } | Vue实例 | ✅ | 默认安全 |
| 生命周期钩子 | mounted() { this } | Vue实例 | ✅ | 无需处理 |
| 事件处理器（模板） | @click="handleClick" | Vue实例 | ✅ | 直接使用 |
| 事件处理器（匿名函数） | @click="() => handleClick()" | Vue实例 | ✅ | 箭头函数包裹 |
setTimeout回调 | setTimeout(function() { this }) | window/undefined | ❌ | 改用箭头函数或.bind(this) |
Promise链式调用 | .then(function() { this }) | window/undefined | ❌ | 箭头函数捕获外层this |
| 第三方库回调（如axios） | axios.get().then(function() {}) | 依赖库实现 | ❌ | 箭头函数或闭包保存this |
methods中的箭头函数 | methods: { fn: () => this } | 外层作用域 | ❌ | 改用普通函数 |
五、核心原理剖析
-
隐式绑定
Vue在初始化时，通过以下伪代码将methods绑定到实例：function initMethods(vm) { const methods = vm.$options.methods; for (const key in methods) { vm[key] = methods[key].bind(vm); // 关键：bind到实例 } } -
箭头函数的词法作用域
箭头函数没有自己的this，其this继承自父级作用域。例如：const obj = { traditionalFn: function() { console.log(this) }, // obj arrowFn: () => console.log(this) // window（假设在全局定义） }; -
严格模式的影响
在严格模式下（如Vue CLI默认配置），未绑定的函数中的this为undefined："use strict"; function test() { console.log(this); // undefined }
六、常见误区与解决方案
| 误区描述 | 错误代码示例 | 正确写法 |
|---|---|---|
在methods中使用箭头函数 | methods: { fn: () => this } | methods: { fn() { this } } |
在异步回调中直接访问this.data | setTimeout(function() { this.data }) | 使用闭包或箭头函数保存this |
误以为this在所有回调中自动指向Vue实例 | axios.get().then(function() { this }) | 提前保存const _this = this |
