由于我自己实话说也算不上所谓的这方面技术大牛（但我会坚持朝这个方向靠拢），所以本篇文档并不会给你介绍三种框架的内部实现和底层原理！本文档只会从他们之间的共同点、思想上来说明一下他们之间的区别，从而告诉你在分别学习这个三个框架的时候有的放矢！

注：文档都是建立在我自己在开放过程中一些实际操作上，所以跟你自己实现上有点区别，请知悉！

首先说下三个框架都有组件的概念，首先说一下组件到底是个什么东西，以及在三个框架中怎么去理解他们！按我自己的理解，组件就是一个个独立的单元，里面封装了一些特定的功能，这样一些组件可是实现复用！形象地作一个比喻：如何把一个人看作一个整体，那么你可以理解成这个人是由眼睛、鼻子、嘴巴以及穿衣等等构成的，这些每个独立的功能单元你就可以把它理解成组件，更有甚者，一个html文件，每个标签也可以看作一个组件，由这些组件构成了我们的html文档。好，我们来分别看看三个框架是怎么封装一个组件的！

• angular1:严格来说，angular是没有组件这样一个概念的，但是它可以通过指令去封装一些特定功能的单元，从而实现类似其它框架的组件功能。如：

    .directive('customComponent',function(){
        return {
            restrict:'EA',
            template:'<div></div>i am directive,i can encapsulate some features</div>',
            scope:{}
        };
    });

• vue:vue是有组件的概念的，vue的组件概念其实跟angular的指令差不多，只不过更形象的一点。有两种方法可以实现组件：

    <div id="app"></div>

• react:在react中，最核心的就是组件概念了，因为react的思想就是专注于ui层，通过构建组件，来构成我们的用户界面。我们来看一下在react中怎么实现组件。

    <div id="app"></div>

    function CustomComponent(props){
        return (<div>
        </div>);
    };
    ReactDOM.render(
        <CustomComponent />,
        document.getElementById('app')
    );

• angular:在angular中需要实现数据共享的地方主要是各个控制器彼此之间传输数据了！其实原理就是就是在各个控制器之间通过广播、或者发射事件实现数据的传播。父、子控制器通过broadcast广播事件由父组件向子组件传递数据，通过emit发射事件由子组件向父组件中传递数据。如：

    angular.module('myApp',[])
    .run(function($rootScope){
        $rootScope.$on('hehe',function(e,d){
            console.log(d);
        });
    })
    .controller('controller1',function($scope){
        $scope.ctrol1 = {};
        $scope.ctrol1.msg = 'this is controller1 message';
    })
    .controller('controller2',function($scope){
        $scope.ctrol2 = {};
        $scope.$on('boom',function(e,d){
            console.log(d);
        });
        $scope.ctrol2.msg = 'this is controller2 message';
    });

当然了，其实我们也可以通过服务来共享数据，如：

    <div ng-app="app1">
        <div ng-controller="controller1" ng-click="click()">
            {{msg}}
        </div>
        <div ng-controller="controller2" ng-click="click()">
            {{msg}} {{getData}}
    </div>