怎样快速的去掌握一个框架

[yaowq]

怎样快速的去掌握一个框架？这个问题，不同的人也许会有不同的答案，毕竟条条大路通罗马。接下来，我来谈一下自己的实践经历。

框架	入门花费时间	使用时间	项目
AngularJs	一周	两年	Hybrid APP(ionic)、管理系统（>=IE8）
Vue	一天	半年	管理系统（>=IE9），微信公众号
React	半天	半年	钉钉移动端开发
MINA	扫了一眼	三个月	微信小程序

你会发现，学习的速度是越来越快，那么怎样快速掌握一个框架呢？一言以蔽之：“有针对性的寻找特性”。首先，不论是什么技术都要解决项目中的所有相关问题，只不过解决策略有差异而已。例如：

1. angularjs有路由帮我们组织应用，那vue里面用什么呢？
2. angularjs有过滤器帮我们解决格式化显示数据的问题，那么vue里面有没有呢？
3. angularjs有拦截器帮我们处理一些公共的操作，那......
   .
   .
   .
   等等这些问题会指引着我们快速深入的去了解新框架的各个特性

Angular、Vue、React都有各自的组件实现方式，那我们来看看大家要解决的问题是否相同：

1. 怎样对组件状态进行初始化
2. 组件状态发生变化怎么通知父级组件或其他组件
3. 状态发生变化后组件如何重新渲染
4. 异步获取状态数据应该在什么时候做
   .
   .
   .

下面是一个vue单页面组件的例子：

<!--
Rainbow .vue使用说明：
1. 在父级组件模板中添加<rainbow v-bind:data="rainbow_data" @node-click="nodeClick"></rainbow>
2. 在父级组件数据域中添加rainbow_data，该值将作为子组件的初始化数据
   rainbow_data: [
          {
            text:'A+',
            num: 0,
            checked: false,
            background:'red'
          },
          {
            text:'A',
            num: 1,
            checked: false,
            background:'orange'
          },
          {
            text:'B+',
            num: 9,
            checked: false,
            background:'yellow'
          },
          {
            text:'B',
            num: 50,
            checked: false,
            background:'green'
          },
          {
            text:'C+',
            num: 0,
            checked: false,
            background:'pink'
          },
          {
            text:'C',
            num: 0,
            checked: false,
            background:'blue'
          },
          {
            text:'D',
            num: 0,
            checked: false,
            background:'purple'
          },
        ]
3. 添加监控，以便组件内部发生变化时来通知父级组件执行相应的过程
  methods: {
      nodeClick(which){
          console.log(which.text);
      }
    }
4. 父级组件控制彩虹状态
  this.rainbow_data[2].num++;
-->
<template>
  <div class="rainbow">
    <div v-if="item.num" v-for="item in rainData" :style="{ flex:item.num,background:item.background }"
         @click="changeState(item)">
      {{item.text|rainScore}} {{item.percent}}%
      <transition name="fade">
        <i v-show="item.checked" class="icon iconfont icon-xuanzhong"></i>
      </transition>

    </div>
  </div>
</template>
<script>
  export default {
    name: 'Rainbow',
    props: {
      data: {
        type: Array,
        required: true
      }
    },
    computed: {
      rainData(){
        let tempTotal = 0
        this.data.forEach((data) => {
          tempTotal += data.num
        })
        this.data.forEach((data) => {
          data.percent = (data.num / tempTotal * 100).toFixed(1)
        })
        return this.data
      }
    },
    methods: {
      changeState(item){
        item.checked = !item.checked;
        this.$emit('node-click', this.rainData)
      }
    }

  }
</script>
<style scoped>

  .rainbow {
    width: 100%;
    display: flex;
  }

  .rainbow > div {
    height: 38px;
    line-height: 38px;
    text-align: center;
    padding: 2px 4px;
    flex: 1;
    min-width: 80px;
    position: relative;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .rainbow > div:hover {
    cursor: pointer;
    opacity: 0.6;
  }

  .rainbow i.icon {
    position: absolute;
    right: -2.2px;
    top: -1.3px;
    color: rgba(255, 255, 255, .9);
  }

  .rainbow i.icon:before {
    font-size: 43px;
  }

  .fade-enter-active {
    transition: all .4s ease-in-out;
  }

  .fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

</style>