vue3自定义Hooks
比较简单的小demo,直接上代码吧
ts使用defineComponent,setup()里面使用 Composition API 写法,逻辑块清晰,不用前后文查找,拒绝 spaghetti code
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import { CountRange, useCount } from '@/composition/use-count'; export default defineComponent({
name: 'Home',
// components: {
// HelloWorld,
// },
props: {
title2: String
},
data() {
return {
title1: 'this is title1'
};
},
setup() {
const title2 = ref('this is title2'); const range: CountRange = reactive({
min: 5,
max: 50
}); const { current, minus, plus, set, reset } = useCount(10, range); return {
title2,
range,
current,
minus,
plus,
set,
reset,
};
}
});
</script>
useCount
import { ref, Ref, watch } from "vue"; export interface CountRange {
min: number;
max: number;
} interface Result {
current: Ref<number>;
minus: (num: number) => void;
plus: (num: number) => void;
set: (num: number) => void;
reset: () => void;
} export function useCount(init: number, range: CountRange): Result {
const current = ref(init); const minus = (num: number) => {
current.value -= num;
};
const plus = (num: number) => {
current.value += num;
};
const set = (num: number) => {
current.value = num;
};
const reset = () => {
current.value = init;
}; watch(current, (newVal: number, oldVal: number) => {
if (newVal === oldVal) { return; }
if (newVal < +range.min) {
current.value = +range.min;
} else if (newVal > +range.max) {
current.value = +range.max;
}
}); return { current, minus, plus, set, reset };
}
比较简单,ref传单一变量,reactive传复杂变量(对象),效果就是这样
再贴一下模板代码吧
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
<h1>{{ title1 }}</h1>
<h1>{{ title2 }}</h1>
<p>current count: {{ current }}</p>
<div>
<label>MIN COUNT: </label>
<input type="number" v-model="range.min" />
</div>
<br />
<div>
<label>MAX COUNT: </label>
<input type="number" v-model="range.max" />
</div>
<br />
<button @click="plus(5)">+5</button>
<button @click="minus(3)">-3</button>
<button @click="set(233)">set 233</button>
<button @click="reset()">reset</button>
</div>
</template>
使用vue和react的hooks之后,明显感觉vue的要简单明了很多,也不会有很多闭包问题、多次调用等,没有太多的限制,很容易上手。这一点做得比react好很多。
vue3自定义Hooks的更多相关文章
- 自定义Hooks函数获取窗口大小(十一)
其实自定义Hooks函数和用Hooks创建组件很相似,跟我们平时用JavaScript写函数几乎一模一样,可能就是多了些React Hooks的特性,自定义Hooks函数偏向于功能,而组件偏向于界面和 ...
- 我居然不知道Vue3可以使用hooks函数实现代码复用?
每天都要开心(▽)哇: 项目开发过程中,我们会遇到一些情况,就是多个组件都可以重复使用的一部分代码逻辑,功能函数,我们想要复用,这可怎么办呢? VUE2我们是怎么做的呢? 在vue2 中有一个东西:M ...
- vue3 自定义指令控制按钮权限
经过1个周的摸索和查阅资料,终于搞定VUE3中自定义指令,实现按钮级别的权限控制.当然,只是简单的对按钮进行隐藏和删除的dom操作比较容易,一直纠结的是当按钮无权限时,不是直接删除当前dom元素(bu ...
- Vue3 自定义指令执行了两次的问题
下面是我注册全局指令的代码,这是我注册的一个通过 hljs 解析 html -> pre code 的指令,数据是异步获取的: app.directive("parse-code&qu ...
- vue3 自定义组件中使用 v-model
1.直接绑定 v-model,但是 Props 要固定为 modelValue 组件D: 注意这里的 Props 和 Emits,必须使用 Vue 提供的 defineProps() 和 define ...
- 简单对比vue2.x与vue3.x响应式及新功能
简单对比vue2.x与vue3.x响应式 对响应方式来讲:Vue3.x 将使用Proxy ,取代Vue2.x 版本的 Object.defineProperty. 为何要将Object.defineP ...
- 初探React Hooks & SSR改造
Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...
- 从Mixin到hooks,谈谈对React16.7.0-alpha中即将引入的hooks的理解
为了实现分离业务逻辑代码,实现组件内部相关业务逻辑的复用,在React的迭代中针对类组件中的代码复用依次发布了Mixin.HOC.Render props等几个方案.此外,针对函数组件,在Reac ...
- React劲爆新特性Hooks 重构去哪儿网火车票PWA
React劲爆新特性Hooks 重构去哪儿网火车票PWA 获取课程资料链接:点击这里获取 本课程先带你细数最近一年来React的新特性,如Hooks.Redux API,让你从头理解Hooks对传统R ...
- React Hooks究竟是什么呢?
摘要: React Hooks原理解析. 原文:快速了解 React Hooks 原理 译者:前端小智 我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件 ...
随机推荐
- ABP无法使用异步操作,但要调用异步方法
使用 AsyncHelper.RunSync(() => _studentRepository.FirstOrDefaultAsync(x => x.Code == studentCode ...
- 7.0 Python 面向对象编程
python是一种面向对象的编程语言,面向对象编程(Object-Oriented Programming,OOP)是一种编程思想,其核心概念是"对象".对象是指一个具有特定属性和 ...
- 由刷题学习 heapq
今日一题是 面试题 17.14. 最小K个数 https://leetcode-cn.com/problems/smallest-k-lcci/ 还好 提示 0 <= len(arr) < ...
- Mac 下安装 mysqlclient
brew install mysql export LDFLAGS="-L/usr/local/opt/openssl/lib" export CPPFLAGS="-I/ ...
- 深入操作系统内核!细致剖析 MIT 6.S081 课程 Lab 2 : system calls - 1
本文细致的剖析了2021 FALL MIT 6.S081 课程的一项实验, Lab 链接 Lab: System calls (mit.edu) . 大家的点赞将会是我继续更新的巨大动力,对文中内容或 ...
- (python)学习ing||类学习,@property装饰器
class pers(): def __init__(self,hp): self._hp=hp @property def hp(self): return self._hp @hp.setter ...
- Web-background information
Client and Server A connection on the Internet takes place between 2 computers only: one that has th ...
- XD刷机报错bad CRC
测试需要,给一台1/4 rack的X8M HC刷机,使用oeda配置好的xml文件,执行命令列出本次刷机的所有步骤: [root@dbm11dbadm01 linux-x64]# ./install. ...
- delphi调试 字符串 栈的地址,和栈中存的值
- ASP.NET Core分布式项目实战(oauth2 + oidc 实现 client部分)--学习笔记
任务16:oauth2 + oidc 实现 client部分 实现 client 之前启动一下上一节的 server,启动之前需要清除一些代码 注释 Program 的 MigrateDbContex ...