vue3为什么不使用this • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue3中不再使用this的原因是出于一些设计优化和语法简化的考虑。下面是详细的解释：

TypeScript支持：Vue3的开发团队决定使用TypeScript来编写Vue的核心代码，而不仅仅是提供类型声明。在TypeScript中，this的类型识别比较困难，容易引发类型推断问题。为了避免这种情况，Vue3选择了使用更严格的类型系统，并且把组件内部的属性和方法绑定到组件实例上，而不是this。
让函数式组件更容易：在Vue3中，函数式组件成为了一种重要的组件模式。函数式组件是无状态的，可以更好地支持组件复用，结构清晰，易于追踪和测试。因为函数式组件没有this上下文，所以Vue3取消了在函数式组件中使用this。
减少误用和错误：在Vue2中，this的使用限制了一些JavaScript语法，容易引发错误。在Vue3中，采用setup函数和ref、reactive等新的响应式API来代替data和methods选项，可以更灵活和精确地控制组件状态。这样可以减少this的使用，降低误用的概率。

综上所述，Vue3不再使用this是为了优化语法设计、提高类型安全性，同时也是为了更好地支持函数式组件和减少误用。这些改变使得Vue3更加现代化、清晰和易用，也可以提高开发效率和代码可维护性。

1年前 0条评论

worktile

Worktile官方账号

Vue 3 在设计上移除了组件实例中使用 this 的方式来访问组件的数据和方法。就像 React Hooks 取代了 Class 组件的 this.state 和 this.setState, Vue 3 也引入了 Composition API 来替代 Vue 2 中的 Options API。这个改变主要基于以下几点考虑：

避免 this 指针的混淆：在 Vue 2 中，this 指向的是组件实例本身。但是在嵌套组件和回调函数中，this 的指向会发生变化，导致代码阅读和维护的困惑。尤其是在使用箭头函数或者一些异步函数的情况下，这个问题更加突出。通过移除 this，可以避免代码中对于 this 指针的困惑。
更好的 TypeScript 支持：使用 this 会使得 TypeScript 的类型推断变得困难。在 Vue 3 中，通过使用函数式的 API，可以更好地与 TypeScript 进行集成，提供更好的类型推断和类型检查。
更好的代码复用：在 Vue 2 的 Options API 中，组件的逻辑和数据都集中在一个对象中，导致组件代码的可复用性比较低。而在 Vue 3 的 Composition API 中，可以将逻辑和数据划分为更小的函数，提高代码的可复用性和组织性。
更好的测试：使用函数式的 API，可以更容易地进行单元测试。因为使用函数而不是 this，可以方便地模拟数据和方法的输入和输出。
更好的性能：移除 this 也有助于提高 Vue 的性能。因为 this 在 JavaScript 中是一个动态绑定的概念，在访问 this 时需要进行一次变量查找。而通过直接使用函数来访问数据和方法，可以避免这个额外的开销。

总结来说，Vue 3 移除了使用 this 的方式，是为了解决 this 指针混淆、提供更好的 TypeScript 支持、提高代码复用和测试性、以及提高性能等方面的问题。这样的设计改进让 Vue 3 在开发和维护方面更加简洁、可靠和高效。

1年前 0条评论

不及物动词

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

在Vue3中，不再使用this关键字来访问组件实例。这是因为Vue3采用了Composition API（组合式API），取代了Vue2中的Options API（选项式API）。

Composition API的优势

Composition API使得代码更加可维护和可读，以及更易于组件复用。它通过一种函数组合的方式来组织代码，将相关的逻辑进行封装，提高了代码的组织性和复用性。

使用Ref和Reactive

在Vue3中，使用Ref和Reactive来创建响应式数据。

Ref：用来创建单一值的响应式引用，类似于Vue2中的data选项。使用Ref可以通过.value属性来访问和修改值。

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

count.value++ // 修改值
console.log(count.value) // 1

Reactive：用来创建一个包含多个属性的响应式对象，类似于Vue2中的data选项。Reactive会递归地将对象变为响应式。

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello Vue3!'
})

console.log(state.count) // 0
console.log(state.message) // Hello Vue3!

state.count++ // 修改值
console.log(state.count) // 1

使用Setup

Vue3中引入了一个新的选项setup，它取代了Vue2中的created、mounted等声明周期钩子函数。setup是一个函数，它在组件实例创建之前被调用。在setup函数中可以访问到响应式的数据，以及所需的API。

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    return {
      count
    }
  }
}

访问组件实例

在Vue3中，如果需要访问组件实例，可以使用getCurrentInstance函数。

import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const instance = getCurrentInstance()

    console.log(instance) // 组件实例
  }
}

需要注意的是，虽然可以访问到组件实例，但在大部分情况下，应优先使用Composition API来编写组件逻辑，而不是直接操作组件实例。

总之，Vue3中不再使用this关键字来访问组件实例，而是通过Composition API来组织代码和访问响应式数据。这种改变使得代码更加清晰、灵活，并提高了组件的可维护性和可读性。

1年前 0条评论