请抛弃reactive，直接使用ref！

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

之前我一直秉承着一个原则，就是————简单的数据用ref，复杂的数据用reactive。并且ref也是无法处理复杂数据的，给它赋值一个复杂数据，ref都是交给reactive去处理的。所以我就一直沿用这个原则，直到我在请求数据赋值的时候，发现了差异。

我们在定义数据的时候，都是给先声明，比如一个数组，一个对象。这里先用reactive来演示，这里我就写得复杂一点。

let arr = reactive({
    name: '空',
    friends: {
        tom: {
            hoby: '空',
        },
    },
})

并且绑定html

    <h1>{{ arr.name }}{{ arr.friends.tom.hoby }}</h1>

然后用定时器模拟请求后赋值

const obj = {
    name: '有数据了',
    friends: {
        tom: {
            hoby: '有数据了',
        },
    },
}

setTimeout(() => {
     arr.friends.tom.hoby = obj.friends.tom.hoby
     arr.name = obj.name
}, 2000)

我们可以看到，这种这么长的数据，比如要层层赋值才行。而如果我们直接赋值，则页面丢失响应式，原因也很简单，因为地址变了。

setTimeout(() => {
    arr = obj
}, 1000)

但是用ref定义的数据

let arr = ref({
    name: '空',
    friends: {
        tom: {
            hoby: '空',
        },
    },
})

我们直接赋值就可以了

setTimeout(() => {
    arr.value = obj
}, 1000)

页面保持响应式。

不过用shallowRef，性能会更好一点。