jQuery ，Vue ， React三者遍历数据渲染页面

最新推荐文章于 2023-12-18 14:46:35 发布

原创

最新推荐文章于 2023-12-18 14:46:35 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #vue.js #react.js

本文探讨了jQuery、Vue和React在遍历数据渲染页面时的差异。jQuery的渲染接近原生JS，Vue和React利用虚拟DOM进行高效更新。Vue的语法简洁，React则更依赖原生JS，两者都通过diff算法优化性能，关键在于使用唯一ID的key。Vue3的diff算法有所改进，与React性能接近。

因为这今年都把中心放在vue和react上面了，突然写jquery代码，感觉自己无从下手了，所以来记录一下自己对这三个框架的循环遍历数据的感悟(主要是怕自己忘了)。

1.jQuery

//先定义一段数据
const list = [
  {
    doing: "进行中",
    time: "2022-08-23 8:00",
    office: "麻醉科",
    operationRoom: "术间1",
    name: "张三",
    operation: "切除鼻息肉",
    operationDoctor: "李鹏鹏",
    anesthetist: "邹小凡",
  },
  {
    doing: "未开始",
    time: "2022-08-23 8:00",
    office: "麻醉科",
    operationRoom: "术间1",
    name: "张三",
    operation: "切除鼻息肉",
    operationDoctor: "李鹏鹏",
    anesthetist: "邹小凡",
  },
  {
    doing: "未开始",
    time: "2022-08-23 8:00",
    office: "麻醉科",
    operationRoom: "术间1",
    name: "张三",
    operation: "切除鼻息肉",
    operationDoctor: "李鹏鹏",
    anesthetist: "邹小凡",
  },
  {
    doing: "未开始",
    time: "2022-08-23 8:00",
    office: "麻醉科",
    operationRoom: "术间1",
    name: "张三",
    operation: "切除鼻息肉",
    operationDoctor: "李鹏鹏",
    anesthetist: "邹小凡",
  },
  {
    doing: "未开始",
    time: "2022-08-23 8:00",
    office: "麻醉科",
    operationRoom: "术间1",
    name: "张三",
    operation: "切除鼻息肉",
    operationDoctor: "李鹏鹏",
    anesthetist: "邹小凡",
  },
  {
    doing: "未开始",
    time: "2022-08-23 8:00",
    office: "麻醉科",
    operationRoom: "术间1",
    name: "张三",
    operation: "切除鼻息肉",
    operationDoctor: "李鹏鹏",
    anesthetist: "邹小凡",
  },
  {
    doing: "未开始",
    time: "2022-08-23 8:00",
    office: "麻醉科",
    operationRoom: "术间1",
    name: "张三",
    operation: "切除鼻息肉",
    operationDoctor: "李鹏鹏",
    anesthetist: "邹小凡",
  },
];
   //定义一个要渲染的字符串
let str = "";
  //循环遍历这个数据
$.each(list, function (i, value) {
  //i代表的是索引，value代表的是每个数据。
  
  str =
    "<tr>" +
    "<td>" +