标签：toRefs 函数 title setup Vue3 Api context props Composition

Composition API也叫组合式API，是Vue3.x的新特性。
没有Composition API之前vue相关业务的代码需要配置到option的特定的区域，中小型项目是没有问题的，但是在大型项目中会导致后期的维护性比较复杂，同时代码可复用性不高。Vue3.x中的composition-api就是为了解决这个问题而生的。

compositon-api提供了以下几个函数：

setup
ref
reactive
watchEffect
watch
computed
toRefs
生命周期的hooks

一、setup() 函数

是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。

1、setup()函数执行时机

setup 函数会在 beforeCreate 之后、created 之前执行，即在创建组件之前执行。由于在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

2、setup() 函数中的参数

setup() 函数的第一个参数是 props ，组件接收的 props 数据可以在 setup() 函数内访问到。setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

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

因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 来安全地完成此操作。

import { toRefs } from ‘vue‘

setup(props) {
	const { title } = toRefs(props)

	console.log(title.value)
}

setup() 的第二个参数是context（上下文对象），它是一个上下文对象，可以通过 context 来访问Vue的实例 this 。

setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }

标签：toRefs,函数,title,setup,Vue3,Api,context,props,Composition
来源： https://www.cnblogs.com/qingheshiguang/p/15002322.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。