mixins语法补充

目标:掌握mixins语法的基本使用,v2.x封装逻辑的方式,vue3.0建议使用组合API

官方话语:

• 混入(mixin)提供一种非常灵活的方式,来分发Vue组件中的可复用功能,一个混入对象可以包含任意组件选项,当组件使用混入对象的时候,所有混入对象的选项将被"混合"进入该组件本身的选项。

** 全局混入**
全局混入:所有组件混入了这些逻辑代码，混入对象包含(data ， methods ， computed......)。

全局混入

** 局部混入**
局部混入:按需混入了这些逻辑代码到指定组件，混入对象包含(data ， methods ， computed......)。

局部混入,并使用mixins来封装

总结:

在vue2.0中一些可服用的逻辑可以使用mixins来封装,但是需要考虑逻辑代码冲突问题。但是vue3.0的组合API很好的解决了这个问题，所以使用vue3.0就不推荐使用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的方式：

自定义hook

import { ref, onMounted } from 'vue'

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

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

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

  return {
    aa
  }
}

使用自定义hook

<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而不是对象？

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