Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue中的mixins实践 #11

Open
jiangtao opened this Issue Sep 13, 2017 · 2 comments

Comments

Projects
None yet
2 participants
@jiangtao
Copy link
Owner

commented Sep 13, 2017

奇舞周刊推荐了一篇文章Vue.js 中使用Mixin, 用了vue大半年时间,mixin不知道挺惭愧。

奇舞周刊文章中已经介绍了 vue mixin。

  • 官方提示谨慎使用 global mixin
  • 合理的场景下使用 mixin

这里再补充一个 通用业务(埋点) 来描述 mixin的优缺点。

需求

SPA实现埋点需求中比较通用的需求,进入页面离开页面 需要记录用户在 当前页面的 停留时间。使用mixin, 简化代码如下

mixin.js

let cache = null // 确保进入和离开是一个page

export default {
    methods: {
        sendEnterPage() {
            cache = this.$route
            console.log('enter page', cache)
        },
        sendLeavePage() {
            console.log('leave page', cache)
        }
    },
    mounted(){
        this.sendEnterPage()
    },
    destroyed() {
        this.sendLeavePage()
    }
}

demo.vue 部分代码

<script>
import test from 'mixins/test'
export default {
    data() {
        return { text: 'Hello World' }
    },
    mixins: [test],
    methods: {
        logic() {
            console.log('do the logic about hello page')
        }
    },
    mounted() {
        this.logic()
    }
}

运行结果图

image

从图中发现,使用局部mixin 使用 mounted, destroyed 等组件中的生成周期方法与 mixin 是 合并; 当然实验得出 methods中的方法是被覆盖的。具体是通过 mergeOtions function实现

好处

埋点这部分需求 与 核心业务 关联, 代码少,尽可能的少侵入业务。

坏处

minxin中的方法 以及实现 逻辑 其他同事不知道,不直观。 只能通过约定和沟通来解决。

以上功能有种 “修饰” 的感觉。es7 decorator 支持修饰模式,当局限于 类和类的方法, vue官方提供了 vue-class-component 来解决这个问题。

React当中已经废弃了 mixin,使用了 高阶组件 来解决这个问题,其实就是支持 class组件,结合decorator

代替mixin。 关于react理解的不对,请指出。

前端时间闲暇的时候做了一个 vue-mount-time 用来记录,第一个组件mount开始时间到 最后一个mount组件结束时间,做了一个简单的尝试。

行为统计

若需要做行为统计,可以通过 mixin 拦截到所有的方法, 对方法做统一收集。根据 页面地址 + 方法名 可以 确定对应的行为,从而做到无侵入的埋点解决方案

总结

本篇是对mixin的看法和对业务的结合点,如有不对欢迎指正,转载请注明出处。

@jiangtao jiangtao added the vue label Sep 13, 2017

@tangdw

This comment has been minimized.

Copy link

commented Sep 22, 2017

博主你好,能否讲一下 spa 里的 “事件埋点” 有无不侵入业务代码的好办法。如果只是 url 访问统计的话,ga 的 autotrack 里有插件(urlChangeTracker)解决了。

@jiangtao

This comment has been minimized.

Copy link
Owner Author

commented Nov 9, 2017

@tangdw 可以使用 global mixin在 mounted的时候 注入你要的统计url的代码即可。 如果要做事件统计 拦截到method做处理即可

@jiangtao jiangtao changed the title vue中的mixins vue中的mixins实践 Nov 9, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.