vue3可以选择使用vue2中使用的optons配置API，也可以选择使用新的Composition API,下面写一个简单的demo体验一下组合api的使用，
setup
setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。setup中的this指向和vue2中的this指向不同，不要在setup函数中使用this
reactive
reactive函数接受一个普通对象，返回一个响应式数据对象
ref
ref函数接收一个基本类型数据，返回一个响应式数据，在setup函数中使用ref函数创建的数据的值需要用 xxxx.value,但是在setup函数外部使用是直接用xxx即可
生命周期
beforeCreate-> 使用 setup()created-> 使用 setup()- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
watch
监听数据变化，可以手动结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue3 Composition API</title>
</head>
<body>
<div id="app">
{
{count}}
<p>姓名：{
{content.name}}</p>
<p>年龄：{
{content.age}}</p>
<input type="text" v-model="content.name">
<button @click="change">修改</button>
</div>
<!-- <script src="lib/vue3.js"></script> -->
<script src="https://unpkg.com/vue@next"></script>
<script>
const {
reactive,ref,createApp,onMounted,watch} = Vue;
createApp({
// 第一个参数props,第二个参数提供了一个上下文对象，从原来 2.x 中 this 选择性地暴露了一些 property。
setup(props,context ){
// reactive函数接受一个普通对象，返回一个响应式数据对象
const content = reactive({
name:'张三'
})
// ref函数接收一个基本类型数据，返回一个响应式数据
let count = ref(0)
const stop = watch(()=>content.name,(val)=>{
console.log('监听content.name的变化',val)
})
setTimeout(()=>{
stop()
},2000)
// setup 也可以返回一个函数，函数中也能使用当前 setup 函数作用域中的响应式数据：
function change(){
content.name = '李四'
content.age = content.age?content.age+1:1
}
onMounted(()=>{
console.log('onMounted',count.value)
})
return{
content,
count,
change
}
}
}).mount('#app')
</script>
</body>
</html>