详解Vue依赖收集引发的问题

问题背景

在我们的项目中有一个可视化配置的模块，是通过go.js生成canvas来实现的。但是，我们发现这个模块在浏览器中经常会引起该tab页崩溃。开启chrome的任务管理器一看，进入该页面内存和cpu就会暴涨，内存经常会飙到700多M。但是我们的canvas实际的像素只有约500x500，根据一些粗略的计算，大概只占了1M的内存，这个计算过程可参考100*100的 canvas 占多少内存。那么我们这700M内存是哪里来的呢？

定位问题

我们可以使用chrome开发者工具来分析我们的调用栈。这边我是先通过Performance来帮助我们定位问题，它会帮我们生成一段过程中一些数据的变化，包括js堆内存、dom节点数量、动画帧等数据，如图：

这是切换至一个canvas画布较大的一个模块的performance分析表现，可以看到占用了472M的内存。下面折线图蓝色部分是js堆内存的变化，而Main下面黄色与紫色的矩形框就是我们的调用栈，上下两部分是按照时间一一对应的。可以看到，蓝色的折线呈高低起伏的态势，GC回收之后低点基本和高点持平，因此可以断定几乎不存在内存泄漏的问题。然后我们可以放大去看一看，内存升高的时候，js做了些什么事情，找一找规律。

我们随机找一段内存增长的区域，可以看到在内存增长的过程中，最为频繁调用的就是Observer相关的代码。但是就这么看，我们不能够明白Observer是在干什么。此时我们可以借用Memory选项中的Allocation Sampling按照javascript function来查看内存分配，我们同样录制以上的一段操作。

此时我们能够清楚的看到，的确是这个Observer在作怪。同时，我们可以看到这是vue的代码，点击右边的文件查看source code，就可以清楚的明白这就是vue在执行依赖收集的操作，此时会给属性添加watcher。那我们这里为什么会有如此多的属性被添加了watcher呢？看了一下代码，原来是我把go.js的一个实例挂到了vue的data选项中，放到data中的属性会被vue执行依赖收集的相关操作，而这个实例拥有非常多的嵌套属性，全部都会被添加watcher。其实，我们只是想单纯的存储一下这个实例，供我们后续调用其相关的方法，添加watcher对我们来说完全没有意义，那我们如何避免这样的问题呢？

解决问题

上网搜索了相关的解决方案，大概有如下几种：

  1. 在data中定义的属性前面加上$，即通知vue该属性不需要被依赖收集，例如：javascript data() { return { $goDiagram: null } }但是这样声明，在template中引用时会报找不到$goDiagram属性的错误，具体的原因我还没深究，有空可以研究一下。
  2. 不在data中声明，直接在赋值的时候声明this.goDiagram = diagram。这同样会遇到第一种方案的问题，模板中会提示找不到goDiagram属性。
  3. 不在data中声明，而是利用$options来存储goDiagram，例如：
export default {
 goDiagram: null,
 mounted() {
  this.$options.goDiagram = xxx
 }
}

这应该是比较好的一个方法，vue官方中也说明了$options用来包含自定义属性，例如我们平时引入的常量或是枚举类型，我们也不希望它们被添加无意义的watcher，因此可以通过这种方式来定义，在template中引用时只需要{{$options.xxx}}即可。这种方式唯一的缺点就是不能像data那样一眼望去就能清楚地知道你定义了什么属性。
项目中我采用了第一种方式，经过修改后内存占用量减少到原来的1/5到1/6，可以说效果非常好，再也不会出现浏览器崩溃的情况了。

总结

通过这样的一个问题，我们主要能够学习到两点：

  1. 如何通过chrome的开发者工具，去快速地定位代码中存在的内存问题
  2. 不要盲目的将属性都挂载到data选项中，一些常量我们可以采取上面提到的几种方式来定义，以此来作为一种优化手段

