在 Vue组件与mixins 中的属性、方法、监听器和生命周期函数的优先级

在 Vue 中，当使用 mixins 时，属性、方法、监听器（watchers）以及生命周期函数的优先级是明确的。以下是这些选项的优先级说明，并附带示例：

1. 属性（data/props）

如果组件和 mixin 中定义了同名的 data 属性或 props，那么组件中的属性会覆盖 mixin 中的同名属性。

示例：

// mixin.js  
export default {  
  data() {  
    return {  
      message: 'This is from mixin'  
    }  
  }  
}  
  
// MyComponent.vue  
<template>  
  <div>{{ message }}</div>  
</template>  
  
<script>  
import mixin from './mixin'  
  
export default {  
  mixins: [mixin],  
  data() {  
    return {  
      message: 'This is from component' // 覆盖 mixin 中的 message  
    }  
  }  
}  
</script>

在这个例子中，组件渲染出的 message 将会是 “This is from component”。

2. 方法（methods）

如果组件和 mixin 中定义了同名的方法，那么组件中的方法会覆盖 mixin 中的同名方法。

示例：

// mixin.js  
export default {  
  methods: {  
    sayHello() {  
      console.log('Hello from mixin!')  
    }  
  }  
}  
  
// MyComponent.vue  
<template>  
  <button @click="sayHello">Click Me</button>  
</template>  
  
<script>  
import mixin from './mixin'  
  
export default {  
  mixins: [mixin],  
  methods: {  
    sayHello() {  
      console.log('Hello from component!') // 覆盖 mixin 中的 sayHello  
    }  
  }  
}  
</script>

在这个例子中，点击按钮后会在控制台输出 “Hello from component!”。

3. 监听器（watchers）

对于同名的监听器，mixin 中的监听器会在组件的监听器之前执行。但是，它们各自监听的是自己的数据，不会相互覆盖。

示例：

// mixin.js  
export default {  
  data() {  
    return {  
      mixinCount: 0  
    }  
  },  
  watch: {  
    mixinCount(newVal, oldVal) {  
      console.log('Mixin count changed:', newVal)  
    }  
  }  
}  
  
// MyComponent.vue  
<template>  
  <button @click="incrementMixinCount">Increment Mixin Count</button>  
</template>  
  
<script>  
import mixin from './mixin'  
  
export default {  
  mixins: [mixin],  
  data() {  
    return {  
      componentCount: 0  
    }  
  },  
  watch: {  
    componentCount(newVal, oldVal) {  
      console.log('Component count changed:', newVal)  
    }  
  },  
  methods: {  
    incrementMixinCount() {  
      this.mixinCount++ // 修改 mixin 中的数据  
    }  
  }  
}  
</script>

在这个例子中，点击按钮会触发 mixin 中的 mixinCount 的监听器，并输出 “Mixin count changed:” 加上新的值。而 componentCount 的监听器则不会被触发，因为它没有被修改。

4. 生命周期函数

对于同名的生命周期函数，mixin 中的生命周期函数会在组件的生命周期函数之前执行（按照 mixin 数组的顺序）。

示例：

// mixin1.js  
export default {  
  created() {  
    console.log('Mixin 1 created!')  
  }  
}  
  
// mixin2.js  
export default {  
  created() {  
    console.log('Mixin 2 created!')  
  }  
}  
  
// MyComponent.vue  
<script>  
import mixin1 from './mixin1'  
import mixin2 from './mixin2'  
  
export default {  
  mixins: [mixin1, mixin2], // 注意 mixin 的顺序  
  created() {  
    console.log('Component created!')  
  }  
}  
</script>

在这个例子中，控制台输出的顺序将是 “Mixin 1 created!”、“Mixin 2 created!” 和 “Component created!”。