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

如题所述

第1个回答  2022-06-29

做比较大的项目时候,选择用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 {dep}from "../utils/index" ----dep:就是封装的object.defineProperty()的方法
const arrayProto = Array.prototype ----Array构造函数的原型对象
const arrayMethods=object.create(arrayProto) --新对象继承了数组原型对象
遍历需要重写得原始方式,在原有得基础上进行方法扩展,然后用observe重新渲染成响应式数据

(object.create来实现类式继承)