CompositionApi,组合式API,相当于react中hooks,函数式。
优势:1,增加了代码的复用性(类似mixin,slot,高阶组件功能)
2,代码可读性更好。可以将处理逻辑和视图层分开,组件只留视图展示的代码。
1、reactive
setup()相当于beforeCreate()和Created()两个生命周期,可以在里面定义属性和方法
2、ref
2-1,获取dom元素
ref获取dom以前的版本写法在vue3使用中,只要不写在hooks中,还是生效的。在hooks中我们应按照如下写法获取dom。注意:ref.value只是获取dom,并不是获取的dom里面的值
2-2,拦截字符串
我们知道reactive方法只能拦截对象,所以我们只能传对象或数组,那么我们要想拦截字符串怎么办,这是就可以使用ref了
原理就是利用ref中的value进行拦截的,所以要更改这个值的话,必须通过value更改,如下:
2-3,toRefs
从上面写法我们可以看出,在使用reactive方法在组件中,要通过对象.属性才能获取值,为了简写,我们可以使用toRefs进行转换,如下
3、props&&emit 父子组件传值
vue2版本父子组件传值方式只要不在hooks中写在vue3仍适用。
3-1、父传子
3-2 子传父
3-3 祖辈传孙辈
祖先组件:
孙子组件
4、生命周期
2套生命周期
第一套
beforeCreate
、created
、beforeMount
、mounted
、beforeUpdate
、updated
、beforeUnmount、unmounted
第二套(hooks)
setup 、onBeforeMount、 onMounted(一般在这周期发送请求)、 onBeforeUpdate、 onUpdated、 onBeforeUnmount、 onUnmounted(都写在setup()里
5、computed计算属性 要return返回值
6、watch 监听
9、自定义hooks
为了让组件代码更加清晰,我们可以将组件中处理逻辑封装成一个函数,只留视图逻辑,然后再将封装的文件引入到该组件。
注意:如果使用hooks后,该组件在hooks中再也没有this概念,如this.$route.push、this.$router.query、this.$store就再也不能用了,针对这官方提供对应的api方法,如图:
以上就是compoistion组合式api(hooks)的用法