1、拿Vue舉例

（1）數據雙向綁定

別人：教你怎麽使用數據綁定
師兄：數據雙向綁定的原理，自定義數據綁定

（2）vue-router 路由

別人：教你怎麽使用路由
師兄：路由實現的原理，根據實際情況自己設計路由

（3）vuex 狀態管理

別人：教你怎麽使用狀態管理
師兄：狀態管理實現的原理，狀態管理怎麽傳遞合理

2、拿代碼舉例

（1）寫代碼

別人：如何實現邏輯
師兄：代碼就是藝術品，不僅要實現邏輯，還要代碼精簡，有設計模式，要考慮擴展、繼承，要有多人協作的設計思維

（2）代碼實例：三個按鈕，點第一個alert我是第一，點第二個一alert我是第二，點第三個一alert我是第三

一般代碼    
    <script type="text/javascript">
        function fun(type) {
            if(type == 1) alert(‘我是第一‘);
            else if(type == 2) alert(‘我是第二‘);
            else if(type == 3) alert(‘我是第三‘);
        }

    </script>
    <div onclick="fun(1)">一</div>
    <div onclick="fun(2)">二</div>
    <div onclick="fun(3)">三</div>

優質代碼
    <script type="text/javascript">

        function fun(type) {
            switch (type) {
                case 1:
                    alert(‘我是第一‘);
                    break;
                case 2:
                    alert(‘我是第二‘);
                    break;
                case 3:
                    alert(
 
‘我是第三‘);
                    break;
            }
        }

    </script>
    <div onclick="fun(1)">一</div>
    <div onclick="fun(2)">二</div>
    <div onclick="fun(3)">三</div>

藝術代碼    
    <script type="text/javascript">
        var fun = { //代碼美觀，可以擴展，可以繼承
            ‘f1‘: ()=> alert(‘我是第一‘),
            ‘f2‘: ()=> alert(‘我是第二‘),
            ‘f3‘: ()=> alert(‘我是第三‘)
        }
    </script>
    <div onclick="fun.f1()">一</div>
    <div onclick="fun.f2()">二</div>
    <div onclick="fun.f3()">三</div>

不一樣的地方