介绍vue3的setup用法

Vue 3引入了Composition API，它允许你在组件中使用setup方法。setup方法是一个新的、更灵活的组件组成选项，使你能够在组件外部更容易地重用和组织代码。

以下是关于setup的一些基本概念和用法。

基本结构

setup方法在组件实例被创建和初始化props之后调用，但在任何生命周期钩子被调用之前。这使得它成为声明reactive属性和computed属性的理想位置。

import { ref } from 'vue'

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

    function increment() {
      count.value++
    }

    return {
      count,
      increment,
    }
  },
}

Props 和 Context

setup方法可以接受两个参数：props和context。

• props：包含组件的props。它是响应式的，所以你可以使用Vue的toRefs或reactive将其转换为本地响应式引用。

• context：是一个普通的JavaScript对象，具有以下属性：

  • attrs: 包含未在props中声明的属性绑定的对象。
  • slots: 包含组件的slots的对象。
  • emit: 用于触发事件的方法。

示例：

export default {
  props: {
    message: String,
  },
  setup(props, { emit }) {
    // 使用props和emit

    return {
      // ...
    }
  },
}

Reactive 和 Ref

在setup方法中，你可以使用ref和reactive来创建响应式引用和对象。

• 使用ref创建一个响应式引用：

  const count = ref(0)
  

• 使用reactive创建一个响应式对象：

  const state = reactive({
    count: 0,
    text: 'hello',
  })
  

生命周期钩子

在setup中，你可以使用特殊的生命周期钩子导入，例如onMounted，onUnmounted等。

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!')
    })

    // ...
  },
}

返回值

setup方法的返回值将被暴露给组件的模板。你可以返回一个对象，其中包含模板所需的所有方法和数据。

总结

setup方法提供了一种新的、更灵活的方式来组织Vue组件。通过使用Composition API，你可以更容易地在组件之间共享和重用代码，并能更好地控制组件的逻辑。

props和context是什么

在Vue的组件系统中，props和context是两个重要的概念，特别是在Vue 3的setup函数中，它们都是非常关键的。

props

props（属性）是父组件与子组件之间进行通信的一种方式。父组件可以通过props向子组件传递数据。子组件接收这些属性，并可以在其模板和逻辑中使用它们。

props在子组件中被声明，并定义了它们的类型、默认值等。

例如，父组件传递一个message属性：

<ChildComponent :message="parentMessage" />

子组件接收并使用该属性：

export default {
  props: {
    message: String,
  },
  setup(props) {
    // 使用props.message
  },
}

context

context是在Vue 3的setup函数中引入的一个特殊参数，它包括了在之前版本中需要this来访问的三个属性：attrs、slots、和emit。

• attrs：包括了没有在组件中定义的所有属性绑定。
• slots：包括了父组件传递给组件的所有插槽。
• emit：用于触发组件上的自定义事件，从而允许子组件与父组件进行通信。

以下是如何在setup函数中使用context的示例：

export default {
  setup(props, context) {
    // 访问未在props中定义的属性
    const otherAttrs = context.attrs

    // 访问slots
    const slots = context.slots

    // 触发一个自定义事件
    context.emit('custom-event', 'payload')
  },
}

总的来说，props和context在Vue 3的组件通信和组织方面起着关键作用。props使得父子组件间的数据流动变得明确和可追踪，而context则提供了一种访问组件外部属性、插槽和触发事件的方便方式。

ref和reactive有什么区别

ref 和 reactive 是 Vue Composition API 的两个核心反应性函数。尽管它们都用于创建响应式数据，但它们在使用和行为上有一些关键区别。

ref

• ref 用于包装一个单个值，使其成为响应式引用。
• 当你访问 .value 属性时，可以获取和设置其值。
• 在模板中使用时，不需要使用 .value 来访问它的值。

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++ // 增加值

reactive

• reactive 用于创建一个响应式对象。
• 它不需要额外的 .value 属性来访问或修改值。
• 你可以直接像普通对象一样访问和修改其属性。

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  text: 'hello',
})
console.log(state.count) // 0

state.count++ // 增加值

主要区别

1. 用途：ref 用于单个值，reactive 用于对象。
2. 访问：对于 ref，你需要使用 .value 来访问和修改值，而 reactive 则不需要。
3. 解构：当你解构一个通过 reactive 创建的响应式对象时，它仍然保持响应性。但是，如果你解构一个由 ref 创建的对象，响应性将丢失。解决这个问题的一种方法是使用 toRefs 辅助函数，它将 reactive 对象的每个属性转换为单独的 ref。

总结

选择 ref 或 reactive 取决于你的具体需求。对于单个值，使用 ref。如果你想要一个响应式对象，可以直接与其属性交互，那么 reactive 是更好的选择。