vue3的hooks有什么具体应用场景

Question

如果遇到多个hooks公用一个状态，怎么处理

Answer 1

其实Vue3中的hooks和Vue2中的mixin类似，是一个函数的写法，把文件中的一些单独功能js抽离出来，然后放到新的单独的js文件中。首先在项目主目录下创建一个hooks文件夹，用来存放hook文件，创建的hook文件一般用use开头命名，比如标题相关的hook，就命名为useTitle.js，具体实现的写法如下所示：

import { ref, watch} from "vue";
export default function( title = "themeTitle") {
const titleRef = ref(title)
watch(titleRef, (newValue) => {
document.title = newValue
}, {immediate: true})
return titleRef
}

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

多个hooks公用一个状态的话，不需要用户自己去操作，vue底层会进行依赖分析的

hooks更有利于函数复用，就是把一些功能提取出来，但是比vue2的mixins要好得多，vue2的mixins容易造成组件方法混乱

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。