网站搭建十大品牌公司,ae免费模板下载网站,php简易企业网站源码,上海今天最新新闻10条CompositionApi#xff0c;组合式API#xff0c;相当于react中hooks#xff0c;函数式。
优势#xff1a;1#xff0c;增加了代码的复用性#xff08;类似mixin#xff0c;slot#xff0c;高阶组件功能#xff09; 2#xff0c;代码可读性更好。可以将处理逻辑和视图…CompositionApi组合式API相当于react中hooks函数式。
优势1增加了代码的复用性类似mixinslot高阶组件功能 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-3toRefs
从上面写法我们可以看出在使用reactive方法在组件中要通过对象.属性才能获取值为了简写我们可以使用toRefs进行转换如下 3、propsemit 父子组件传值
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)的用法
