打赏

vue 不能检测数组长度 值变化原因解析

1、vue不能检测数组长度或者值的变化

（1）数组长度变化 未检测到

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
        <style>
            li:hover {
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <ul>
                <li v-for="item,index in items" v-on:click="handle(index)">
                    <span>{{item.name}}</span>
                    <span>{{numbers[index]}}</span>
                </li>
            </ul>
        </div>
        <script>
            var vm = new Vue({
                el: ".wrap",
                data: {
                    numbers: [0, 1, 2],
                    items: [{
                            name: 'jjj'
                        },
                        {
                            name: 'kkk'
                        },
                        {
                            name: 'lll'
                        },
                    ]
                },
                methods: {
                    handle: function(index) {
                        this.numbers.length = 0;
                        console.log(this.numbers,'view层未渲染，但通过console这个数组可以发现数据确实更新了')
                        //加入下面一行 使得view重新渲染一下 可以看到数组长度变化了
                        //this.items[0].name = 'abc';
                    }
                }
            });
        </script>
    </body>

</html>

（2）数组值变化 未检测到

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
        <style>
            li:hover {
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <ul>
                <li v-for="item,index in items" v-on:click="handle(index)">
                    <span>{{item.name}}</span>
                    <span>{{numbers[index]}}</span>
                </li>
            </ul>
        </div>
        <script>
            var vm = new Vue({
                el: ".wrap",
                data: {
                    numbers: [0, 1, 2],
                    items: [{
                            name: 'jjj'
                        },
                        {
                            name: 'kkk'
                        },
                        {
                            name: 'lll'
                        },
                    ]
                },
                methods: {
                    handle: function(index) {
                        this.numbers[index] = 100;
                        console.log(this.numbers, 'view层未渲染，但通过console这个数组可以发现数据确实更新了')
                        //加入下面一行 使得view重新渲染一下 可以看到数组长度变化了
                        //this.items[0].name = 'abc';
                    }
                }
            });
        </script>
    </body>

</html>

2、不能检测到数组长度或者值变化的原因（官方说明）

https://cn.vuejs.org/v2/guide/list.html#对象更改检测注意事项

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

数组的index和length属性没有绑定 get和 set方法。

3、vue解决方法

示例

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
        <style>
            li:hover {
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <ul>
                <li v-for="item,index in items" v-on:click="handle(index)">
                    <span>{{item.name}}</span>
                    <span>{{numbers[index]}}</span>
                </li>
            </ul>
        </div>
        <script>
            var vm = new Vue({
                el: ".wrap",
                data: {
                    numbers: [0, 1, 2],
                    items: [{
                            name: 'jjj'
                        },
                        {
                            name: 'kkk'
                        },
                        {
                            name: 'lll'
                        },
                    ]
                },
                methods: {
                    handle: function(index) {
                        //数组值变化
                        //this.$set(this.numbers, index, 100)
                        
                        //数组长度变化
                        this.numbers.splice(0)
                    }
                }
            });
        </script>
    </body>

</html>

4、具体原理--性能问题

https://segmentfault.com/a/1190000015783546

就是因为vue的get和set方法没有绑定数组的index（下标）和length属性。

 

posted @ 2018-09-03 16:13  孟繁贵  阅读(5206)  评论(0)  编辑  收藏  举报
TOP