设计模式(5): vue 不监听绑定的变量

设计模式(5): vue 不监听绑定的变量
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码 

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说设计模式(5): vue 不监听绑定的变量,希望能够帮助大家进步!!!

概述

最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用。

绑定变量

一般情况下,如果我们需要在组件中使用某个变量,会这么使用:

data() { return { myData: [], };
}

如果这个变量是外部变量,例如从外部文件引入的话,就会这么使用:

import { provinces } from '@/util/consts';
export default { data() { return { myData: provices, }; },
}

问题

但是如果这个变量是一个嵌套层级很深,数据量很大的对象的话,如果按照上面那样使用,vue 就会去遍历这个变量的所有属性,来监听这个变量的变化。非常的消耗性能,一个典型的例子是:

export default { data() { return { bannerBg: null, }; }, mounted() { this.loadScript('/js/three.min.js', () => { this.loadScript('/js/vanta.net.min.js', () => { this.bannerBg = window.VANTA.NET({ el: '#bannerBg', color: 0x2197F3, backgroundColor: 0x071E31, }); }); }); }, beforeDestroy() { this.bannerBg.destroy(); }, methods: { loadScript(path, callback) { const script = document.createElement('script'); script.src = path; script.language = 'JavaScript'; script.onload = () => callback(); document.body.appendChild(script); }, },
}

上面的例子中,我们为了避免内存泄漏,在 beforeDestroy 生命周期里面进行回收,而为了获取回收的变量,我们把它绑定给了 this.bannerBg。

但是事实是,我们并不需要监听 this.bannerBg 这个变量,而这么绑定的结果是,这个 vue 组件在 mounted 的时候需要遍历 this.bannerBg 来增加 vue 的监听属性,非常消耗性能

解决方案

所以,我们建议不把 bannerBg 放到 data() 里面去监听,而是直接绑定给 this 就行了。优化后的代码如下:

export default { mounted() { this.loadScript('/js/three.min.js', () => { this.loadScript('/js/vanta.net.min.js', () => { this.bannerBg = window.VANTA.NET({ el: '#bannerBg', color: 0x2197F3, backgroundColor: 0x071E31, }); }); }); }, beforeDestroy() { this.bannerBg.destroy(); }, methods: { loadScript(path, callback) { const script = document.createElement('script'); script.src = path; script.language = 'JavaScript'; script.onload = () => callback(); document.body.appendChild(script); }, },
}

如果这个变量不是过程中生成的,而是初始化的时候生成的,我们建议在 data() 方法里面这么做:

import { provinces } from '@/util/consts';
export default { data() { this.myData = provices; return { // 移到上面去了 // myData: provices, }; },
}

转载于:https://www.cnblogs.com/yangzhou33/p/11470486.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29319

发表评论