vue3.0 使用自定义hooks替代mixins

mixins方式的痛点

传统 mixins 有很多让人诟病的地方，mixins 的深度合并非常隐式，这让代码的逻辑更难理解和调试，具体表现为如下几点：

• mixins 容易冲突：因为每个特性的属性都被合并到同一个组件中，组价内同名的属性或方法会将mixins中的覆盖掉。

• 可重用性有限：我们不能向 mixins 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。

• 数据来源不清晰：组件里所使用的 mixins 里的数据或方法在当前组件代码里搜索不到，易造成错误的解读，比如被当成错误代码或冗余代码误删。

传统mixins方式示例

// baseMixins.js

export default {
	data() {
  	return {
    	aa: 1
    }
  }
  
  mounted() {
  	this.getTableList()
  }

	method: {
  	getTableList() {
    	console.log('getTableList')
    }
  }
}
// index.vue

<template>
	<div>{{ text }}</div>
</template>

<script>
import baseMixins from '@/mixins/baseMixins'

export default {
	mixins: [baseMixins],
  mounted() {
  	console.log('index mounted')
  }
}
</script>

如上所示，封装的 mixins 实际只做了两件事，一是在 mounted 钩子函数里执行 getTableList 方法，二是暴露一个变量给外部使用。

这是 mixins 最典型的两个用途，一是自己执行一些公共逻辑，外部引入时不用管，二是定义一些 data 变量给外部引入后使用。

自定义hooks方式示例

// useBaseHooks.js

import { ref, onMounted } from 'vue'

function useBaseHooks() {
	const text = ref(1)
  
  function getTableList() {
  	console.log('getTableList')
  }
  
  onMounted(() => {
  	getTableList()
  })
  
  return {
  	text
  }
}

export default useBaseHooks
// index.vue

<template>
  <div>{{ text }}</div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import useBaseHooks from '@/hooks/useBaseHooks'

export default defineComponent({
  setup () {
    const { text } = useBaseHooks()

    onMounted(() => {
      console.log('index mounted')
    })

    return {
      text
    }
  }
})
</script>