组合式API- 1－Setup

最新推荐文章于 2025-01-09 20:28:06 发布

原创最新推荐文章于 2025-01-09 20:28:06 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨 Vue3 中的 `setup` 函数，解析其接受的 `props` 和 `context` 参数。讲解了如何在 `setup` 中处理响应式 `props`，避免使用 ES6 解构导致的响应性丢失，并介绍了 `toRefs` 的作用。同时，解释了 `context` 对象中的 `attrs`, `slots` 和 `emit` 属性。还讨论了在 `setup` 中无法访问组件实例的 `data`、`computed` 和 `methods`。最后，展示了如何在模板中使用 `ref` 和 `reactive` 创建响应式数据。

#参数

使用 setup 函数时，它将接受两个参数：

props

context

#第一个参数-Props

setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

// MyBook.vue

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

WARNING

但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

使用 setup 函数中的 toRefs 来安全地完成此操作
const { title } = toRefs(props)

vue3中ref、toRef、toRefs的区别

toRefs——>可以看作toRef的语法糖,toRefs会遍历传入对象的属性。

ref——>原有数据的复制，修改数据不会影响原数据但UI界面会更新。

toRef——>原有数据的引用，修改数据影响原数据但UI界面不更新

第二个参数是 `context`

context 是一个普通的 JavaScript 对象，它暴露三个组件的 property：

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。

// MyBook.vue
export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

访问组件的 property

因为组件实例尚未被创建

不可访问	可访问
`data` `computed` `methods`	`props` `attrs` `slots` `emit`

结合模板使用

<template>
  <div>{{ readersNumber }} {{ book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>

	ref	reactive
不同点	用于基本数据类型	用于复杂数据类型，比如对象和数组
相同点	将数据变成响应式数据，当数据发生变化时UI也会自动更新

使用 `this`

在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。