Vue基础之数组更新

Vue的核心是数据与视图的双向绑定，当我们修改数组时，Vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。Vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新：

• push()

• pop()

• shift()

• unshiht（）

• splice()

• sort()

• reverse()

使用以上方法会改变被这些方法调用的原始数组，有些方法不会改变原数组，例如：

• filter()

• concat()

• slice()

它们返回的是一个新数组，在使用这些非变异方法时，可以用新数组来替换原数组。例如:

     <div class="p1">
		<ul>
			<li v-for="item in fruit">
			      <ul>
				<li v-for="value in item">{{value}}</li>
			      </ul>
			</li>
		</ul>
		<hr/>
		<ul>
			<li v-for="item in sortArray">
			      <ul>
				<li v-for="value in item">{{value}}</li>
			      </ul>
			</li>
		</ul>
	</div>
 </body>
 <script type="text/javascript">
     var vm=new Vue({
          el:document.querySelector(".p1"),
	  data:{
	      fruit: [{"id":"1001","name":"橘子1","price":"2.0"},
		    {"id":"1001","name":"橘子","price":"2.0"},
		    {"id":"1001","name":"橘子33","price":"2.0"}]
	  },
	
	  computed:{
	      sortArray:function(){
		    return this.fruit.sort(function(a,b){
		        return a.name.length-b.name.length;//当大于零时b就会放在a前面 等于零时 a，b的相对位置不变 当小于零时a就会放在b前面
		    });
	      }
	  }
     })
]</script>

 还是之前展示水果信息的示例，我们找出含有橘子1关键词的书目，例如：

 <div class="p1">
		<ul>
			<li v-for="item in fruit">
			      <ul>
				<li v-for="value in item">{{value}}</li>
			      </ul>
			</li>
		</ul>
		<hr/>
		<ul>
			<li v-for="item in sortArray">
			      <ul>
				<li v-for="value in item">{{value}}</li>
			      </ul>
			</li>
		</ul>
	</div>
 </body>
 <script type="text/javascript">
     var vm=new Vue({
          el:document.querySelector(".p1"),
	  data:{
	      fruit: [{"id":"1001","name":"橘子1","price":"2.0"},
		    {"id":"1001","name":"橘子","price":"2.0"},
		    {"id":"1001","name":"橘子33","price":"2.0"}]
	  },
	
	  computed:{
	      sortArray:function(){
		    return this.fruit.sort(function(a,b){
		        return a.name.length-b.name.length;//当大于零时b就会放在a前面 等于零时 a，b的相对位置不变 当小于零时a就会放在b前面
		    });
	      }
	  }
     })

vm.fruit= vm.fruit.filter(function (item) { return item.name.match(/橘子1/); }); 
</script>

只显示了书名中含有JavaScript的选项。Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化地复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。

• 通过索引直接设置项，比如vm.fruit[3]= { ... }.

• 修改数组长度，比如vm.fruit.length= 1

添加数组中的元素也可以用vue内置的set方法,例如:

Vue.set(vm.fruit, 3, { name: ’..’，price：’....’ } ) ,

如果是在webpack中使用组件化的方式，默认是没有导入Vue的，这时可以使用$set，例如：this.$set(vm.fruit, 3, { name: ’..’，price：’....’ } ) ／／这里的this指向的就是当前组件实例，即vm。在非webpack模式下也可以用$set方法，例如vm.$set( ... )。

注:set方法除了这种使用外，还可以往对象里新增属性。

另一种方法：

vm.fruit.splice(3, 1, { name: ’..’，price：’....’ })