-
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。
-
类似于vue2.x中的mixin。
-
自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
创建hook3文件夹
新建usePoint.js文件（文件名以userxxx命名）
app.vue
<template>
<button @click="isShow = !isShow">展示/隐藏</button>
<Demo4 v-if="isShow"></Demo4>
</template>
<script>
import Demo4 from './components/Demo4'
import {ref} from 'vue'
export default {
name: 'App',
components:{
Demo4
},
setup() {
let isShow = ref(true)
return {isShow}
}
}
</script>
<style>
</style>
Deme4.vue
<template>
<h2>当前求和为：{{sum}}</h2>
<button @click="sum++">点我+1</button>
<hr>
<h2>当前点击时鼠标的坐标为：x - {{point.x}}，y - {{point.y}}</h2>
</template>
<script>
import {ref} from 'vue'
import usePoint from '../hooks/usePoint';
export default {
name: 'Demo',
setup() {
let sum = ref(0)
let point = usePoint()
//返回一个对象
return{sum,point}
}
}
</script>
<style>
</style>
标签：vue,函数,自定义,point,hook,import,ref,usePoint From： https://www.cnblogs.com/ixtao/p/17542581.html