下载掌阅APP，畅读海量书库
立即打开
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节中我们将进一步学习它们。