[JavaScript知识库] Vue中如何检测数组变化？

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue中如何检测数组变化？ -> 正文阅读

[JavaScript知识库]Vue中如何检测数组变化？

地址
有两点需要解释一下：
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下的所有属性