mixin和composition api

1. 这两个都是实现组件逻辑复用的法宝

2. composition api是vue3的,  composition api的出现就是解决mixins的不足之处的

一. mixin

回顾下mixin, 用过vue老版本的都或多或少用过mixin

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

mixins用的地方很多, 比如: 状态切换, 提示框和模态框显示影藏的逻辑 其实都可以复用的, 没必要重复写n遍,还有很多例子

mixins用发很简单, 直接上代码:

//新建一个 mixins.js

export const myMixins = {
    data () {
        return {
            count: 1
        }
    },
    created () {
        this.onHello()
    },
    methods: {
        onHello () {
            console.log('hello from mixins')
        }
    }
}

//新建一个 TestOne.vue

<template>
  <div>
    <h1>TestOne里面的{{ count }}</h1>
  </div>
</template>

<script>
import { myMixins } from '@/pages/mixins/mixins.js' //引入你的 mixins.js
export default {
  name: 'TestOne',
  mixins: [myMixins],
  created() {
    this.count++   //这边我+1
  }
}
</script>

//再新建一个 TestTwo.vue

<template>
  <div>
    <h1>TestTwo里面的{{ count }}</h1>
  </div>
</template>

<script>
import { myMixins } from '@/pages/mixins/mixins.js' //引入mixins.js
export default {
  name: 'TestTwo',
  mixins: [myMixins],
  created() {}
}
</script>

然后页面呈现效果(此处省略一些废话了):

　　我在TestOne.vue中count++ , count变成2   , TestTwo.vue中的count没有跟着遍!!(优点)

　　

 

 

  Mixins优点：    组件逻辑复用,  不需要传递状态, 

　　　　　　　　　  可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响,

　　　　　　　　      对于封装一小段想要复用的代码来讲是有用的。

  　　　　　　         

  Mixins缺点:     1. 命名冲突 问题!

　　　　　　　 2. 隐含的依赖关系(mixin和使用它的组件之间没有层次关系。组件里的变量名称修改后，mixin里没改)

　　　　　　　 3. 显而易见可能会被滥用!

　　　　　　　 4. 不可知，不易维护, 写不好代码就容易散、新手难以理解算是弊端吧。(因为你可以在mixins里几乎可以加任何代码，props、data、methods、各种东西，就导致如果不了解mixins封装的代码的话，是很难维护的)

　　　　　　　　　 5. mixin模式表面上看起来很安全。然而，通过合并对象来共享代码，由于它给代码增加了脆弱性，并且掩盖了推理功能的能力，因此成为一种反模式。

 

                                 (拓展:这边抬一手vuex ：vuex用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。)

 

 

二.  composition api (vue3出的新功能, composition api : "我就是为解决mixins缺点而诞生的")  

　   说到composition api, 那可厉害了, 兄弟们 , Composition API解决了mixins的缺点, 有点React Hooks的味道

　　

 

 

　　composition api 相对于 options api  更好的 代码组织, 更好的逻辑复用, 更好的类型推导

 

　　composition api 和options api  如何选择: (没必要以为的追求composition api, 视情况而定:)

 

     

 

 

 

 

 

 话不多说, 上代码: composition api这么用:

 新建个useMouse.js (获取鼠标位置demo)

import { ref } from "vue";
import { useEventListener } from "./event";


export function useMouse() {
  const x = ref(0);
  const y = ref(0);



  useEventListener(window, "mousemove", (e) => {
    x.value = e.pageX;
    y.value = e.pageY;
  });



  return { x, y };
}

 event.js封装 添加和清除 DOM 事件监听器

//添加和清除 DOM 事件监听器
import { onMounted, onUnmounted } from "vue";

export function useEventListener(target, event, callback) {
  onMounted(() => target.addEventListener(event, callback));
  onUnmounted(() => target.removeEventListener(event, callback));
}

 

 在新建一个 useMouse.vue 文件

<template>
  <div class="hello">
    <h1>{{ x }}--{{ y }}</h1>
  </div>
</template>


<script setup>
import { useMouse } from '@/components/useMouse'
const { x, y } = useMouse()
</script>

大功告成!  就是这么简单,  其他地方就能直接用 event.js和 useMouse了   ;  就好比拼图 

composition 几乎没什么缺点, 唯一的缺点 可能是 心智负担 , 响应式开发确实比纯数据驱动要难一点 , 还是要点学习成本的