使用hooks解决Mixin缺点

mixins缺点

• 1、命名冲突：data、methods、components、directives在内部会进行递归合并，并在发生冲突时默认会被组件内对象覆盖。同样的生命周期钩子会被推入存储钩子的数组，并优于组件内钩子调用。(文档详细说明)[https://cn.vuejs.org/v2/guide/mixins.html]

(自定义选项合并策略)[https://cn.vuejs.org/v2/guide/mixins.html#自定义选项合并策略]

• 2、混入的方法来源不明确，类型推断不可用

Composition API 解决方案

hooks

自定义 Hooks 以 use 作为前缀，和普通的函数加以区分

// useCount.js 导出一个函数，使用ref声明的响应式变量
import { ref, computed } from "vue";
export default function () {
  const count = ref(0)
  const double = computed( () => count * 2 )
  function increment () {
      count.value++
  }
  return {
      count,
      double,
      increment
  }
}

引入组件使用时，调用该函数，同时解决方法来源不明确与data声明重复的问题。

<template>
  <div>
    {{ count }}
    {{ double }}
    <span @click="increment">增加</span>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import useCount from './useCount'

export default defineComponent({
  setup() {
    const { count, double, increment } = useCount()
    return { count, double, increment }
  }
})
</script>