vue ，v-for循环对象，不是深度克隆？ 数据改变了但是页面元素没有更新。问题解决

2021年3月28日更新 更新

哈哈哈哈，转眼都过了两年半了，博客园也一年多没登录了，原来还写过这么小白的随笔。

正题：

vue2 响应式实现原理基于，object.definePrototype

他的缺点

1、只能监听对象的某个已有的属性

2、不能监听数据

所以更新删除未定义的属性需要调用vue内置 的 this.$set , this.$delete

以下内容可以不用看了

     <div  >
                <ul >
                        <li 
                        v-for="(val,key,idx) in list" 
                        >
                                {{key}}
                                {{val}}
                                {{idx}}
                        </li>
                </ul>
        </div>
        

        <script>
                var app = new Vue({
                        el: '#app',
                        created(){
                                setTimeout(()=>{
                                        this.listp["1"] = [
                                                0,1,2,3,4,5
                                        ]
                                },1500)
                        },
                        data: {
                                list:{},
                                current:1
                        },
                        methods:{
                
                        }
                })

        </script>

这个例子延迟1.5s之后数据并没有被渲染上dom。

研究了一番，用watch监听 变量 【list】，发现如果不开启【deep:true】 深度监听，watch 也监听不到【list】的改变；

那可能v-for是因为没有深度监听，所以监听不到。

但是也没有找到v-for关于深度监听的设置。

所以直接釜底抽薪，改变写法：

var app = new Vue({
  el: '#app',
  created () {
    setTimeout(() => {
      let old = Object.assign({}, this.list) // 浅克隆this.list
      old['1'] = [  0, 1, 2, 3, 4, 5  ];
      this.list = old ; // 直接改变 this.list
    }, 1500)
  },
  data: {
    list: {}
  },
  methods: {}
})

这样写 数据变化以后 页面元素就相应发生改变了。

有大神有更好的办法 ，希望不吝赐教。