vue3为什么没有this • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue3中取消了以前版本中的this指向Vue实例的用法，原因是为了更好地支持TypeScript和更好地进行代码静态分析。

在Vue2中，通过this可以访问到Vue实例的属性和方法。但是由于JavaScript中this的指向问题比较复杂，在某些情况下会导致this指向错误或难以追踪，给开发带来一些困扰。

为了解决这个问题，Vue3中引入了新的Composition API，并对Vue实例的访问进行了优化。通过使用ref、reactive等新的API，可以在组件内部定义响应式数据并实现组件的逻辑，而不再需要通过this来访问。

这种改变带来的好处是，代码更易于编写和维护，并且在编译期间可以更好地进行类型检查和代码静态分析。而且，取消了this的使用之后，还可以更好地支持使用函数式组件和更灵活的组合式编程。

需要注意的是，尽管没有this指向Vue实例的用法，但是在Vue3中仍然可以使用this来访问一些全局的API，比如this.$emit、this.$router等。

总之，Vue3取消了this指向Vue实例的用法，主要是为了提供更好的开发体验、提高代码的可维护性，并更好地支持静态分析工具和TypeScript。

1年前 0条评论

worktile

Worktile官方账号

Vue3采用了基于Composition API的开发方式，相较于Vue2中的Options API，它具有许多改进和优化，其中之一就是对this的改变。

更好的类型推导和IDE支持：在Vue3中使用Composition API，可以更好地进行类型推导和支持IDE的代码提示。由于Vue3的Composition API基于函数式编程，可以更容易地推断出函数的类型和参数类型，并且还可以通过类型推导来检查代码的正确性。这样可以避免在Vue2中使用this时出现的类型错误和难以排查的bug。
更好的代码重用和组合性：Composition API将组件的逻辑分解为独立的函数，每个函数只关注一个特定的功能。这使得函数的重用和组合更加容易，可以将它们组合成更大的功能块，而不需要依赖于this来访问组件的属性和方法。
更好的组件模块化：在Vue3中，组件的逻辑可以以组合函数的形式进行封装，可以将一些逻辑放置在独立的函数中，再通过使用函数参数来传递和访问组件的状态。这样可以使组件更加模块化和可复用，不再受限于this的上下文。
更好的性能和优化：Vue3采用了新的响应式系统，相较于Vue2中的Object.defineProperty，大大提升了性能和响应式的效率。Composition API的设计也更好地支持了Tree-shaking，可以在打包时自动剔除未使用的代码，减小包的大小。
更好的面向对象编程体验：Vue3的Composition API可以更好地支持面向对象（OOP）的编程风格。通过将组件的逻辑和状态封装在函数中，可以更方便地进行模块化和重用。这种面向对象的编程体验可以提高代码的可维护性和可读性。

总的来说，Vue3没有this是为了改善代码的可维护性、性能和编程体验。Composition API的设计使得代码更加模块化、可复用，并且更易于进行类型推导和检查。虽然没有this，但通过函数的参数和返回值来传递和访问组件的状态，并结合Vue3提供的更好的响应式系统，可以实现同样的功能。所以，虽然改变了语法和编程范式，但Vue3的Composition API为开发者提供了更强大和灵活的工具来构建高质量的Vue应用程序。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue3中，this指向实例的方法或属性已经被移除了。这主要是因为Vue3使用了Composition API，它使用了一种新的方式来编写组件逻辑，并且没有了this的使用。

在Vue2中，组件内的方法和属性都是通过this来访问和调用的。但是这种方式在大型项目中可能会导致一些问题，比如混淆this的指向、作用域问题等。为了解决这些问题，Vue3引入了Composition API。

Composition API是一组基于函数的API，它可以让我们以更清晰、更灵活的方式组织组件的逻辑。它不再依赖于this指针，而是通过reactive、ref等函数将数据响应式化，使用setup函数来定义组件的逻辑。

下面是在Vue3中使用Composition API的步骤：

导入Vue和相关函数：

import { createApp, reactive, ref } from 'vue';

创建一个组件实例并定义setup函数：

const app = createApp({
  setup() {
    // 在这里定义组件的逻辑
  }
});

在setup函数内使用reactive函数将数据响应式化：

const state = reactive({
  count: 0
});

在setup函数内定义组件方法：

function increment() {
  state.count++;
}

在模板中使用定义的数据和方法：

<template>
  <div>
    <span>{{ state.count }}</span>
    <button @click="increment">增加</button>
  </div>
</template>

在这个例子中，我们使用了reactive函数将state对象中的count属性变成了响应式数据，同时定义了一个increment方法来增加count。在模板中，我们使用了state.count和increment来展示数据和响应用户的点击事件。

通过上面的步骤，我们可以看到，在Vue3中使用Composition API来组织组件的逻辑不再依赖于this指针，而是采用函数的方式来定义和使用数据和方法。这种方式更加清晰、灵活，并且可以解决传统方式中一些存在的问题。

1年前 0条评论