购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.2 setup组合式API入口函数

Vue3既能使用选项式API又能使用组合式API,那么应该如何区分代码方式呢?其实很好区分,Vue3为组合式API提供了一个setup函数,所有组合式API函数都是在此函数中调用的,它是组合式API的使用入口。setup函数接收两个参数:第1个参数是props对象,包含传入组件的属性;第2个参数是context上下文对象,包含attrs、emit、slot等对象属性。这两个参数在本节暂时不做深入讲解,在第4章中开始对它们进行学习。在使用组合式API定义响应式数据之前,有两个点需要我们重点关注:一个是setup函数必须返回一个对象,在模板中可以直接读取对象中的属性,以及调用对象中的函数;另一个是setup函数中的this在严格模式下是undefined,不能像选项式API那样通过this来进行响应式数据的相关操作,至于如何进行操作,后面的章节会详细讲解。

请思考下面代码的运行效果。

输出的this是undefined,对象中的msg属性值在模板中直接显示在页面上,如图3-1所示。点击“测试”按钮后,handleClick函数就会自动调用,从而显示警告提示,如图3-2所示。

图3-1 msg属性值显示在页面上

图3-2 显示警告提示

但是这里要注意,我们在按钮的点击回调函数handleClick中更新了msg,而页面并不会自动更新。这是因为msg只是一个普通的字符串,并不是一个响应式数据。如何定义响应式数据呢?Vue3为开发者提供了ref和reactive等函数,在3.3节和3.4节中我们将进一步学习它们。 z9yG3POOac410aCbYZtHgXO9zLikVMmudfc7mJkDJYHdyykmMe04vHdtWajuFE/w

点击中间区域
呼出菜单
上一章
目录
下一章
×