Vue Context 参数 - Composition API

这几天整理的一下过往的文章和笔记，备份到了 Github 上，地址👉 blog。

如果我的内容帮助到了您，欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~ 👆

---

在 Composition API 中，我们没有 this 与 Options API 中相同的引用。

在 Options API 中，我们可以调用 console.log(this) 的任何选项并获得对组件本身的引用，让我们可以访问它的 props、computed、data 等。

Vue3 允许我们使用 Composition API，这些功能都位于 setup 函数内。这意味着 setup 是我们声明响应式数据、方法和计算属性的地方。

import { ref } from 'vue'
export default {
  props: {
    lastName: String
  },
  setup() {
    // 没有 this，我们如何使用 props？
    const createdMethod = () => {
      console.log('created')
    }
    const name = ref('hello')

    createdMethod()

    return {
      createdMethod,
      name
    }
  }
}

setup 在我们的组件实例实际创建之前运行，并且由于我们的 setup 函数是我们实际上为组件定义所有内容的地方，因此不再使用 this。

如何访问组件属性？

Composition API 为我们提供了访问重要组件信息(如 props 和 slot)的替代方法。

setup 函数有参数让我们访问一些组件属性：