js自定义模块export 和vue 的mixin有什么区分点？

Question

我的想法是vue 的mixin也可以写成js自定义模块export，然后import进来
都是代码复用
但是我把mixn改成js模块，出现了一个大问题

vue.esm.js?efeb:1741 TypeError: Cannot read property 'components' of undefined
    at checkComponents (vue.esm.js?efeb:1330)
    at mergeOptions (vue.esm.js?efeb:1451)
    at mergeOptions (vue.esm.js?efeb:1467)
    at Function.Vue.extend (vue.esm.js?efeb:4803)
    at createComponent (vue.esm.js?efeb:4203)
    at _createElement (vue.esm.js?efeb:4420)
    at createElement (vue.esm.js?efeb:4357)
    at vm._c (vue.esm.js?efeb:4489)
    at Proxy.render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-0ffbc2a2","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/news/detail/comment/Item.vue (app.js:7208), <anonymous>:144:13)
    at VueComponent.Vue._render (vue.esm.js?efeb:4544)

过程是我用js模块方法返回的结果作为组件显示与否v-if

//lib.js
let checkIsLogin= async function(){     
    const res = await  api.auth.current({});
    return res.isLoggedIn;     
};
//componnts.vue
lib.checkIsLogin().then(function(res){               
    this.replying =  res;
})

<child v-if="replying "></child>

Answer 1

mixin 也是 js，但是mixin 写的是 vue 组件的混合，vue 组件中的属性如 methods、computed、data 等都可以使用mixin 来进行复用，本质和 js 没什么区别，比如你有一个公共的方法，你也可以写一个js 文件 export 出去一个方法，然后在某个 vue 组件中引用，但是这么做比较曲折，不如直接写 mixin 来的方便，而且写成mixin 中的 method，在这个方法里还可以直接访问组件实例中的变量，可以引用组件等。