vue3中retive的错误用法导致数据不跟新

retive的错误用法

<template>
    <div>
        司藤的信息==>{{ objInfo  }}
        <button @click="handerHttpServe">获取远端的值</button>
    </div>
</template>
<script>
import { reactive } from '@vue/reactivity'
export default {
    setup () {
        let objInfo=reactive({ })
        function handerHttpServe(){
            setTimeout(()=>{
                objInfo={
                    name:'司藤',
                    sex:'女',
                }
            },400)
        }
        return {
            objInfo,
            handerHttpServe
        }
    }
}
</script>

为什么无法更新视图呢？？

我们都知道retive是响应式的，
命名是可以去跟新值的。
但是为啥子却更新失败了呢？？
let objInfo=reactive({ })
objInfo虽然是一个对象
但是你赋值却是
objInfo={
    name:'司藤',
    sex:'女',
}
这样的赋值方式是vue检测不到的

解决办法 其一：

setup () {
    let objInfo=reactive({})
    function handerHttpServe(){
        setTimeout(()=>{
            objInfo.name="张三"
        },400)
    }
    return {
        objInfo,
        handerHttpServe
    }
}

解决办法其二

export default {
    setup () {
        let objInfo=reactive({
            obj:{

            }
         })
        function handerHttpServe(){
            setTimeout(()=>{
                objInfo.obj={
                    name:'司藤',
                    sex:'女',
                }
            },400)
        }
        return {
            objInfo,
            handerHttpServe
        }
    }
}

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：晚来南风晚相识

如果文中有什么错误，欢迎指出。以免更多的人被误导。