vue3.0组合式API的mixins替代方法

vue3.0组合式API的mixins替代方法

vue3.0组合式API的mixins替代方法 - 简书

传统的vue2.0的mixin存在一下缺点：

1. 属性名重复冲突，这使得mixin中的数据将会被替换掉，有时会造成无法预料的问题
2. 可重用性有限，无法向mixins传入任何参数来改变逻辑，降低了在抽象逻辑方面的灵活性
3. 数据来源无法确定，mixins中的数据没有显式的列出来，导致代码中很多数据或方法无法确定其来源，甚至有时会造成代码误删

在vue3.0中我们使用自定义hooks来解决这些问题

传统mixins展示：

export default {
  data () {
    return {
      msg: 1
    }
  },

  mounted () {
    this.testFn()
  },

  methods: {
    testFn () {
      console.log('testFn')
    }
  }
}

使用mixins：

<template>
  <div>{
   
   { aa }}</div>
</template>

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

我们使用自定义hooks的方式：

import { ref, onMounted } from 'vue'

export default function () {
  const aa = ref(1)

  function testFn () {
    console.log('testFn')
  }

  onMounted(() => {
    testFn()
  })

  return {
    aa
  }
}

<template>
  <div>{
   
   { aa }}</div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import myHooks from './myHooks'

export default defineComponent({
  setup () {
    const { aa, testFn } = myHooks()

    onMounted(() => {
      testFn('index mounted')
    })

    return {
      aa，
      testFn
    }
  }
})
</script>

可以看到我使用自定义hooks的方式引入的数据和方法都能直接看到来源，且方法可以传入参数

为什么导出的是一个function而不是对象？

1. 因为导出为对象的话就意味着在import导入时就执行了封装的逻辑，而我们封装的逻辑是用composition api包装了的的特殊代码，这些代码只能在setup里才能正常使用，所以需要导出一个函数，这样就可以在组件setup里调用该函数来指定执行时机。
2. 导出为function还有一个用途是方便传参，这样可以在不同的组件引用时做一些差异化逻辑处理。