目录自定义hooks/可组合函数1.mixins方式的痛点2.传统mixins方式示例3.自定义hooks方式示例vue3(hooks)自定义hooks/可组合函数 Vue3 com
Vue3 composition api下mixins的替代方式(自定义hooks / 可组合函数)
传统方式下封装的mixins在引入文件里都是通过this来调用属性或方法,
而在vue3的composition API下this是undefined,实际上这两者就是冲突的,
只能封装一套全新的方式来使用类似mixins的功能。
我们称这种全新的方式为自定义hooks(注:写这篇文章时vue官方还没有这个概念,基本靠自己摸索,参照React的习惯而称之为自定义hooks,现在已经有了官方定义:可组合函数)。
传统的mixins有很多让人诟病的地方,mixins 的深度合并非常隐式,这让代码逻辑更难理解和调试,具体表现为如下几点:
myMixins.ts:
export default {
data () {
return {
aa: 1
}
},
mounted () {
this.testFn()
},
methods: {
testFn () {
console.log('testFn')
}
}
}
index.vue:
<template>
<div>{{ aa }}</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import myMixins from './myMixins'
export default defineComponent({
mixins: [myMixins],
mounted () {
console.log('index mounted')
}
})
</script>
如上所示,封装的myMixins实际上只做了两件事,一是在mounted钩子函数里执行testFn方法,二是暴露一个aa的变量给外部使用;index.vue里引入后在dom里使用了aa。
这算是mixins最典型的两个用途,一是自己执行一些公共逻辑,外部引入时不用管,二是定义一些data变量给外部引入后使用。
1、代码封装
先上代码,myHooks.ts:
import { ref, onMounted } from 'vue'
export default function () {
const aa = ref(1)
function testFn () {
console.log('testFn')
}
onMounted(() => {
testFn()
})
return {
aa
}
}
index.vue:
<template>
<div>{{ aa }}</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import myHooks from './myHooks'
export default defineComponent({
setup () {
const { aa } = myHooks()
onMounted(() => {
console.log('index mounted')
})
return {
aa
}
}
})
</script>
可以看到,这里没有再使用mixins属性来引入逻辑代码,本质上只是封装了一个ts文件引入使用而已,这样使用后,数据来源清晰可见,代码引用有依有据。
2、为什么导出的是function
因为导出为对象的话就意味着在import导入时就执行了封装的逻辑,而我们封装的逻辑是用composition api包装了的的特殊代码,这些代码只能在setup里才能正常使用,所以需要导出一个函数,这样就可以在组件
setup里调用该函数来指定执行时机。
导出为function还有一个用途是方便传参,这样可以在不同的组件引用时做一些差异化逻辑处理。
3、封装建议
导出的function只需要return组件里要引用的数据;对于组件里不需要引用的就不需要return,组件里只调用导入的函数即可。
组件里的自定义hooks调用代码最好放在setup里第一行位置,这样比较明确,不容易被遗漏。
响应式api的使用风格保持统一,其实这也是整个项目风格统一的问题,对于setup里定义的数据做响应式处理,要么都用ref,要么都用reative,保持统一,这样在使用时不至于有的带.value有的不带。
vue3的hooks相当于是封装公共方法的js文件
import { ref } from 'vue'
export default function() {
const counter = ref(0)
const increment = () => {
counter.value++
}
const devrement = () => {
counter.value--
}
return {
counter,
increment,
devrement
}
}
引入以及使用方法如下
<template>
<div>
<h1>我的名字是:{{info.name}}</h1>
<h1>我的年龄是:{{info.age}}</h1>
<h1>当前计数为:{{counter}}</h1>
<button @click="increment">点击加一</button>
<button @click="devrement">点击减一</button>
</div>
</template>
<script> //这里也可以使用setup语法糖写法
import { reactive } from 'vue';
//引入hooks文件 文件名当作变量名
import useCounter from '../hooks/useCounter.js';
export default {
setup(){
const info = reactive({name:'dxx',age:18})
//将hooks文件里的方法和变量全部解构出来使用
const { counter, increment, devrement } = useCounter()
//最后将方法和变量导出
return {
info,
counter,
increment,
devrement
}
}
}
</script>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue3自定义hooks/可组合函数方式
本文链接: https://www.lsjlt.com/news/150186.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0