一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第29天，点击查看活动详情。
官宣：Vue 3 将于 2022 年 2 月 7 日成为新的默认版本！
vue3的核心库其实开发出来已经近一年了，但是直到2月7日，vue3文档才正式出现在官网。
这意味着vue3已经可以正式用于商业项目开发了。
vue3最大的语法更新就是组合式api了，都快2022年五一小长假了，作为一个使用vue的web前端，再不会使用vue3的组合式api,你就太过时了。
组合式api需要了解的语法
ref
ref的意思是引用，reference。
将值封装在一个对象中，看似没有必要，但为了保持 JavaScript 中不同数据类型的行为统一，这是必须的。这是因为在 JavaScript 中，
Number或String等基本类型是通过值而非引用传递的
onMounted,watch,computed
在vue2中，我们使用data函数让数据变为响应式的。我们可以直接写类似下面的代码:
data() {
return {
count:0
}
}
vue2特意强调，要使用函数。
vue3组合式api定义响应式，则是使用ref函数。
看起来，都经过了一道中间处理。
笔者还没有认真阅读vue3源码，还不知道ref函数和data函数到底有何不同。
另外，数组不是一个引用类型吗?为何文档说需要使用ref包裹起来。
import {watch, onMounted, computed } from 'vue'
这些vue3新暴露的api都会在特定的时机调用回调函数。
与vue2的mounted,computed是一样的调用时机，可以说，这些api就是为了setup定制的。
组合式api所做的
组合式api所实现就是将业务流程集中化，而不是碎片化，业务流程随着时间滚动。形成一个时间流式的业务流。
使用组合式api封装一个表单控件
<template>
<input v-model:value="value" style="width: 100%" @input="valueChange" :placeholder="placeholder" />
</template>
<script setup>
import { ref, defineProps, watch, defineEmits} from 'vue'
const props = defineProps({
placeholder: {
type: Object,
default: {}
}
})
const emit = defineEmits([
'update:modelValue'
])
const value = ref(undefined)
const valueChange =(e) => {
emit('update:modelValue', e.target.value)
}
</script>
