Vue中如何检测数组变化？

最新推荐文章于 2024-05-25 23:38:20 发布

_处女座程序员的日常

最新推荐文章于 2024-05-25 23:38:20 发布

阅读量1.3k

点赞数

分类专栏： js vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_42931285/article/details/120479403

版权

js 同时被 2 个专栏收录

227 篇文章 1 订阅

订阅专栏

vue

208 篇文章 4 订阅

订阅专栏

地址
有两点需要解释一下：
1.为什么Object.defineProperty是可以监听到数组值变化，而vue没有实现呢？
因为vue编码中是对数组元素进行了监听，但是对数组本身的变化时没有监听。
即就是改变数组里的元素不能监听到，但是数组内的值是对象类型的，修改它依旧能得到监听响应，如改变list[0].val可以得到监听，但是改变list[0]不能，因为没有对数组本身的变化进行监听。这里有点绕，要看源码才能懂。因为obseve中这个方法是对象的属性值进行监听的。而非对象本身。从下面的代码中可以看出：


<!DOCTYPE html>
<html>
  <div>
    name: <input id="name" />
    val: <input id="val" />
    list: <input id="list" />
  </div>
</html>
<script>
// 监听Model下的name属性，当name属性有变化时要引起页面id=name的响应变化
const model = {
  name: 'vue',
  data: {
    val: 1
  },
  list: [1]
};
// 监听函数
function observe(obj) {
  // 遍历所有属性，各自监听
  Object.keys(obj).map(key => {
    // 将object属性特殊处理
    if (typeof obj[key] === 'object') {
      // 是对象属性的再次监听
      observe(obj[key]);
    } else {
      // 非对象属性的做监听
      defineReactive(obj, key, obj[key]);
    }
  })
}
// 利用Object.defineProperty做对象属性的做监听
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      return val;
    },
    set(newVal) {
      // 当有新值设置时，执行setter
      console.log(`${key}变化：从${val}到${newVal}`);
      if (Array.isArray(obj)) {
        document.querySelector(`#list`).value = newVal;
      } else {
        document.querySelector(`#${key}`).value = newVal;
      }
      val = newVal;
      // 新增的属性再次进行监听
      observe(newVal);
    }
  })
}
// 监听model下的所有属性

2.为何Object.defineProperty去监听数组中已存在元素的变化？
处于性能考虑。给每一个数组元素绑定上监听，实际消耗很大，而受益并不大。

_处女座程序员的日常

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中如何检测数组变化？

地址有两点需要解释一下：1.为什么Object.defineProperty是可以监听到数组值变化，而vue没有实现呢？因为vue编码中是对数组元素进行了监听，但是对数组本身的变化时没有监听。即就是改变数组里的元素不能监听到，但是数组内的值是对象类型的，修改它依旧能得到监听响应，如改变list[0].val可以得到监听，但是改变list[0]不能，因为没有对数组本身的变化进行监听。这里有点绕，要看源码才能懂。因为obseve中这个方法是对象的属性值进行监听的。而非对象本身。从下面的代码中可以看出：
复制链接

扫一扫