vue mixins详解

第一： 使用

mixins.js

 export default {
   data() {
    return {
      num: 1
    }
  },
  created() {
    this.hello()
  }
  methods: {
    hello() {
      console.log('---------  ,mixins ------------')
    }
  }
 }

组件1：

<template>
  <div>
    组件1
  </div>
</template>
<script>
  import {mixins} from './mixins.js'
export default {
  mixins: [mixins]
}
</script>

第二：mixins的特点
1、方法和参数在各组件中不共享
如上 mixins.js 文件 data对象中的参数 num
在组件1中得参数进行+1的操作

<template>
  <div>
    template1里面的num： {{ num }}
  </div>
</template>
<script>
  import { mixins } from './mixins.js'
  export default {
    mixins: [mixins],
    created() {
      this.num++
    }
  }
</script>

组件2中的num参数不进行操作

<template>
  <div>
     template2里面的num： {{ num }}
  </div>
</template>
<script>
  import {mixins} from './mixins.js'
export default {
  mixins: [mixins]
}
</script>

组件1里面的num值是 2，
组件2里面的num值是 1，
可以发现，组件1中的num值发生变化了，但是组件2里面还是混入的初始值
2、值为对象的选项，如methods、components等，选项 会被合并，键冲突的组件会覆盖混入的对象

混入对象中的方法：

export default {
  data() {
    return {
      num: 1
    }
  },
  created() {
    this.hello()
  },
  methods: {
    func_one() {
      console.log('------------- func_one from mixins -----------')
    },
    func_two() {
      console.log('------------func_two from mixins -----------------')
    }
  }
}

组件中的方法：

<template>
  <div>
    template1里面的num： {{ num }}
  </div>
</template>
<script>
  import { mixins } from './mixins.js'
  export default {
    mixins: [mixins],
    created() {
      this.func_self()
      this.func_one()
      this.func_two()
    },
    mothods: {
      func_self() {
        console.log('------------- func_self from template1 ---------------')
      },
      func_two() {
        console.log('-------------- func_two from template1 ---------------')
      }
    }
  }
</script>

控制台输出
------------- func_self from template1 ---------------
------------- func_one from mixins -----------
-------------- func_two from template1 ---------------
3、值为函数的选项，如created，mounted等，就会被合并调用，混合对象里的钩子函数在组件离的钩子函数之间调用
混入对象函数中的console.log

export default {
  data() {
    return {
      num: 1
    }
  },
  created() {
    console.log('------- hello from mixins ------------')
  }
}

组件函数中的console.log

<template>
  <div>
    template1里面的num： {{ num }}
  </div>
</template>
<script>
  import { mixins } from './mixins.js'
  export default {
    mixins: [mixins],
    created() {
      console.log('------- hello form self -----------')
    }
  }
</script>

控制台打印：
------- hello from mixins ------------
------- hello form self -----------

第三： 与vuex的区别
1、vuex 是用来做状态管理的，里面定义的变量在每个组件都可以定义和修改，在任一组件内修改变量的值之后，其他组件内的值也会跟着修改
2、mixins： 可以定义共用的变量，在每个组件中使用，引入组件之后各个变量是相互独立的，值得修改在组件中不会相互影响
第四： 与公共组件得区别
1、组件： 在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，用props来传值，但是本质上两者是相互独立的
2、mixins： 引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成一个新的组件
第五：vue中mixins异步请求中需要注意的情况

当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值
解决：
不要返回结果，而是直接返回异步函数

methods：{
  async func_one(){
    let result = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1)
      }, 800)
    })
    return result
  }
}

组件中：

<template>
  <div>
    template1里面的num： {{ num }}
  </div>
</template>
<script>
  import { mixins } from './mixins.js'
  export default {
    mixins: [mixins],
    mounted() {
      this.func_one().then(res => {
        console.log(res, 'template1-res')
      })
    }
  }
</script>

控制台打印：
1 “template1-res”