闭包中更新对象变量未生效，请求解答原因及解决方法

你这段代码的问题出在increase函数里的赋值逻辑。虽然count是对象类型，但你在函数里执行data = {...data, value: data.value+1}时，只是把局部变量data指向了一个新创建的对象，并没有修改原来的count对象，也没有让外层的count变量指向这个新对象。所以外层的count完全没变化，页面自然不会更新。

下面给出两种可行的解决办法：

方法一：直接修改原对象的属性 #

不需要创建新对象，直接修改传入对象的value属性，因为对象是引用传递，修改属性会直接作用到原对象上：

<script>
    let count = {value:0};
    const increase = (data)=>{
        console.log(data);
        // 直接修改原对象的属性
        data.value += 1;
    }
    const increment = ()=>increase(count);
</script>

<button on:click={increment}>
    Clicked {count.value}
    {count.value === 1 ? 'time' : 'times'}
</button>

方法二：返回新对象并更新外层变量 #

如果想保持创建新对象的不可变写法，需要让increase返回新对象，然后在increment里把count重新赋值为这个新对象：

<script>
    let count = {value:0};
    const increase = (data)=>{
        console.log(data);
        // 返回新创建的对象
        return {...data,value: data.value+1};
    }
    const increment = ()=>{
        // 更新外层的count变量，指向新对象
        count = increase(count);
    }
</script>

<button on:click={increment}>
    Clicked {count.value}
    {count.value === 1 ? 'time' : 'times'}
</button>

内容的提问来源于stack exchange，提问作者gianglaodai