conpositionApi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>compositionAPI</title>
<script src="./vue3.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<br>
---------
<br>
<child></child>
</div>
<template id="temp">
reactive包装的响应式数据state: {{state.count}} -- {{state.double}}
<button @click="add">add-state</button>
</template>
<script>
const {
createApp,
reactive, // 包装响应式数据
computed,
watch,
} = Vue
const options = {
data: () => ({
msg: 'vue3 compositionAPI 组合API'
})
}
const app = createApp(options)
// 全局组件
app.component('child', {
// CompositionApi 入口是Setup函数
// 主要是给组件使用
setup() {
// 业务1 代码可以抽离
const state = reactive({
count: 0,
double: computed(()=> state.count *10)
})
function add(){
state.count++
}
watch(()=>{
console.log(state.double)
})
// 业务2
// ....
return {
add,
state
}
},
template:`#temp`
})
app.mount('#app')
</script>
</body>
</html>