vue3中Hooks用法

一，什么是Hooks？

"hooks" 直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：

系统运行到某一时刻时，会调用在该时机被注册的回调函数

而在vue中。hooks的定义会更加模糊，姑且总结一下：

在vue组合式API中被定义为,以"use" 作为开头的，一系列提供组件复用，状态管理等开发能力的方法。

 二，Mixin和Hooks区别

假设有个需求：

当组件实例创建时，需要创建一个 state 属性：name，并随机给此 name 属性附一个初始值。除此之外，还得提供一个 setName 方法。你可以在组件其他地方开销和修改此状态属性。

更重要的是: 这个逻辑要可以复用，在各种业务组件里复用这个逻辑。

 在拥有hooks之前，首先想到的就是Mixin

代码如下：

// 混入文件：name-mixin.js
export default {
  data() {
    return {
      name: 'zhng'
    }
  },
  methods: {
    setName(name) {
      this.name = name
    }
  }
}

在组件中使用：

// 组件：my-component.vue