vue3和vue2中mixins的使用解析

export const homeSensors = {
  mounted() {
    this.$sensors.track('teacherHomePageview')
  },
    methods:{
        abc(){
            alert(1)
        }
    }
}

import { homeSensors } from '@/mixins/sensorsMixin'

export default {
  mixins: [taskAssign],
 
}

created() {
    this.abc()   //mixin里面的具体方法
  },  

//setup中调用的mixins方法
import { computed, ref } from 'vue'
export const common =  {
  alertCon(content) {
    if(content){
      alert(content)
    }else{
      alert(1)
    }
  },
  setup(){
    const count = ref(1)
    const plusOne = computed(() => count.value + 1)
    function hello(){
      console.log('hello mixin'+plusOne.value)
    }
    return{
      count,
      plusOne,
      hello
    }
  }
}

 
// vue页面中引入
import {common} from '../../../mixins/common'
export default{
  setup(){
    common.alertCon()
    const {count,plusOne,hello} = common.setup()
    hello()
    console.log(count.value, plusOne.value)
  }
}

// 定义一个 mixin 对象
const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}
 
// 定义一个使用此 mixin 对象的应用
const app = Vue.createApp({
  mixins: [myMixin]
})
 
app.mount('#mixins-basic') // => "hello from mixin!"

//setup中调用的mixins方法
import { computed, ref } from 'vue'
export const common =  {
   mounted(){
    alert('我是mounted的方法')
  },
}

import {common} from '../../../mixins/common'
mixins: [common],