组合式API

组合式API
个人觉得vue3.0最大亮点就是setup，写起来和vue2.0感觉完全不同，现在来看看吧：

1.setup ，创建组件实例，然后初始化props，紧接着就调用setup函数。 从生命周期的角度来看，它会在beforeCreate之前执行。也就是创建组件先执行setup、beforeCreate、create，由于不能在setup函数中使用data、methods，为了避免使用Vue出错，所以把setup函数中this修改为了undefined，其中包含props与context，props: 用来接收 props 数据，context 用来定义上下文, 上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到, 在 setup() 函数中无法访问到 this，是个 undefined，setup中还需要返回值return。
2.Reactive，该方法接收一个参数{}创建一个响应式对象。跟Vue2.x的Vue.observable一样。如果该参数不是对象的话，也可以渲染到模板上，但不是响应式的数据。
3.toRefs,toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据。
4.Ref，该方法接收一个参数，可以是单个值，也可以是一个对象，并且都是响应式的数据。当传入一个对象时{}，内部将调用reactive方法进行转换为响应式数据。返回值里面带有.value属性取值，当使用模板渲染的时候可省去.value。
5.isRef，isRef() 用来判断某个值是否为 ref() 创建出来的对象；
6.Computed，该方法可以传入一个函数，默认该函数就是getter，不管getter返回值为一个ref响应式数据还是一个普通变量，数据都是只读不能改变;

7.Readonly，该方法接收传入一个对象，默认是只读功能，是深层对象只读，不管嵌套多少层的属性都是只读状态。
8.WatchEffect，该方法接收一个函数并且立即执行，并当该函数里的变量变更时，重新执行该函数。该方法无法获取到原值，只能是改变之后的值，如果需要取消监听则要执行watchEffect的返回值;

9.Watch，watch等同于Vue2.x中的this.$watch，watch需要监听特定数据，默认情况是懒执行，也就是只有当数据发生变化时才执行第二个参数函数，对比WatchEffect，watch为懒执行函；更明确哪些状态改变触发监听器；可以监听获取到变化前后的值。