LOGO

数组深层更新如何触发视图更新？

编辑本文

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

场景描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class MyApp extends san.Component {
    static template = `
        <div>
            <div 
                style="cursor: pointer"
                on-click="handlerClick($event)">点我交换数据</div>
            <ul>
                <li s-for="item in list">{{item.title}}</li>
            </ul>
        </div>
    `;
    initData() {
        return {
            list: [
                {
                    title: 'test1'
                },
                {
                    title: 'test2'
                }

            ]
        };
    }
    handlerClick() {
        
        // 想交换两个值
        let firstNews = this.data.get('list');
        let firstData = firstNews[0];
        let secondData = firstNews[1];
        firstNews[1] = firstData;
        firstNews[0] = secondData;

        // 在这里直接set数据发现并没有触发视图的更新
        this.data.set('list', firstNews);
    }
}

let myApp = new MyApp();
myApp.attach(document.body);

原因分析

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

解决方式如下

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

© 2021 Baidu EFE