vue3中的hook简单封装
更新时间：2022年04月18日 09:41:54 作者：养只猫
这篇文章主要介绍了vue3中的hook简单封装，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3的hook封装
vue3最新鲜的就是组合式API了，通过组合式API我们可以把一些复杂的逻辑或一些常用的逻辑封装成一个个hook来进行调用，这样的方式也更易于维护。
使用
import useTest from "../../hooks/useTest";
export default defineComponent({
name: "vue3Test",
setup: () => {
let refTest = ref(111); // 单个值用ref
const { testHook } = useTest({ value: refTest });
return { refTest, testHook };
}
});useTest
import { Ref, ref, reactive, watch } from "vue";
export default function ({ value }: { value: Ref<number> }) {
let testHook = ref(1000);
let testReactiveHook = reactive({
name: "234567i",
});
watch(value, () => {
testHook.value = testHook.value + value.value;
testReactiveHook.name = "343453453453434";
});
return {
testHook,
testReactiveHook,
};
}简单的封装了一个hook进行学习，vue3的hook和react的hook差别并不大因此对比react上手vue3还是比较快的
vue3的hooks总结
vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中。这样其实和我们在vue2中学的mixin比较像。
下面总结一下如何去书写hooks
首先应该先建立一个hooks文件夹：其目的是为了存放hook文件。
建立相关的hook文件：一般使用use开头。
计数器的hook
useTitle的hooks
useScrollPostion用来监测浏览器页面的滚动情况
useMousemove监听鼠标位置的hook
useLocalStorage可以本地存储
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Vue引入并使用Element组件库的两种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
在 Vue 3 中,动态组件是一种允许在运行时动态切换组件的机制,本文主要为大家详细介绍了动态组件在Vue3中的具体使用,感兴趣的小伙伴可以了解下2024-01-01
这篇文章主要介绍了vue项目中实现的微信分享功能,结合实例形式分析了基于vue.js实现的微信分享功能具体定义与使用方法,需要的朋友可以参考下2019-01-01
本文主要介绍了VUE中Non-Props属性的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了React和Vue中监听变量变化的方法,本文通过一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state，具体内容详情大家跟随小编一起通过本文学习吧2018-11-11
这篇文章主要介绍了vue自定义移动端touch事件之点击、滑动、长按事件的实例代码,需要的朋友可以参考下2018-07-07
vue3组合API中setup、 ref、reactive的使用大全
本文给大家介绍vue3组合API中setup、 ref、reactive的用法，初步了解reactive的使用及具体用法，通过示例代码给大家介绍的非常详细，需要的朋友参考下吧2021-06-06
Vue项目引入translate.js国际化自动翻译组件的方法
这篇文章主要给大家介绍了关于Vue项目引入translate.js国际化自动翻译组件的相关资料,除了基本的文本翻译功能之外,jstranslate还提供了一些高级功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
在 Vue3.x 中,组件间的参数传递是构建复杂应用时不可或缺的一部分,无论是父子组件还是兄弟组件之间,合理的数据流动都是保持应用状态一致性和可维护性的关键,本文将通过示例代码,详细介绍 Vue3.x 中组件间如何传递参数,需要的朋友可以参考下2024-03-03
今天小编就为大家分享一篇基于Vue中使用节流Lodash throttle详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最新评论