在线等，挺急的！如何实现类似 vue $set()的功能？跪求！

Question

这个需求有点像是vue3里面的useDatahook这样一个组件：const[arr,setArr]=useState([1,2,3])returnarr.map((value,key)=>(<Inputkey={key}value={value}onChange={newVal=>{setArr(arr.map((rawVal,idx)=>(idx===key?newVal:rawVal)))}}/>))hook了一个非简单类型的数据，在这里是arr，初始值是[1,2,3]本组件接收子组件的onChange事件，生成一个新的arr再交由子组件渲染子组件就是简单的接收一个value，修改的时候把新的值返回给父组件上面的例子里，每次修改都会生成一个新的数组，这里开销能不能减小呢？useReduce不能准确修改某个值，貌似这里也不适用。

Answer 1

最后还是选择了immer这个immutable库，确实和@michael_cai说的一样，新生成数组的开销并不大。
使用immer写起来和命令式编程差不多：
onChange={newVal=>
immer(arr,draft=>{
draft[idx]=newVal
})
}
                            

Answer 2

vue2.0 给data对象新增属性，并触发视图更新

如下代码，给 student对象新增 age 属性

data () {

    return {

        student: {

            name: '',

            sex: ''

        }

    }

}

1

2

3

4

5

6

7

8

众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新

mounted () {

    this.student.age = 24

}

1

2

3

原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。

但是，值得注意的是，网上一些资料写的$set()用法存在一些问题，导致在新接触这个方法的时候会走一些弯路！

错误写法：this.$set(key,value)（ps: 可能是vue1.0的写法）

mounted () {

    this.$set(this.student.age, 24)

}

1

2

3

正确写法：this.$set(this.data,”key”,value’)

mounted () {

    this.$set(this.student,"age", 24)

}