在编写前端页面遇到一个错误，关于响应式变量报错的问题

Vue响应式更新机制

遇到的问题

<div class="title">
  <h2>当前设置目标值</h2>
</div>
<div v-if="redPacketRecords.id > 0" class="record-item">
  <!-- 内容 -->
</div>


data() {
    return {
        redPacketRecords: null
    }
}

提示

这样写初看没有什么问题，但是一直报错

问题的原因

在组件初次渲染时，Vue 立即执行模板的表达式，此时 redPacketRecords是null,
 null.id 就会抛出错误：

Cannot read property 'id' of null


我原来认为  ”等数据加载完之后在显示“ ，但Vue的模板在首次渲染就会求值的表达式，
不会等待数据初始化，即使后续更新，第一次失败导致组件崩溃，已经不管用了

解决方案

<div v-if="redPacketRecords?.id > 0" class="record-item">


?. ：如果 redPacketRecords结果为null 或是 undefined 直接返回 undefined ,不在访问 id ,安全跳过

总结

重要

Vue 并不会在数据变更的瞬间立即更新 DOM，而是将所有变更收集起来，在“下一个 tick”统一执行更新。

tick :Vue 将响应式数据变更批量处理并更新 DOM 的那个“异步时机”

版权所有

版权归属：念宇

许可证：署名-非商业性-禁止演绎 4.0 国际 (CC-BY-NC-ND-4.0)