vue2的mixins和vue3的自定义hook整理

最新推荐文章于 2024-11-23 12:58:20 发布

web行路人

最新推荐文章于 2024-11-23 12:58:20 发布

阅读量481

点赞数 10

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qishuixian/article/details/143511510

1、Vue2中的mixins

Mixins 是一种包含多个组件选项的对象。可以将 mixin 作为组件的一个选项引入，从而在该组件中“混入”这个对象的选项。通过这种方式，mixins 可以帮助你实现功能复用，减少重复代码。

// mixin.js
export default {
  data() {
    return {
      sharedData: 'I am shared data'
    }
  },
  methods: {
    sharedMethod() {
      console.log('This method is shared.')
    }
  }
}
 
// ComponentA.vue
import Vue from 'vue'
import mixin from './mixin'
 
Vue.mixin(mixin)
 
// ComponentB.vue
import Vue from 'vue'
import mixin from './mixin'
 
Vue.mixin(mixin)

2、Vue3中的自定义hook

在Vue 3中，可以通过创建自定义hook来复用状态逻辑。自定义hook是一个函数，它接受外部传入的依赖，并返回一个或多个响应式的值或方法。

// hook.js (自定义hook)
import { ref } from 'vue'
 
export function useShared() {
  const sharedData = ref('I am shared data')
 
  function sharedMethod() {
    console.log('This method is shared.')
  }
 
  return { sharedData, sharedMethod }
}
 
// ComponentA.vue
<template>
  <!-- 使用sharedData和sharedMethod -->
</template>
 
<script>
import { useShared } from './hook'
 
export default {
  setup() {
    const { sharedData, sharedMethod } = useShared()
    // 返回到模板中使用
    return { sharedData, sharedMethod }
  }
}
</script>
 
// ComponentB.vue
<template>
  <!-- 使用sharedData和sharedMethod -->
</template>
 
<script>
import { useShared } from './hook'
 
export default {
  setup() {
    const { sharedData, sharedMethod } = useShared()
    // 返回到模板中使用
    return { sharedData, sharedMethod }
  }
}
</script>

3、Vue2/Vue3中的代码逻辑复用对比（mixins、自定义hook）

对比	vue2的mixins	vue3的自定义hook
结构和可读性	在组件中可能会导致命名冲突，难以追踪逻辑来源。	逻辑更清晰，易于跟踪，函数之间更易于组合。
灵活性	不够灵活，可能导致组件之间的依赖关系不明确	可以在多个组件之间自由组合，更符合函数式编程的理念
TypeScript 支持	在 TypeScript 中的支持较差，类型推导可能不够准确	TypeScript 的支持更好，能够明确指定返回的类型
总结	由于mixins混入的特性，其中定义的变量相当于隐式引入了父组件，从而导致变量难以定位到其定义的具体位置若父组件仅需要mixins中某一小段逻辑，通过mixins的方式还是只能将整个mixins文件引入后进行使用，无形中增加了无效代码的引用最致命的便是多mixins引入重名的情况	由于hooks本身是一个函数，因此调用hooks中定义的方法会产生闭包，大量滥用hooks，不可避免的存在一定的内存泄露问题，不过大部分情况下hook的表现还是非常优秀的。