minxin和hook的使用与对比

• minxin和hook的使用与对比
  • 1. mixin (Vue2)
  • 2. hook (Vue3)
  • 3. mixin和hook的对比

1. mixin (Vue2)

• mixin可以把多个组件共用的配置提取成一个换入对象

• show.js文件（mixin）

  export const mixin_name = {
      methods:{
          showName(){
              alert(this.name)
          }
      },
  }
  

• School.js文件（引用mixin）

  <template>
      <div>
          <h2 @click="showName">学校名称：{{name}}</h2>
          <h2>学校地址：{{address}}</h2>
      </div>
  </template>
  
  <script>
  	import {mixin_name} from '../mixin'
      export default{
          name:'school',
          data(){
              return {
                  name: 'xxx'
                  address:'xxxx'
              }
          },
          //引入后上方的ShowName就可以正常使用了
          mixins:[mixin_name]
      }
  </script>
  

• 注意事项：

  • mixins中的生命周期会与引入mixins的组件的生命周期整合在一起调用
  • 组件的data、methods、filters会覆盖mixins里的同名data、methods、filters

2. hook (Vue3)

• hook本质是一个函数，将setup函数中使用的Composition API进行封装，类似于Vue2中的mixin

• usePoint.js文件（hook）

  //实现监控鼠标移动坐标的功能
  import {reactive,onMounted,onBeforeUnmount} from 'vue'
  export default function(){
      let point = reactive({
          x:0,
          y:0
      })
      
      function savePoint(event){
          point.x = event.pageX
          point.y = event.pageY
          console.log(event.pageX,event.pageY)
      }
      
      onMounted(()=>{
          window.addEventListener('click',savePoint)
      })
      
      onBeforeUnmount(()=>{
          window.removeEventListener('click',savePoint)
      })
      
      return point
  }
  

  Demo.js（引用hook）

  <template>
      <h2>当前点击时鼠标坐标为x:{{point.x}},y:{{point.y}}</h2>
  </template>
  
  <script>
  	import {ref} from 'vue'
      import usePoint from '../hooks/usePoint'
      export default{
          name:'Demo',
          setup(){
              const point = usePoint()
          }
      }
  </script>
  

3. mixin和hook的对比

• mixin相比hook的缺点

  • 变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护

    mixin中的变量和方法都是直接插入组件中的，不需要显式的调用，这样就会很难分清到底调用的是哪个mixin中的哪个方法

  • 同名属性、同名方法无法融合，可能会导致冲突

    minxin之间的同名属性、同名方法会导致冲突，也有可能相互覆盖输出结果，加上组件会覆盖mixin的同名方法和变量，乱上加乱

  • mixin和组件可能出现多对多的关系，复杂度较高

    一个mixin可能对应多个组件，一个组件也可以使用多个mixin

• hook的优点

  • hook是一个函数，mixin是一个对象
  • hook就是拆分版的mixin，将导入操作交给开发者，能够清楚地溯源每个属性和方法