vue3中的hook

阅读数:84 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

vue3中的hook就是函数的一种写法，就是文件的一些重复功能的js代码进行抽离，放到单独的js文件中，它的vue2中的mixin有点类似。

执行顺序： 先执行hook的生命周期方法，再执行组件的生命周期方法。

二、使用示例

1、src/hooks/useMousePosition.js

import { ref, onMounted, onUnmounted } from "vue";
export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);
  function update(e) {
    x.value = e.pageX;
    y.value = e.pageY;
  }
  onMounted(() => {
    window.addEventListener("mousemove", update);
  });
  onUnmounted(() => {
    window.removeEventListener("mousemove", update);
  });
  return { x, y };
}

2、在组件中使用

import { useMousePosition } from "./mouse";
export default {
  setup() {
    const { x, y } = useMousePosition();
    // other logic...
    return { x, y };
  },
};

3、重名的解决方法

可以使用解析的重命名方法：

const { x:x1, y:y1 } = useMousePosition();
相关推荐
vue2与vue3对比
一、生命周期 1、vue2生命周期 beforeCreate #实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用 created #实例创建完成后被立即同步调用 beforeMount #
vue.mixin
一、问题场景 在日常开发中，你是否会遇到类似的情况：有两个或者以上的相似的组件，他们有相同的功能函数 ，也有不同的功能函数，这种情况需要怎么操作呢？ 有人会想写在一个组件内，通过不同的属性来区分不同的
vite+vue3+pinia+pnpm+element-plus开发记录
一、使用pnpm新建项目 可以使用npm 或yarn或pnpm来初始化Vite项目 pnpm create vite xxx(项目名称) #选择vue #选择js cd xxx (进入项目目录) #安
vue3 setup语法糖
一、概述 <script setup> 是在单文件组件（SFC）中使用组合式API的编译时语法糖，解决Vue3.0中setup需要频繁将声明的变量、函数以及import引入的内容通过return向外
vue3中的ref、computed、reactive、toRef、toRefs
一、概述 在vue2中，data函数里返回的值直接为响应式，但在vue3中我们需要使用一些函数才能达到这个效果。 setup函数中拿不到vue的this。 二、常用函数 <template> <d
vue3使用setup代替created
<script> export default { setup() { const func1= () => { console.log("func1");
vue3中vue router4下使用keep-alive
缓存页面主要Jul为了防止重复渲染dom，减少加载时间及性能消耗，提高用户体验。 一、旧版的语法 <keep-alive> <router-view v-if="$route.meta.kee
vue3中全局挂载和获取的方式
一、在main.js挂载 import { createApp } from 'vue' import App from './App.vue' import router from './route
vue3中使用$refs
一、概述 在vue3中没有$refs这个对象，可以使用如下方法 <template> <div><input type="text" ref="txt1" value="hello" /></div>
vue3中使用element plus 的ElMessage
方式一、全局引入 全局引入element之后事，element已经在app.config.globalProperties添加了全局方法$message，所以可以在组件中直接使用。 方式二、按需引入