组件共享 与不共享的区别！！！

JavaScript对象是引用关系，所以如果return出的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步：

             <div id="app">
		<my-component></my-component>
		<my-component></my-component>
		<my-component></my-component>
	</div>
	<script>
		var data = {
			counter:0
		};
		Vue.component('my-component',{
			template: '<button @click="counter++">{{counter}}</button>',
			data:function() {
				return data;
			}
		});
		var app=new  Vue({
			el: '#app'-
		})
	</script>
 结果：同时进行点击，三者一体!
 示例图：

组件使用了3次，但是点击任意一个button，3个的数字都会加1，那是因为组件的data引用的是外部对象，这肯定不是我们期望的效果，所以给组件返回一个新的data对象来独立，示例代码：

             <div id="app">
		<my-component></my-component>
		<my-component></my-component>
		<my-component></my-component>
	</div>
	<script>
		Vue.component('my-component',{
			template:'<button @click="counter++">{{counter}}</button>',
			data:function(){
				return{
					counter:0
				};
			}
		});
		var app=new Vue({
			el:'#app'
		})
	</script>
 结果：三者不同，点击三个分别显示不同数据   	
 示例图：

—————————————————————————————————————————————————————
注意事项：博文的质量普通，仅供参考。盲目复制，处处是坑，三思后行！