vue教程中有这样一个注意事项：
第一种具体情况如下：
运行结果：
当利用索引改变数组某一项时，页面不会刷新。解决方法如下：
运行结果：
三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。
在做项目的过程中，有个发现，先上代码：
第一个数组通过利用下标改变第二项，第二个数组使用$set()方法改变第二项，根据上面的代码，我们会知道：第一个数组的第二项改变不会在页面更新，只有第二个数组的更改会在页面更新。然而结果却是：
两个数组的的改变都在页面更新了。。
也就是说，$set()方法调用时，页面会全部更新一遍。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script src="vue.js"></script>
- <style>
- .blue {
- color: blue;
- }
- </style>
- </head>
- <body>
- <div id="example-1">
- <ul>
- <template v-for="item in items">
- <li>
- {{$index}}.{{ item.msg }}
- <button v-on:click="f5(item)">vm.items.splice(index, 1)</button>
- <button v-on:click="f6(item)">vm.remove</button>
- </li>
- </template>
- </ul>
- <ul>
- <li>
- <button v-on:click="f1">vm.items[0] = {} 失效</button>
- </li>
- <li>
- <button v-on:click="f2">vm.items.$set(0, { childMsg: 'Changed!'}) </button>
- </li>
- <li>
- <button v-on:click="f3">vm.items.length = 0 失效</button>
- </li>
- <li>
- <button v-on:click="f4">vm.items={}</button>
- </li>
- </ul>
- <div class="blue">
- {{$data | json }}
- </div>
- <pre>
- 因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：
- 直接用索引设置元素，如 vm.items[0] = {}；
- 修改数据的长度，如 vm.items.length = 0。
- </pre>
- </div>
- <script>
- var vm = new Vue({
- el: '#example-1',
- data: {
- items: [{
- msg: 'Foo'
- }, {
- msg: 'Bar'
- }, {
- msg: 'George'
- }]
- },
- methods: {
- f1: function() {
- vm.items[0] = {}; // 失效
- },
- f2: function() {
- vm.items.$set(0, {
- childMsg: 'Changed!'
- })
- vm.items.$set(2, {
- msg: 'dongtao!'
- })
- },
- f3: function() {
- vm.items.length = 0; // 失效
- },
- f4: function() {
- vm.items = {}
- },
- f5: function(item) {
- var index = this.items.indexOf(item) //Search an array for the item
- if (index !== -1) {
- this.items.splice(index, 1) //Selects a part of an array, and returns the new array
- }
- },
- f6: function(item) {
- this.items.$remove(item)
- }
- }
- })
- </script>
- </body>
- </html>