Vue3 Hook 到底是啥黑魔法?

更新日期: 2021-07-29阅读: 4k标签: Vue3

早就听说,react社区,已经全面拥抱Hook。vue3的发布也支持了自定义Hook,作为只会Vue的前端小码农自然要去看看Vue3 Hook到底是啥黑魔法?

个人博客网站欢迎交流:萤火之森:https://blog.xkongkeji.com

从不了解React Hook的角度来看一下啥是Hook?

Vue 官方给出的自定义 Hook 的例子是这样的:
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 };
}

组件中使用:

import { useMousePosition } from "./mouse";

export default {
  setup() {
    const { x, y } = useMousePosition();
    return { x, y };
  },
};

相信写vue2的小伙伴应该都有被Mixin支配过,特别是拿到应该不熟悉的项目的时候,简直是噩梦,各种Mixin,各种变量,方法,完全看不出从哪来的。

代码中使用中可以清晰的找到鼠标位置X,Y来自于useMousePosition函数,useMousePosition就是一个函数,使用了composition-api定义了响应式数据X,Y然后导出,个人感觉是将mixin拆分了,将导入的操作交给了开发者,以前是vue直接帮我们把数据合并在了一起,反而导致了数据无从溯源的问题。

个人理解,欢迎纠正

  • hook可以当作以前mixin的来用
  • hook是一个函数,mixin是一个对象
  • hook就是拆分版的mixin,将导入操作交给开发者,mixin是根据对应的options Api直接merge到组件了
  • hook可以借用composition-api完全使用vue的能力,简而言之就是你在setup函数用能用的hook都能用.
来自:https://blog.xkongkeji.com/articledetail


链接: https://fly63.com/article/detial/10595

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!