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 } } }
