浅谈vue.js的理解

        vue的脚手架相信很多人都用过，项目用单文件组件进行组装，拼装成各种各样的页面。在不使用单文件组件的时候我们写成这样，就可以将a组件定义为全局组件。

Vue.component('a',{
	template:'<div class="a">{{a}}{{b}}</div>',
	data(){//组件创建之前，默认渲染数据
		return {
			a:1,b:2
		}
	},
	created(){//组件创建之前，但在data函数之后，可以修改默认渲染数据
		this.a=2;
	},
	mounted(){//组件创建完成，可以操作dom
		$('.a').html(3)
	},
	watch:{//监听数据变化，同步其他数据。
		a(curVal,oldVal){
			this.b=curVal;
		}
	}
})

        或者这样，将a组件定义为app组件的子组件。

new Vue({
	el:'#app',
	template:'<app></app>',
	components:{
		a:{
			template:'<div class="a">{{a}}{{b}}</div>',
			data(){
				return {
					a:1
				}
			},
			created(){
				this.a=2;
			},
			mounted(){
				$('.a').html(3)
			},
			watch:{
				a(curVal,oldVal){
					this.b=curVal;
				}
			}
		}
	}
})

        而在.vue文件中

<template>
	<div class="a">{{a}}{{b}}</div>
</template>
<script>
	export defalt {
		data(){
			return {
				a:1
			}
		},
		created(){
			this.a=2;
		},
		mounted(){
			$('.a').html(3)
		},
		watch:{
			a(curVal,oldVal){
				this.b=curVal;
			}
		}
	}
</script>
<style>
</style>

import a from './a.vue'
new Vue({
	el:'#app',
	template:'<app></app>',
	compoents:{a}
})

        因此我猜测vue-loader干了一件事情，a.vue被引入的其实是一个js对象，vue-loader用正则获取template标签中的html片段，并将其输出到该对象中，并将输出的接口改写成有template分支的对象。

        如果说Vue.component是工厂里各种链式生产的机器。那么new Vue则是一个总开关，如果没有new Vue这一步，再多的组件也无法工作。

        组件的本质其实就是一个对象。而Vue这个构造函数则是操作这些对象的机器。父子组件其实就是对象与对象的子对象之间的关系。这些组件本身是没有联系的。即便是有props传参使组件能够通信，也不是组件自己的功劳。只是这些组件告诉了Vue这个构造器。我需要哪些参数从父对象中绑定的数据中去获取到。最终Vue这个构造器运行了之后才建立了组件之间的通信。

        其实，在我们设计软件的时候，也可以利用Vue这种思想。我们所有的业务需求用一个多级对象表示，最后通过一个启动器函数，直接一步执行所有功能。各种框架也正是利用了这种思想，才能够简化代码逻辑，让开发只需要注重业务逻辑。