vue在比较大的项目中容易出现内存泄漏的原因是啥？

Posted 2023-04-16

参考技术A

做比较大的项目时候，选择用react而不用vue,vue在比较大的项目中容易出现内存泄漏的原因是什么？
1.object.defineProperty()
如果是加载了很复杂的方法或者数据在data中，object.defineProperty()要监控的属性很多，还有循环之类的操作;当页面跳转的时候，组件会被销毁，但是vue实例不会销毁，data数据挂在在vue实例中，vue实例会挂载越来越多
2.vue中dep(维护依赖项的)
watcher(v-html,v-if)==>用来连接视图层和响应数据层的
MVVM:M(数据)，V(视图)，VM(链接watcher)
每一个指令有一个watcher，每一个watcher,对应的组件有id，
很多id维护到一个数组中，如果项目中用到的v-if很多， v-if触发之后，指令消失，
当数据量很大得时候，消失得指令对应得id可能成为undefined，或者空得数组，数组出现断裂。
造成内存泄漏
2.1.object.defineProperty()能不能监听到数组得变化
object.defineProperty()只能检测到对象一开始得时候得数据所拥有得key
对于数组，设置已监听数据的下标的时候，才会触发
数组push(因为是往后插入数据) 一定不会触发
数组unshift可能会触发
pop或者shift可能会触发
3.keep-alive 原理 保存的是

5.hasProto=\' proto \' in
6.object.defineProperty()只能劫持已有属性，并且需要遍历每一个属性，新增属性需要手动遍历
7.vue中$set原理 内部做了什么 怎么处理
isValidArrayIndex --- 是否是一个有效得索引，是否是一个已存在的索引(例：数组长度3，那么0，1，2就是有效索引)
8.webAssembly 加 ts前端颠覆

import depfrom "../utils/index" ----dep:就是封装的object.defineProperty()的方法
const arrayProto = Array.prototype ----Array构造函数的原型对象
const arrayMethods=object.create(arrayProto) --新对象继承了数组原型对象
遍历需要重写得原始方式，在原有得基础上进行方法扩展，然后用observe重新渲染成响应式数据

（object.create来实现类式继承）

一般程序在Debug版能够运行，在Release版就不能运行，啥原因？

上次调试一个程序的时候，发现使用Debug版，程序就能正常稳定的运行，而Release版就会出现内存泄露的问题，请问这样的问题怎么样解决？是什么地方出错了？

内存泄漏吧，因为debug版本有自己的内存管理所以比较容易掩盖错误，用boundChecker查查吧 参考技术A 你也可以用Visual Leak Detector 这个软件检测内存泄漏，比较专业的。