mixins的使用

mixins的目的：可以定义共用的变量，在每个组件中使用，引用组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。组件直接使用是相互隔离的，数据互不影响。

//  myMixins.js 
export const myMixins = {
  data() {
    return {
      age: 18,
    }
  },
  mounted() {
    this.getAge()
  },
  methods: {
    getAge() {
      console.log(this.age)
    }
  }
}


// 使用
import { myMixins } from "@/myMixins.js";
export default {
  mixins: [myMixins], // 有冲突的时候，混入对象的优先级低于组件中的，组件中的值会覆盖混入对象的
  data() {
    return {}
  },
  created() {
    this.age++
  },
}

vue3：mixins代替方案

// 使用setup函数来定义可复用的逻辑
function useCounter() {
  const count = ref(0);
 
  function increment() {
    count.value++;
  }
 
  return { count, increment };
}
 
// 使用
const { count, increment } = useCounter();  // 调用useCounter函数，获取可复用的状态和方法