理解vue3组合式API Setup（一）

vue3.0发布也有一段时间了，用了那么久vue，3.0相比较2.0最大的区别就在于引入了-----组合式API。
尝试通过尤大最新发布的前端构建工具Vite(下一代前端编译构建工具)，新建了一个vue3.0的初始项目，很快就发现了与2.0的不同之处如下图：

Setup

可以看到在script标签旁边多了setup，那么具体是做什么作用呢？
首先我们要知道尤大引入组合式api的目的是什么？
目的是为了解决复杂业务下代码逻辑的碎片化，以便于更好的阅读和维护。

我们现将setup理解为一个用来存放你逻辑代码的地方,并且它有2个参数props和context
需要注意的一点是：
setup在执行时，组件实例尚未被创建，setup 选项中是不存在this的

在生命周期钩子中调用

在setup中定义一个方法并将其return，然后就可以在mounted中调用，只有return出的变量或者函数，才可以在setup外部被this调用。

同样我们也可以这么写，将生命周期函数放入setup中调用，前提是必须注册生命周期方法onMounted
选项 API 生命周期选项和组合式 API 之间的映射，详情参加官方api

• beforeCreate -> use setup()

• created -> use setup()

• beforeMount -> onBeforeMount

• mounted -> onMounted

• beforeUpdate -> onBeforeUpdate

• updated -> onUpdated

• beforeUnmount -> onBeforeUnmount

• unmounted -> onUnmounted

• errorCaptured -> onErrorCaptured

• renderTracked -> onRenderTracked

• renderTriggered -> onRenderTriggered

• activated -> onActivated

• deactivated -> onDeactivated

这里要说的一点是setup内，相当于之前的created钩子，也就是说是最先执行的
下面来引入一个新的函数

ref

ref 函数使任何响应式变量在任何地方起作用

watch监听

我们用ref来定义一个计数器变量，在setup中用watch来监听计数变化

computed 计算属性

计算属性twiceTheCounter，需要像ref 一样使用 .value 来获取值