vue混入和继承

1.混入mixins

混入非常灵活,它的出现大大的提高了vue代码复用的能力。一个混入对象可以包含任意组件选项。当我们的组件使用这个混入对象时，混入对象的选项会和组件本身的选项进行合并。

var mixin = {  
    data() {  
        return {
            msg: 'hello',  
            count: 0  
        }  
    }
    created: function () {  
        console.log('11111')  
    }
    
}  
  
new Vue({  
    mixins: [mixin],  
    data() {  
        return {  
            msg: 'world',  
            num: 1 
        }  
    },  
    created() {
        console.log(22222)
        console.log(this.$data)  
        // 11111
        // 22222
        // { msg: "world", count: 0, num: 1 }
    }  
})

上面的例子可以看到，组件和混入把选项进行了合并，混入对象的钩子将在组件自身钩子之前调用；名称冲突的以组件的优先。组件引用多个混入时， mixins: [mixin1，mixin2]，按顺序执行，即先注册的先执行。 全局混入 全局混入，相当于所有组件都引用了这个混入；即所有组件都会受其影响。

import Vue from "vue";
import App from "./App.vue";
import { mixins } from "./mixin/index";
Vue.mixin(mixins);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

2.继承extends

• extends从代码角度来说，和mixins高度类似;
• 不同的是mixins接受的是数组，而extends接受的是对象；
• 继承的优先级高于混入；相当于把extends放在了mixins数组的第一个位置。
• 最大的不同点，在于它们的意义；mixins用于组合功能，而extends更关注于继承关系

extendsTest = { 
    data() {  
        return {
            msg: 'hello',  
            count: 0  
        }  
    }
    created: function () {  
        console.log('11111')  
    }
}
new Vue({  
    mixins: [mixin], 
    extends:extendsTest,
    data() {  
        return {  
            msg: 'world',  
            num: 1 
        }  
    },  
    created() {
        console.log(22222)
        console.log(this.$data)  
        // 11111
        // 22222
        // { msg: "world", count: 0, num: 1 }
    }  
})

3.mixins缺点及组合式函数

缺点:

• 命名冲突时，同名会被覆盖（合并选项）；
• 数据来源不清晰（引入多个mixins）；
• 潜在的耦合（合并选项，同享的属性名）

vue3中更推荐使用组合式函数，官网鼠标跟踪器示例：

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'

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

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}

组件中使用

<script setup>
import { useMouse } from './mouse.js'

const { x, y } = useMouse()
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>