Question

给出：复杂的vue组件，用于在网站上自定义替换电话号码。组件有两列：替换设置列（如数字掩码，替换前缀“显示数字”等）和替换可视化器列

接口行为：用户在第一栏中更改一些设置。更改设置后，其回调将查找可视化器的子组件并发出可视化示例的更改。可视化工具从其道具获取的新设置数据：

<script lang='coffee'>
Vue = require 'vue/dist/vue.js'
visualizer = Vue.component 'visualizer',
    props: 
        propData:
            required: true
        pageCondition:
            required: true,
            type: Boolean
        conditionOptions:
            required: true
        isRightHiddenMode:
            required: true,
            type: Boolean
        settings:
            required: true,
            type: Object
        popup:
            required: true


    mounted: ->
        #with of without next tick - dont sense
        @$nextTick ->
            @initSettings()

        @$on 'setStyle', (type) ->
            console.log('setStyle')
            switch type
                when 'inline'
                    @setInlineStyles()

        @$on 'initPrefixSettings', ->
            console.log('initPrefixSettings')
            @setInlinePrefix()
            @setPositionPrefix()

        @$on 'setInlinePrefix', ->
            console.log('setInlinePrefix')
            @setInlinePrefix()

        @$on 'setPositionPrefix', ->
            console.log('setPositionPrefix')
            @setPositionPrefix()

        @$on 'resetPageConds', ->
            that = @
            @conditionOptions.forEach (option, idx) ->
                    that.setPositionPrefix(idx)
                    that.setInlinePrefix(idx)

    watch:
        "pageCondition":
            handler: (newVal) ->
                if !newVal
                    return
                that = @
                @conditionOptions.forEach (option, idx) ->
                    that.setPositionPrefix(idx)
                    that.setInlinePrefix(idx)


    methods:
        initSettings: ->
            console.log('initSettings')
            @setInlineStyles('init')
            if @settings.coverTip.enabled
                @setInlinePrefix()
                @setPositionPrefix()

visualizer通过选择替换蒙版呈现替换示例。它包含静态html到options数组的对象值中，并通过v-html指令包含到页面中-因此，这不是被动的，重新渲染替换示例的方法直接更改DOM元素。例如，这是替换位置前缀方法：

setPositionPrefix: (idx) ->
            markupHolder = undefined
            that = @
            if idx == undefined || idx == null
                if !@settings.coverTip.enabled
                    markupHolder = that.$el.querySelector(".calltrack__phone-markup--common")
                    if !markupHolder
                        return
                    inline = markupHolder.querySelector(".at-360-inline")
                    inline.classList.remove("at-360-inline--prefixed")
                    return
                int = setInterval(
                    ->
                        markupHolder = that.$el.querySelector(".calltrack__phone-markup--common")
                        if markupHolder
                            inline = markupHolder.querySelector(".at-360-inline")
                            clearInterval(int)
                            inline.classList.forEach (cl) ->
                                if cl.includes("at-360-inline--prefixed-")
                                    inline.classList.remove(cl)
                            inline.classList.add("at-360-inline--prefixed-"+that.settings.coverTip.placements.selected.key)

                    ,50)

在第一个视图上，所有这些都可以正常工作，但是如果我尝试打开devtools来检查影子dom，或者将该组件的选项卡打开了一个多小时，我就会发生内存泄漏，选项卡闲荡并且不想重启。最有趣的是：如果我发表评论

 mounted: ->
    @$nextTick ->
        @initSettings()

组件可以在不冻结devtools的情况下工作。但是然后，Visualizer无法设置以前的视觉设置，这是我从服务器获得的。

在我意识到发射器的想法之前，可视化工具通过观察者和具有相同行为的挂片来替换其方法。从观察者到发射者的过渡是我尝试优化性能的失败。您可以在观察者页面上看到此页面，了解应用程序的演示（这是第一个版本，对不起，我们只有俄语本地化）： app.attribution360.ru demo@demo.ru 演示

“КОЛЛТРЕКИНГ”部分出现问题

感谢所有尝试提供帮助的人=）

为什么chrome没有足够的内存来在vue组件中发出某些方法？

0 个答案: