Vue3 puede optar por usar la API de configuración de opciones que se usa en vue2, o puede optar por usar la nueva API de composición. Escriba una demostración simple a continuación para experimentar el uso de la API combinada.
preparar
La función de configuración es una nueva opción de componente. Como punto de entrada para usar Composition API dentro del componente. Este punto en la configuración es diferente de este punto en vue2, no lo use en la función de configuración
reactivo
La función reactiva acepta un objeto ordinario y devuelve un objeto de datos reactivo
árbitro
La función de referencia recibe un tipo básico de datos y devuelve datos de respuesta. El valor de los datos creados por la función de referencia en la función de configuración necesita usar xxxx.value, pero se puede usar directamente fuera de la función de configuración.
Ciclo vital
beforeCreate-> 使用 configuración ()creado-> 使用 setup ()- beforeMount -> onBeforeMount
- montado -> montado
- beforeUpdate -> onBeforeUpdate
- actualizado -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destruido -> onUnmounted
- errorCaptured -> onErrorCaptured
reloj
Supervise los cambios de datos, puede finalizar manualmente
<!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>