用Vue写购物车后，对this的理解

    最近在学习vue，其中对购物车的编写有点感悟。先来看看简单的业务代码

	
	
	
	
	
	


	

		
{{name}}的购物车
			
清单总数{{items.length}}
			
未采购数{{count}}
		
		

			
			
			
			添加
		
		

			

				

					
清单名称
					
已采购
					
状态
					
删除
				
			
			

			
				

					
					
{{item.action}}
					
					

					
					
{{item.state}}
					
					
删除
				
			
		
	
	
	
	

    这里我在代码已经进行基本的解释。主要说说爬的坑，this的指向。

    相信大部分的同学都了解过this指向的是new Vue这个对象，那么我这里就是指向app了。

    这样说起来，这是什么鬼？指向app了？那么像addList,myCount,del方法（函数）究竟是怎么操作的呢？

    就上面的addList的this.text为例子，这里的this确实是app（#myShoppingCart）。因为 text 用v-model双向绑定，而我们的this.text == '';能够起到效果就是最好的证明.

    正当我也是这么认为的时候，大坑就来了。没错，myCount方法这样写的时候，未采购数没有任何变化。有兴趣的同学可以将112~119行代码换成以下代码进行验证。

myCount: function(){
    this.count = 0;
    //对当前所有items进行遍历
    this.items.forEach(function(el, index){
	if(!el.state) this.count++
    })
},

    经过对比两次代码是因为用了_this = this,那么为什么要这样做呢？为什么就是myCount方法这样用，其他方法不这样用。一开始我也实在爬不出这坑（原谅我是菜鸟，而且又不报错，这就千言万语说不出来了），还好就只有那么几句代码，聚句百度、Google，终于找到了forEach这个原因。根据搜索到资料：'forEach循环体是以一个函数体的形式去循环的，this是会改变的’。

    根据前半句，我就完全懵逼了，但是，我知道是this指向发生了改变，那么只要将之前的this储存起来不就好了。所以就有了_this = this。

    同时，这个forEach浪费了我那么多时间，我也为了避免再次掉坑，就专门回去看一遍forEach的用法，然后百度了一下，发现一下这篇文章写的不错，专门说了下this的问题，详情查看以下文章。