我们在编写js代码时,给某个变量赋值了，但刷新页面却还是原来的数据，遇到这样的情况我们要分析出现这种情况的原因。

首先我们先检查一下是否动态的给某个对象绑定了属性;
vue是不能直接给对象绑定动态属性的，但我们有时候又需要动态绑定属性，比如给购物车的商品对象动态绑定一个是否勾属性。
这时我们就要用到vue的$set方法，this.set(this.shopItem,“checked”,false);
还有就是组件数据没更新的情况
这时候需要我们手动更新组件数据，有两种方法

1. 当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题

<template>
   <to-comp v-if="reFresh"/>
</template>
 
<script>
   export default{
       data(){
          return {
                resh:true,
                billList:[]
            }
       },
       watch:{
             billList(){
 
                  this.resh= false
                  this.$nextTick(()=>{
                    
                    this.resh = true
                })
            }
       }
}
</script>

2. 通过vue key 实现，原理官方文档。所以当key 值变更时，会自动的重新渲染。

<template>
   <to-comp :key="menuKey"/>
</template>
 
<script>
   export default{
       data(){
          return {
                key:1
            }
       },
       watch:{
             menuTree(){
 
                ++this.key
            }
       }
}
</script>

推荐使用第二种
最后就是常规方法
不管三七二十一套上去看看

1. this.$nextTick(()=>{…需要更新的数据}）拿到最新数据
2. this.$forceUpdate()强制刷新，简单粗暴
3. setTimeOut(()=>{…处理数据})放在定时器里是防止有些异步数据还没请求到就做处理了
   最最后，在页面上随便打印点东西，看是否操作错了页面