最近在做项目的时候需要给插件实现一个回调方法，正常的方式没法实现，只能通过监听浏览器缓存来实现，了解到js本身是可以通过自定义事件来实现的，平常我们熟悉的click，scroll等等其实就是浏览器本身已经实现的事件，那么如何实现自定义事件呢，比如自定义一个事件customEevent，正常可以通过new Event("customEevent");然后通过window.dispatchEvent来触发这个事件即可。
以下代码供餐看，有两个地方需要特别注意，第一个在页面销毁前一定要销毁同名的自定义方法，否则再次打开这个页面会再次注册，导致回调方法执行多次。第二个销毁的方法名跟时间名必须是同一个，即addEventListener跟removeEventListener的方法名要一致，否则会出现销毁失效的问题
<template>\n <div class="login"></div>\n</template>\n\n<script>\nexport default {\n data() {\n return {cb: null,eventName:null};\n },\n mounted() {\n this.addEvent(this.callBackFunc);\n },\n created() {},\n methods: {\n callBackFunc: function () {\n console.log("这个回调方法");\n },\n addEvent(cb) {\n this.cb = cb\n this.eventName = new Date().getTime()\n var orignalSetItem = localStorage.setItem;\n let _this = this\n localStorage.setItem = function (key, newValue) {\n var setItemEvent = new Event(_this.eventName);\n\n setItemEvent.newValue = newValue;\n setItemEvent.newValuekey = key;\n\n window.dispatchEvent(setItemEvent);\n orignalSetItem.apply(this, arguments);\n };\n\n window.addEventListener(this.eventName,this.cb);\n },\n },\n beforeDestroy() {\n window.removeEventListener(this.eventName, this.cb);\n },\n};\n</script>