在 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>