vue如何对数组做响应式的

最新推荐文章于 2024-08-13 09:58:51 发布

gongyexj

最新推荐文章于 2024-08-13 09:58:51 发布

阅读量1.3k

点赞数

分类专栏：前端进阶文章标签： vue.js 前端

本文链接：https://blog.csdn.net/gongye2019/article/details/119194277

版权

这篇博客深入探讨了Vue.js如何实现对数组的响应式处理，从响应式处理的入口、数组响应式处理的入口，到具体的处理步骤和需要注意的点，如fill、copyWithin方法不触发更新，以及通过索引和修改length属性不更新视图的情况。文章还提到了依赖收集的关键时机。

摘要由CSDN通过智能技术生成

你在面试中，有没有被问到vue是如何对数组做响应式处理的呢？

1、找到响应式处理入口

进入页面，Vue开始初始化，执行new Vue()，进入到Vue的构造函数中，在构造函数中执行了_init()方法。

在_init()这个方法中，调用了initState()方法 => 在initState()方法中，调用了initData()方法 => 在initData()方法中，调用了observe()方法。

observe()方法就是Vue进行响应式处理的入口。

2、找到数组响应式处理入口

在observe()方法中，创建了Observer实例，在创建Observer实例的过程中，对传入的数据进行了判断，如果是数组，单独对数组进行处理，如果不是数组，调用walk方法对数据进行响应式处理。本文只关心对数组的处理，源码如下（已精简）

constructor (value: any) {
   
	// 如果是数组，对数组进行特殊处理
    if (Array.isArray(value)) {
   
      // 判断浏览器是否支持原型 __proto__ 下面两个方法实质处理方式是一样的
      if (hasProto) {
   
        protoAugment(value, arrayMethods)