在 San 组件中，对数据的变更需要通过set 或 splice 等方法，实现用最简单的方式，解决兼容性的问题，同时为了保证数据操作的过程可控，San 的数据变更在内部是 Immutable 的，因此遇到数组深层做数据交换时直接 set 数据会发现没有触发视图的更新

场景描述

  1. class MyApp extends san.Component {
  2.     static template = `
  3.         <div>
  4.             <div 
  5.                 style="cursor: pointer"
  6.                 on-click="handlerClick($event)">点我交换数据</div>
  7.             <ul>
  8.                 <li s-for="item in list">{{item.title}}</li>
  9.             </ul>
  10.         </div>
  11.     `;
  12.     initData() {
  13.         return {
  14.             list: [
  15.                 {
  16.                     title: 'test1'
  17.                 },
  18.                 {
  19.                     title: 'test2'
  20.                 }
  22.             ]
  23.         };
  24.     }
  25.     handlerClick() {
  27.         // 想交换两个值
  28.         let firstNews = this.data.get('list');
  29.         let firstData = firstNews[0];
  30.         let secondData = firstNews[1];
  31.         firstNews[1] = firstData;
  32.         firstNews[0] = secondData;
  34.         // 在这里直接set数据发现并没有触发视图的更新
  35.         this.data.set('list', firstNews);
  36.     }
  37. }
  39. let myApp = new MyApp();
  40. myApp.attach(document.body);

原因分析

San 的 data 的数据是 Immutable 的，因此 set firstNews 时变量的引用没变， diff 的时候还是相等的，不会触发更新。

解决方式如下

See the Pen
数组深层更新触发视图更新
by solvan(@sw811) on
CodePen.