vue列表渲染视图更新的问题

Question

   <div id="app">
        <ul>
            <li v-for="list in lists">{{list.name}}</li>
        </ul>
        <button @click=change>change</button>
    </div>
    
    <script>
        new Vue({
            el: "#app",
            data: function () {
                return {
                    lists:[
                        {name:1},
                        {name:2},
                        {name:3},
                        {name:4},
                        {name:5},
                        {name:6},
                        {name:7}
                    ]
                }
            },
            methods:{
                change:function(){
                    this.lists.forEach(function(item,index){
                        item.name = 6666;
                    });
                }
            }
        });
    </script>

我这么写是可以生效的，可是我在项目中这么写的时候，经常碰到数据没更新，或者是第一次更新了第二次不更新，搞得我纠结死了。
我想问下一般视图没有更新是什么原因导致的（除了vue官网说的关于数组的那两个）

我刚才看了下我项目里的一个例子：在父元素里使用this.$refs调用了子元素的一个方法，然后这个方法改变了子元素中的数据。第一次视图更新了，然后就再也不更新。我在vue devtools看了下，子元素的数据确实是更新了的，但视图就是不更新，我使用的方法不对？

Answer 1

建议安装vue dev tool 然后查看一下组件的属性值是否正确

Answer 2

有时候更新，有时候不更新，这个就有点诡异了！不知道是不是forEach这个函数去掉了对象的get和set！
不然像下面这样写吧！

change:function(){
    var _this=this;
    this.lists.forEach(function(item,index){
        _this.$set(item, 'name ', 666);
    });
}

Answer 3

// this.lists.forEach(function(item,index){
//    item.name = 6666;
// });

this.lists.map(item=> item.name = 6666);

这么改试试。

Answer 4

不更新还有就是你在dom节点挂载以后去更新data是不会导致页面刷新的。还有之前看到过 浏览器缓存，也会导致页面不更新

Answer 5

试试 Vue.set(item,'name',6666);

Answer 6

是不是有时候更新的数据其实没有变，或者是什么原因影响了点击事件。

https://jsfiddle.net/stardew/...

Answer 7

这问题解决了么？