vue3之hook

介绍：通过组合式API可以把复杂或常用的逻辑封装成一个个hook来进行调用，简介优雅，方便维护。

hooks 本质是一个函数，是对 setup 中使用的 composition API的封装，通俗来讲：抽出一部分代码单独放一个js里，在setup里就可直接用hook中的函数，不是父子组件的关系。

hooks 复用率高，使setup中逻辑更清晰

 

1.在要编写的view文件夹中新增对应的hook文件夹，例：/hook/useTitle.js

一个改变浏览器页签title的小需求：

import {
  ref,
  watch
} from 'vue'
export default function(title = '默认值') {
  const titleRef = ref(title);
　const words = ref('奖项');
  watch(titleRef, (newVal) => {
    document.title = newVal
  }, {
    immediate: true
  })
  return {
    titleRef,
    words
  }
}

2.在要编写的文件中引用并直接使用：

import useTitle from "./hook/useTitle";
export default {
  setup(props, { emit }) {
    const {titleRef,words} = useTitle("金鸡奖");
    console.log(words.value)
    setTimeout(() => {
      titleRef.value = "百花奖";
    }, 3000);

   return {
      titleRef,
      words,
    };
  },
}