一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
Composition API介绍
在Vue2中，我们编写组件的方式是Options API，就是在methods、computed、watch、data中定义属性和方法，共同处理页面逻辑。但是这种代码有一个很大的弊端，当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中，当组件更大功能更复杂时，那么同一个功能的逻辑就会被拆分的很分散，因此这样维护起来就比较吃力。所以，Vue3中便有了这个Composition API解决这个弊端。
setup函数
setup() 是 Vue3 中的新增内容，定义 methods、watch、computed、data数据等都放在了 setup()函数中。setup()主要有两个参数。第一个是 props ，组件接收的 props 数据可以在 setup() 函数内访问到；第二个是context，它是一个上下文对象，里面包含三个属性（attrs：所有的非prop的attribute；slots：父组件传递过来的插槽；emit：当我们组件内部需要发出事件时会用到emit）。setup的返回值可以在模板template中被使用，也就是说setup的返回值替代了data选项。
reactive() 和 ref()
在Vue2中，我们只需要在 data()中定义一个数据就能将它变为响应式数据，但在 Vue3 中，需要用 reactive或者 ref 来创建响应式数据。reactive 函数接收一个普通的对象，返回出一个响应式对象。reactive函数必须传入的是一个对象或者数组类型,如果我们需要传入基本数据类型，那需要使用ref。
readonly()
在我们传递给其他组件数据时，往往希望其他组件使用我们传递的内容，但是不允许它们修改时，这个时候readonly便派上用场。
侦听器
watch与watchEffect的区别：watchEffect会立马执行，不需要传递你要侦听的内容，执行中被读取的响应式数据会被监测，在其变更时重新运行该函数；而watch初次渲染不执行，可以获取数据变化前后的值，且可以侦听多个数据的变化。
未完待续。。。
