vue3 setup语法糖学习

在vue3 之前，使用data、methods、mounted等部分进行编码，当规模稍大时，data定义数据，methods定义方法看起来会显得逻辑不清，看了数据再去方法中找函数。 vue3 的组合式API允许将数据和函数放在一起 形成一个逻辑，看起来会更适合思维逻辑。

vue3 还引入了setup语法糖，使得可以更加简洁的使用组合式API。主要时取消了return操作，那么setup中的变量和函数都可以在模板中使用（默认返回对象）。看这个官方提供的例子：

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

可以看到，setup中没有return语句了，如果有大量数据和方法需要暴露给模板的时候，就显得非常省心和简洁。

二、响应式函数

ref 一般只用于简单数据类型比如字符串、数值等，而对于数组等对象类型，一般使用reactive函数实现响应式。reactive函数只对于对象类型有效，对string、number、boolean无效。

ref 在模板中自动解包，所以模板中不需要value，而reactive 作用于对象，没有value这个值，模板中可以直接应用对象。

reactive响应式对象实际上时javascript proxy ，当使用reactive函数作用域一个对象时，返回对象与原始对象已经不同。当reactive 函数作用于一个reactive对象时，则前后两者是相同的（都是reactive 对象或者说proxy对象）

响应式的对象更新后，DOM会自动更新，但更新并不是同步的。VUE会缓存等待下个更新周期一起更新。以确保无论多少次更改，更新只更新一次。