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 { reactive, ref, onMounted, onUnmounted } from 'vue'

function useMousePosition() {
    const x = ref(0)  //ref生成值类型的相应数据,可用于模板和reactive, 通过 .value修改值
    const y = ref(0)

    function update(e) {
        x.value = e.pageX
        y.value = e.pageY
    }
　　 onMounted(() => {
        console.log('useMousePosition mounted')
        window.addEventListener('mousemove', update)
    })

    onUnmounted(() => {  //销毁鼠标移动事件  vue2的destroyed ===> vue3的 onUnmounted 
        console.log('useMouse unMounted')
        window.removeEventListener('mousemove', update)
    })
    return {
        x,
        y
    }
}

export default useMousePosition

 在新建一个 useMouse.vue 文件

<template>
    <p>mouse position {{x}} {{y}}</p>
</template>

<script>
import { reactive } from 'vue'
import useMouse from './useMouse' //引入useMouse

export default {
    name: 'MousePosition',
    setup() {
        const { x, y } = useMouse()
        return {
            x,
            y
        }
    }
}
</script>

大功告成!

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