Hishallyi

Appearance

组件式 API（Composition API） 中没有 this，而 选项式 API（Options API） 中有 this。这是两种 API 设计哲学的重要区别之一。

1. this 在选项式 API 中的作用 ​

在选项式 API 中，this 指向当前 Vue 组件实例。通过 this，你可以访问以下内容：

  • 数据：this.dataProperty
  • 方法：this.methodName()
  • 计算属性：this.computedProperty
  • 生命周期钩子：this.$on, this.$emit 等
  • Vue 实例方法：this.$refs, this.$nextTick 等

示例：选项式 API 中使用 this ​

javascript
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++; // 通过 this 访问 data 中的 count
    },
  },
  mounted() {
    console.log("组件已挂载");
    this.increment(); // 通过 this 调用 methods 中的方法
  },
};

2. 组件式 API 中没有 this ​

组件式 API 是基于函数式的设计，所有的逻辑都通过函数来实现，因此没有 this。取而代之的是，你可以直接使用 Vue 提供的函数（如 ref、reactive、onMounted 等）来管理状态和逻辑。

示例：组件式 API 中没有 this ​

javascript
import { ref, onMounted } from "vue";

export default {
  setup() {
    const count = ref(0); // 定义响应式数据

    const increment = () => {
      count.value++; // 直接操作 ref 的值
    };

    onMounted(() => {
      console.log("组件已挂载");
      increment(); // 直接调用函数
    });

    return {
      count,
      increment,
    };
  },
};

在 <script setup> 中，这种写法更加简洁：

vue
<script setup>
import { ref, onMounted } from "vue";

const count = ref(0);
const increment = () => {
  count.value++;
};

onMounted(() => {
  console.log("组件已挂载");
  increment();
});
</script>

3. this 的作用是什么？ ​

this 在选项式 API 中是一个关键概念，它的作用包括：

3.1 访问组件实例 ​

this 指向当前 Vue 组件实例，可以通过它访问组件的状态（data）、方法（methods）、计算属性（computed）等。

3.2 调用实例方法 ​

Vue 提供了一些实例方法，如 this.$emit（触发事件）、this.$refs（访问 DOM 或子组件）、this.$nextTick（等待 DOM 更新）等。

3.3 访问生命周期钩子 ​

在生命周期钩子中，this 指向当前组件实例，可以访问组件的状态和方法。

3.4 访问插件或全局属性 ​

通过 this，可以访问 Vue 实例上挂载的全局属性或插件（如 this.$router、this.$store 等）。

4. 为什么组件式 API 没有 this？ ​

组件式 API 的设计目标是提供更灵活、更函数式的编程方式，避免 this 带来的上下文问题。以下是组件式 API 没有 this 的原因：

4.1 函数式编程 ​

组件式 API 鼓励使用纯函数和响应式数据，而不是依赖于 this 的上下文。这种方式更符合函数式编程的思想。

4.2 更好的逻辑复用 ​

通过函数式的设计，逻辑可以更容易地被提取和复用（例如使用自定义 Hook）。

4.3 更好的 TypeScript 支持 ​

this 在 TypeScript 中的类型推断比较复杂，而组件式 API 的函数式设计更容易与 TypeScript 集成。

4.4 更清晰的代码结构 ​

组件式 API 将逻辑分散到不同的函数中，而不是集中在 this 上，代码结构更加清晰。

5. 如何替代 this 的功能？ ​

在组件式 API 中，this 的功能被以下方式替代：

选项式 API（this）组件式 API（替代方案）
this.dataProperty使用 ref 或 reactive 定义响应式数据
this.methodName()直接定义函数并调用
this.computedProperty使用 computed 函数定义计算属性
this.$emit使用 defineEmits 定义和触发事件
this.$refs使用 ref 函数获取 DOM 或子组件的引用
this.$nextTick直接使用 nextTick 函数
this.$router / this.$store使用 useRouter / useStore 等组合式函数

示例：替代 this 的功能 ​

javascript
import { ref, computed, nextTick, onMounted } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const count = ref(0); // 替代 this.count
    const doubleCount = computed(() => count.value * 2); // 替代 this.doubleCount

    const increment = () => {
      count.value++;
      nextTick(() => {
        console.log("DOM 已更新");
      });
    };

    const router = useRouter(); // 替代 this.$router
    const navigate = () => {
      router.push("/about");
    };

    onMounted(() => {
      console.log("组件已挂载");
    });

    return {
      count,
      doubleCount,
      increment,
      navigate,
    };
  },
};

6. 总结 ​

  • 选项式 API 中有 this，它指向当前组件实例，用于访问数据、方法、计算属性、实例方法等。
  • 组件式 API 中没有 this，它通过函数式的设计（如 ref、reactive、computed 等）来管理状态和逻辑。
  • 组件式 API 的设计目标是提供更灵活、更函数式的编程方式，避免 this 带来的上下文问题。
  • 如果你习惯了选项式 API 的 this，可以逐步适应组件式 API 的函数式设计，享受其带来的代码清晰度和逻辑复用性。