Vue 3里，为什么很少再见到this了？
用vue 3的朋友可能都发现了，和Vue 2不一样，现在的代码里this这个关键字出现得越来越少了。这不是你的错觉，而是Vue 3设计思路带来的变化。今天我们来聊聊，为什么在Vue 3里this变少了，以及这背后意味着什么。
Vue 2：与this紧密绑定的Options api
在Vue 2时代，我们用的是Options API。这种方式下，组件的各个部分（数据、方法、计算属性等）被分门别类地放在不同的选项里。
// Vue 2 组件示例
export default {
data() {
return {
count: 0,
message: 'Hello Vue 2'
};
},
methods: {
increment() {
this.count++; // 这里必须用this
},
showMessage() {
alert(this.message); // 这里也必须用this
}
},
computed: {
doubleCount() {
return this.count * 2; // 同样需要this
}
}
}在Vue 2里，this是指向当前组件实例的引用。你要访问数据、调用方法，几乎都得通过this。这种设计简单直观，但也有问题。当组件变得复杂，代码逻辑分散在各个选项中，要跟踪一个功能的完整实现，需要在data、methods、computed等选项间来回跳转。
Vue 3的改变：走向更函数式的Composition API
Vue 3带来了全新的Composition API，这是减少this使用的主要原因。
1. 响应式系统重构
Vue 3用ref和reactive创建响应式数据，不再依赖组件实例的data选项。
// Vue 3 使用Composition API
import { ref, reactive, computed } from 'vue';
export default {
setup() {
// 创建响应式数据
const count = ref(0);
const user = reactive({
name: '张三',
age: 25
});
// 创建计算属性
const doubleCount = computed(() => count.value * 2);
// 定义方法
const increment = () => {
count.value++; // 直接操作响应式变量，不需要this
};
// 返回给模板使用
return {
count,
user,
doubleCount,
increment
};
}
}这里的关键变化是：响应式数据是独立的变量，你直接操作这些变量，不需要通过this来访问。count.value就是当前计数值，不需要写成this.count。
2. <script setup>语法糖让代码更简洁
Vue 3.2引入了<script setup>语法，进一步简化了代码。
<!-- Vue 3 使用 <script setup> -->
<script setup>
import { ref } from 'vue';
// 变量和函数都在同一作用域
const message = ref('Hello Vue 3');
const count = ref(0);
const showMessage = () => {
alert(message.value); // 直接访问变量
};
const increment = () => {
count.value++; // 直接修改变量
};
</script>
<template>
<div>
<p>{{ message }}</p>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
<button @click="showMessage">显示消息</button>
</div>
</template>用<script setup>，变量和函数都在同一个作用域里声明。模板里可以直接使用它们，完全不需要考虑this指向问题。
3. 更好的TypeScript支持
TypeScript现在是前端开发的重要工具。在Vue 2里，this的类型推断比较麻烦，需要额外配置。
// Vue 2 + TypeScript：this类型需要特别处理
import Vue from 'vue';
export default Vue.extend({
data() {
return {
count: 0
};
},
methods: {
increment(): void {
this.count++; // TypeScript可能无法正确推断this类型
}
}
});在Vue 3里，这个问题简单多了。
<!-- Vue 3 + TypeScript：类型推断更直接 -->
<script setup lang="ts">
import { ref } from 'vue';
// 明确的类型声明
const count = ref<number>(0);
const message = ref<string>('Hello');
const increment = (): void => {
count.value++; // 类型安全，不需要担心this问题
};
</script>因为不需要通过this访问数据，TypeScript可以直接推断变量类型，代码更安全，编辑器智能提示也更准确。
4. 逻辑复用更容易
Vue 2里复用逻辑通常用mixin，但mixin有自己的问题：命名冲突、来源不明确。Vue 3的Composition API通过组合函数实现逻辑复用，这些函数里自然也不需要用this。
// 创建一个可复用的计数器逻辑
import { ref, computed } from 'vue';
export function useCounter(initialValue = 0) {
const count = ref(initialValue);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
const doubleCount = computed(() => count.value * 2);
return {
count,
increment,
decrement,
doubleCount
};
}
// 在组件中使用
<script setup>
import { useCounter } from './useCounter';
const { count, increment, doubleCount } = useCounter(10);
</script>这种函数式的逻辑复用方式，让代码更清晰，也更容易测试。
5. 生命周期钩子的变化
Vue 3的生命周期钩子也变成了函数形式，不再需要this。
// Vue 2：生命周期钩子里常用this
export default {
data() {
return {
timer: null
};
},
mounted() {
// 需要this访问组件实例
this.timer = setInterval(() => {
console.log('定时器运行中');
}, 1000);
},
beforeDestroy() {
// 需要this访问之前设置的timer
if (this.timer) {
clearInterval(this.timer);
}
}
};<!-- Vue 3：函数式的生命周期钩子 -->
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
const timer = ref(null);
onMounted(() => {
// 直接使用局部变量，不需要this
timer.value = setInterval(() => {
console.log('定时器运行中');
}, 1000);
});
onUnmounted(() => {
// 直接访问timer变量
if (timer.value) {
clearInterval(timer.value);
}
});
</script>实际开发中的好处
代码更易理解
没有this，代码的依赖关系更清晰。你看到count.value，就知道这是当前作用域里的count变量，不需要考虑this指向谁。
减少常见错误
Vue 2里，箭头函数使用不当常导致this指向错误。
// Vue 2中可能出错的写法
export default {
data() {
return {
items: ['a', 'b', 'c']
};
},
created() {
// 箭头函数里的this指向不对
this.items.forEach(item => {
console.log(this); // 这里this可能不是组件实例
});
}
};Vue 3里，这种问题自然消失了，因为你很少需要用this。
更好的代码组织
相关逻辑可以组织在一起，而不是分散在不同选项中。
<script setup>
// 用户相关逻辑
import { ref, computed } from 'vue';
const userName = ref('张三');
const userAge = ref(25);
const userInfo = computed(() => `${userName.value}，${userAge.value}岁`);
// 订单相关逻辑
const orderCount = ref(0);
const orderTotal = computed(() => orderCount.value * 100);
// 这两个逻辑模块是独立的，互不干扰
</script>什么时候还会用到this？
虽然Vue 3里this用得少了，但并没有完全消失。在少数情况下你仍可能需要它：
访问特殊属性：如this.$router、this.$route（尽管Vue Router 4提供了替代的useRouter和useRoute函数）
使用Options API：如果你在Vue 3里继续使用Options API，this的用法和Vue 2一样
访问模板引用：有时需要通过this.$refs访问dom元素（模板引用现在有更现代的方式）
总结
Vue 3减少this的使用，是框架向函数式编程思想靠拢的体现。这种变化带来了几个实际好处：
代码更清晰：变量和函数在哪里声明就在哪里使用，依赖关系明确
类型支持更好：TypeScript可以更准确地推断类型
逻辑复用更简单：通过组合函数而不是mixin复用逻辑
学习曲线更平缓：新手不需要深入理解JavaScript的this机制也能上手
当然，如果你是Vue 2老手，刚开始可能会不习惯。但用一段时间后，你会发现这种函数式的写法更灵活，特别适合复杂组件的开发。
Vue 3并没有强制你不使用this，它只是提供了更好的选择。你完全可以根据项目需要和个人偏好，选择最适合的编码风格。但了解为什么this变少了，能帮助你更好地理解Vue 3的设计思想，写出更现代、更易维护的Vue代码。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