以上所述是小编给大家介绍的Vue依赖收集引发的问题详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue实现双向绑定和依赖收集遇到的坑

    在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心 在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍. 敲完后,发现完全无法运行,  坑啊,  写书人完全没有测试过. 然后自己完善代码, 越写越发现坑, 问题有些大...... 最后自己重新实现了一遍,代码较多. 用到观察订阅者模式实现依赖收集, Object.defineProperty() 实现双向绑定 /* 自己写的代码, 实现vue的双向绑定和依赖收集 场景: 多个子组件用到父

  • 简单实现vue中的依赖收集与响应的方法

    开始 声明一个对象man,可以视为vue中的data let man = { height: 180, weight: 70, wealth: 100000000 } 添加Observer 作用在于将参数对象的属性变为响应式,只要对象的属性被读取或者被修改都能观察到.然后新建一个Observer实例,将man作为参数扔进去.这里的proxyData是将man的属性代理到以man为参数的Observer实例上去. class Observer { constructor(obj) { this.w

  • 详解Vue依赖收集引发的问题

    详解Vue依赖收集引发的问题

    问题背景 在我们的项目中有一个可视化配置的模块,是通过go.js生成canvas来实现的.但是,我们发现这个模块在浏览器中经常会引起该tab页崩溃.开启chrome的任务管理器一看,进入该页面内存和cpu就会暴涨,内存经常会飙到700多M.但是我们的canvas实际的像素只有约500x500,根据一些粗略的计算,大概只占了1M的内存,这个计算过程可参考100*100的 canvas 占多少内存.那么我们这700M内存是哪里来的呢? 定位问题 我们可以使用chrome开发者工具来分析我们的调用栈.

  • 详解Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做了一个项目,然后通过项目中的一些案例进行总结. 今天我们来说说 Vue 中的内容分发 <slot> ,首先 Vue 实现了一套内容分发的 API,这套 API 是基于当前的 Web Components 规范草案,将 <slot> 元素作为承载内分发内容的出口,内容分发是 Vue 中一

  • 详解Vue中的watch和computed

    前言 对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in

  • 详解Vue的异步更新实现原理

    详解Vue的异步更新实现原理

    最近面试总是会被问到这么一个问题:在使用vue的时候,将for循环中声明的变量i从1增加到100,然后将i展示到页面上,页面上的i是从1跳到100,还是会怎样?答案当然是只会显示100,并不会有跳转的过程. 怎么可以让页面上有从1到100显示的过程呢,就是用setTimeout或者Promise.then等方法去模拟. 讲道理,如果不在vue里,单独运行这段程序的话,输出一定是从1到100,但是为什么在vue中就不一样了呢? for(let i=1; i<=100; i++){ console.

  • 详解Vue数据驱动原理

    详解Vue数据驱动原理

    前言 Vue区别于传统的JS库,例如JQuery,其中一个最大的特点就是不用手动去操作DOM,只需要对数据进行变更之后,视图也会随之更新. 比如你想修改div#app里的内容: /// JQuery <div id="app"></div> <script> $('#app').text('lxb') </script> <template> <div id="app">{{ message }

  • 详解vue computed的缓存实现原理

    目录 初始化 computed 依赖收集 派发更新 总结一下 本文围绕下面这个例子,讲解一下computed初始化及更新时的流程,来看看计算属性是怎么实现的缓存,及依赖是怎么被收集的. <div id="app"> <span @click="change">{{sum}}</span> </div> <script src="./vue2.6.js"></script> &

  • 详解VUE 数组更新

    1.数据方法分类: (1)原数组改变 push  pop  unshift  shift  reverse  sort  splice (2)原数组未变,生成新数组 slice  concat  filter 对于使原数组变化的方法,可以直接更新视图. 对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化. 示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&

  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

  • 详解Vue Cli浏览器兼容性实践

    浏览器市场占有率 在处理浏览器兼容性问题之前,我们先来看一下现在的浏览器市场份额是怎样的,

随机推荐