vue3 关于数据已变化,视图渲染未变化问题(犯了低级错误) 总结

不能动态渲染 写法

1.没有使用vue3封装的代理proxy api （ref shallowRef reactive shallowReactive）

下方代码未使用 proxy代理 vue3 setup return的结果是响应式的才会动态改变

setup(){
    
    
    let isShow = false
    setTimeout(() => {
    
    
      isShow = true
    }, 1500)
    return{
    
    
    isShow
    }
}
    

2.未正确使用vue3封装的代理proxy api （ref shallowRef reactive shallowReactive）

下方代码 通过直接赋值的方式 这种写法未经过 proxy代理 所以vue3 无法监听到数据变化 导致数据未被渲染到页面

setup(){
    
    
    let isShow = ref(false)
    setTimeout(() => {
    
    
      isShow =  ref(true)
    }, 1500)
     return{
    
    
    	isShow
    }
}
    

正确写法

下方代码是 ref 动态响应式的正确写法 这种写法会被proxy 拦截到 从而 被vue3监听到数据改变 而去重新渲染页面

setup(){
    
    
    let isShow = ref(false)
    setTimeout(() => {
    
    
      isShow.value =  true
    }, 1500)
     return{
    
    
    	isShow
    }
}