Vue 3教程 - 通过mixins实现代码重用

mixin的作用

可以通过mixin来实现代码的重用。在mixin中可以添加数据(data)，方法(methods)，计算属性(computed attributes)，watchers, 生命周期钩子(life cycle hooks)。

如果在组件中和mixin中同时声明了同一属性/方法，组件中的优先级更高。

使用mixins

实现可以重用代码

./mixins/counter.js

export default {
  data() {
    return {
      count: 0;
    }
  },
  methods: {
    increase() {
      this.count += 1;
    }
  }
}

在Vue组件中使用mixin

import Counter from '../mixins/counter';

export default {
  name: 'test',
  mixins: [Counter]
}

使用mixins的注意事项

要注意mixin和组件的命名冲突问题。比如，在mixin和组件中都定义了同一属性。

在新版Vue中，有用Composition API（Composable/Hooks）替代mixin的趋势。