Vue 分享（第一期）

Vue Logo

年前上班摸鱼时间来写一个～～
那么关注过我的小伙伴都知道，我之前是搞过RN的，所以先来个React和Vue两套框架的对比～～
TIP：
之前Vue项目，我就是在划水，没想到这个项目还是Vue～～妈蛋，没办法了，逃不掉啊！只能重新对待了～～

React 和 Vue 区别：

1. 首先 React 是单向数据流：
   啥意思呢？个人理解就是老子捶儿子，儿子不能反抗，只能忍。
   而 Vue默认双向绑定的：
   又是啥意思呢？个人理解就是老子捶儿子，儿子特么不爽了，就起身揍老子了，开始互搏了（这个解释在Vue 1.0里是非常到位的，只是Vue 2.0就不能父子组件之间props双向绑定了，就是只剩下组件 <–> DOM 之间的双向绑定这一种了）。
   

   数据流的区别

2. 渲染模版方式不同：
   React中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下。

3. Vuex 和 Redux 的区别：

   • 在Vuex中，$store被直接注入到了组件实例中，而且是全局都可以 用，注册一次，可以瞎JB用，使用dispatch或者commit提交更新，其实我觉得不用在actions里搞个commit 下 mutations 里的方法，而直接在 component 里去 commit 方法也是可以的，以为我试过没啥卵区别～～鸡肋(我唯一解释的通的原因就是模仿Redux，搞个类似于ActionType的东西吧)。
   • 在Redux中，要用store 里的数据，那就要多写好几步：先搞个Provider把我们的组件套一套，不然获取不到，再把我们对应组件需要显示的数据，用connect把需要的指定的 state和指定的 action连接起来，也就是你之前写的子 reducer。

4. 再来看下代码的区分：

Vuex:

mport Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const index = new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
});

export default index;

TIP：
如果你要用modules的话，每个单独的里面都要写上namespaced:true。

---

Redux：

在 Provider 里面拿 store
render() {
        return (
            
                
            
        )
    }

store 的注册
import {createStore, applyMiddleware, compose} from 'redux';
import thunkMiddleware from 'redux-thunk';
import logger from 'redux-logger'

import rootReducer from '../reducers/index';

function RootStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        compose(applyMiddleware(thunkMiddleware,logger))
    )
}

const Store=RootStore();
export default Store;

ActionType：
//供应商搜索信息
export const GET_SUPPLIER_INFO_NEW = "GET_SUPPLIER_INFO_NEW_QCC";
//复制
export const GET_DEFAULT_DATA_COPY = 'GET_DEFAULT_DATA_COPY_TYPE_QCC';
//清空图片
export const CLEAR_IMAGES = 'CLEAR_IMAGES_QCC';

页面和数据玩的捆绑
export default connect((state) => {
    const {CheckOutReducer}=state;
    return {
        CheckOutReducer
    }
}, Actions)(CheckOut)

TIP：
再补充一点：在 Redux中，ActionType 命名不要一致，也就是你哪怕当前页面只捆绑(SM 了解一下，嘿嘿～)的Reducer A，但是当你Reducer B中的ActionType也是同一个，也会触发的，因为他是所有的Reducer都会来一遍～～

来来来，我们来总结下：看到以上红色字体可以得出，Redux是不是比Vue复杂的同时，更加框架化，页面必须和你要使用的数据关联起来，你才能用，不像Vuex特么注册一次，你就可以瞎鸡巴全局拿来用，当然Vuex里的modules也是帮助你类似的效果 ......
妈的，打你好累，快点结束吧～也就是React比 Vue更偏向于构建稳定大型的应用。

---

哎哟～背有点僵硬了，第一期理论全是理论没什么卵用，下期来个干货，把遇到的问题都来列一列。
最近肺炎恐慌，大家减少外出，祝冬安！
那么我们下期再见～

---

推荐链接
IT 界寄来的书信系列
IT 界寄来的段子系列
IT 界起来的书籍系列
搞笑我们是用心系列
React Native 专题