初识Hooks

目录

• 1.vue2中的mixin是什么
• 2.mixin与vuex的区别？
• 3.vue2中的mixin与vue3中的hooks
• 4.hooks例子

1.vue2中的mixin是什么

• 将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。提取的是逻辑或配置，而不是HTML代码和CSS代码。

2.mixin与vuex的区别？

• vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。

3.vue2中的mixin与vue3中的hooks

• 相对于vue2的mixin而言：hooks将mixin拆分了，将导入的操作交给了开发者，以前是vue直接帮我们把数据合并在了一起，反而导致了数据无从溯源的问题。

4.hooks例子

//例子：
import { ref, onMounted, onUnmounted } from "vue";
export function use***() {
	//逻辑实现
 return {
      
    }
}
export default use***

//组件中使用
import { use*** } from "./mouse";
export default {
  setup() {
    const ** = use***();
    return { x, y };
  },
};