Vue3 peut choisir d'utiliser l'API de configuration optons utilisée dans vue2, ou vous pouvez choisir d'utiliser la nouvelle API de composition. Écrivez une démo simple ci-dessous pour découvrir l'utilisation de l'API combinée.
installer
La fonction de configuration est une nouvelle option de composant. En tant que point d'entrée pour l'utilisation de l'API de composition dans le composant. Ce point de la configuration est différent de ce point en vue2, ne l'utilisez pas dans la fonction de configuration
réactif
La fonction réactive accepte un objet ordinaire et renvoie un objet de données réactif
réf
La fonction ref reçoit un type de données de base et renvoie des données de réponse. La valeur des données créées par la fonction ref dans la fonction de configuration doit utiliser xxxx.value, mais elle peut être utilisée directement en dehors de la fonction de configuration.
Cycle de la vie
beforeCreate-> 使用 setup ()créé-> 使用 setup ()- beforeMount -> onBeforeMount
- monté -> surMonté
- beforeUpdate -> onBeforeUpdate
- mis à jour -> onUpdated
- beforeDestroy -> onBeforeUnmount
- détruit -> onUnmounted
- errorCaptured -> onErrorCaptured
regarder
Surveiller les changements de données, vous pouvez terminer manuellement
<!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>