Vue2 页面和 mixins 中相同的 data created mounted computed watch methods 优先级

在Vue2中，如果组件和mixins中有重复的生命周期钩子、计算属性、方法和数据，以下是优先级规则：

1. 数据（data）: 组件优先，意味着组件中定义的数据将覆盖mixin中的同名数据。
2. 生命周期钩子（created, mounted等）: 混入（mixins）优先，意味着mixins中定义的钩子会先于组件的钩子执行。
3. 计算属性（computed）: 组件优先，意味着组件中定义的计算属性将覆盖mixin中的同名计算属性。
4. 方法（methods）: 组件优先，意味着组件中定义的方法将覆盖mixins中的同名方法。
5. 观察者（watch）: 混入（mixins）优先，意味着mixins中定义的观察者会先于组件的观察者执行。

如果需要确保组件中的数据、方法、计算属性和观察者优先，可以在混入（mixins）中使用extends选项，并在组件中使用mixins选项。这样，组件中定义的会覆盖mixins中的同名属性。

例子代码：

// mixin.js
export default {
  data() {
    return {
      sharedData: 'Mixin data'
    };
  },
  created() {
    console.log('Mixin created');
  },
  computed: {
    sharedComputed() {
      return 'Mixin computed';
    }
  },
  methods: {
    sharedMethod() {
      console.log('Mixin method');
    }
  },
  watch: {
    sharedData(newVal, oldVal) {
      console.log(`Mixin watch: ${newVal}`);
    }
  }
};
 
// Component.vue
<template>
  <div>
    {{ sharedData }}
  </div>
</template>
 
<script>
import mixin from './mixin.js';
 
export default {
  mixins: [mixin],
  data() {
    return {
      sharedData: 'Component data'
    };
  },
  created() {
    console.log('Component created');
  },
  computed: {
    sharedComputed() {
      return 'Component computed';
    }
  },
  methods: {
    sharedMethod() {
      console.log('Component method');
    }
  },
  watch: {
    sharedData(newVal, oldVal) {
      console.log(`Component watch: ${newVal}`);
    }
  }
};
</script>

在这个例子中，即使mixin中定义了与组件相同的生命周期钩子、计算属性、方法和数据，组件中的定义也会覆盖mixin中的定义，所以组件的优先级更高。