setup:组合api的入口函数 所有的组合api都学在setup中使用,它运行在beforeCreate之前
例:<script setup>
setup方法使用在script标签内 就不需要return数据以及方法了(这种方法一旦使用就不再有选项式api了)
const a = 1(这样声明的数据没有响应式,就是不能和页面双向绑定)
const num = ref(0)(ref是一个声明响应式数据及方法,它是由reactive封装过来的,他的值其实在value中,所以我们使用及赋值时都要使用value属性,ref当前版本下可以声明所有的数据,包括基本数据类型,以及引用数据类型(复杂数据类型))
错误写法:components :{},beforeCreate(){} (这种用法下 导入的组件会自动注册无需手动注册)
</script>
第二种方法,例:<script>
import {reactive,toRefs} from 'vue' (用到啥引入啥)
setup(){
const state= reactive({name: ‘张三’,age:14,id:1314})(reactive我们用来声明一个包含复杂结构的对象数据)
return {...toRefs(state)}(用到的方法及数据等等需要return出来)
}
</script>
额外知识点:
1.基本数据类型和引用数据类型的区别是:基本数据类型的值存在栈中,引用数据类型的值存在堆中,但是引用数据类型的指针存在栈中
2.组合式api的生命周期:
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured