Vue.set

发表于 | 更新于 | 分类于 | 评论数：

先举个调用构造器外数据的小栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
    <div id="app">{{count}}</div>
    <button onclick="add()">add</button>
    <!-- 因为按钮在vue实例外，所以采用原声js方法onclick -->
    <script>
        var outData = {
            count: 1,
            goods: 'car'
        }
        //注意这个数据放在vue构造器外
        function add(){
           // Vue.set(outData,'count',2) 且该方法只能让他变成2
           //app.count++
            outData.count++
        }
        var app = new Vue({
            el: '#app',
            data:outData//构造器外数据
             })
    </script>
</body>

由上述代码可见，想要调用构造器外数据由三种方法可行，那么为什么vue.set还有他存在的意义而且在开发中还很常用呢？看下面栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <div id="app" >
        {{count}}
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>
    <button onclick="add()">add</button>
    <script>
        var outData = {
            count: 1,
            arr: ["aaa","bbb","ccc"]
        }
       function add(){
           // outData.count++,
           //outData.arr[1]="b"
           Vue.set(outData.arr,1,'b')//注意中间1的写法
            }
        var app = new Vue({
            el: '#app',
            data:outData
            })
    </script>
</body>

解析：当不用Vue.set时，如果不设置改变count值，因为js本身限制，vue也就检测不到数组的改变包括数组长度或数组内元素变化，这个时候vue.set的存在就显得很必要，不用设置count变化,vue也能检测到数组变化，因此在上面代码的注释都取消，不用vue.set也行，但显然当我们不想引入count时，vue.set是最好的选择

-------------本文结束感谢您的阅读-------------