建网站解决方案_设计网站猪八戒_竞价软件哪个好_程序员培训班要多少钱

mixins缺陷

mixins在使用中存在以下致命缺陷：

1. 由于mixins混入的特性，其中定义的变量相当于隐式引入了父组件，从而导致变量难以定位到其定义的具体位置
2. 若父组件仅需要mixins中某一小段逻辑，通过mixins的方式还是只能将整个mixins文件引入后进行使用，无形中增加了无效代码的引用
3. 最致命的便是多mixins引入重名的情况
   例如：当前页面引入了多个mixins，每个mixins内均定义了一个变量名为list,我既想使用mixinsA中的list又想使用mixinsB中的list就成为了一个令人头疼的问题。

Hooks

很显然，越来越多的框架开发者们也注意到了mixins的上述缺陷，因此急需一种新的代码复用逻辑的优化方案，由此基于hooks实现代码复用的方式横空出世。
所谓hooks直译过来便是钩子函数。我们可以将mixins理解为一个将<script></script>标签部分的js逻辑代码片段文件，而hooks正如其中文译名，不同于mixins其本质上是一个可以复用的函数，其在vue3的setup()中调用。

hooks 使用

在项目路径下新建一个名为hooks的文件夹，在里面新建名为 xxx.js的一个hooks文件, 注意hooks组件的命名规范为，use+hooks功能名的大驼峰命名方式，例如：需要封装一个table复用的hooks,则命名为useTable.js

//useTest.js
import { ref } from "vue";export default function useTest() {//定义变量const list = ref([1, 2, 3, 4, 5]);const msg = ref("我是hooks中的数据");//使用生命周期函数onMounted(() => {console.log("我是hooks中定义的onMounted()");});//定义方法const total = () => {let sum = list.reduce((pre, cur) => {return pre + cur;}, 0);return sum;};const getList = () => {return list.value};//将需要使用的数据和函数暴露出去return {list,msg,total,getList};
}

在父组件中引入hooks

<!--父组件中引入hooks -->
<template><div><div>我是父组件的数据</div><!-- 使用hooks中的变量 --><div>{{msg}}</div><!-- 使用hooks中的方法进行求值 --><div>{{count}}</div></div>
</template><script lang="ts" setup>
import useTest from './hooks/useTest.js'//需按需求自由hooks中的变量和方法
const {msg,total,list} = useTest()const count = ref(total)
</script><style lang="scss" scoped></style>

hooks的优势和不足：

优势:

• hooks让开发者可以根据当前页面的需求，选择性的引入hooks中的变量和方法，减小无效代码的复用
• 不同于mixins，hooks中引入的变量通过hooks名.变量名的方式进行使用，从而避免了变量重名的问题，即使变量重名，只要对应的hooks组件不重名，就可以通过hooks名.变量名的方式进区分。

不足:

• 由于hooks本身是一个函数，因此调用hooks中定义的方法会产生闭包，大量滥用hooks，不可避免的存在一定的内存泄露问题，不过大部分情况下hook的表现还是非常优秀的。

点赞 -收藏 -关注 有问题在评论区或者私信我-收到会在第一时间回复