vue3的hooks使用

vue3的hooks

• 属于封装,模块化开发,类似于vue2的mixin,就是一个js或ts文件,本质是一个可以调用的函数
• 文件命名规范use开头
• 实际就是把同一个功能的代码(数据,方法)写到一块
• hooks里面可以正常使用vue生命周期钩子和api

hooks写法:

• src下新建hooks文件夹

import { ref,onMounted } from 'vue'

// 累加的功能
export default function () {
  let sum = ref(0)

  function add() {
    sum.value++
  }

  onMounted(() => {
    sum.value += 100
  })

  return { sum, add }
}

hooks使用

<h1>{{ sum }}</h1>
<button @click="add">sum+1</button>

import useSum from '../../hooks/useSum'
const { sum, add } = useSum()