Vue与React

[SunXinFei]

关于JSX

JSX到JS对象的映射：

<div class='box' id='content'>
  <div class='title'>Hello</div>
  <button>Click</button>
</div>

{
  tag: 'div',
  attrs: { className: 'box', id: 'content'},
  children: [
    {
      tag: 'div',
      arrts: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: null,
      children: ['Click']
    }
  ]
}

JSX 到页面到底经过了这样的过程：

为什么不直接从 JSX 直接渲染构造 DOM 结构，而是要经过中间这么一层呢？
第一：我们拿到一个表示UI的结构对象的时候，不一定渲染到浏览器页面中，比如我可以通过react-canvas渲染到canvas，react-app渲染到原生app中，这个也是react-dom单独抽离，没有和react库在一起的原因。
第二：有了这个对象，当数据变化，需要更新组件的时候，非常方便的比较这个JS对象，而不是直接操作DOM结构，减少浏览器重排，提高性能，这也就是所说的虚拟DOM

[SunXinFei]

关于vue中route路由中的的设置和获取并且多参数

使用query设置和获取

首先query的路由样子为http://localhost:8080/#/feed?search=123&type=2。
路由的配置：

{
      path: "/feed",
      name: "feed",
      component: Feed
}

路由的获取：

this.$route.query.search

路由的跳转：

this.$router.push({ path: "/feed", query:{ search:123, type:2 } });

使用params设置和获取

首先params的路由样子为http://localhost:8080/#/detail/1234/2333。
路由的配置

{
      path: '/detail/:feedId/:detailId',//如果feedId为非必需的参数，则后面加问号为path: '/detail/:feedId?'
      name:'detail',
      component: Detail
}

路由的获取

this.$route.params. feedId

路由的跳转

this.$router.push({ name: "detail", params: { feedId: feedId, detailId: detailId } });

> 注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',
> 因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

[SunXinFei]

Vue中的数据操作

Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 。
this.arr = [];//数组置空
这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
Vue 不能检测以下变动的数组：
① 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
② 当你修改数组的长度时，例如： vm.items.length = newLength

Vue中自定义组件双向绑定

//父组件
<template>
      <abcde v-model="text3" />
      <p>{{String(text3)}}</p>
</template>
<script>
export default {
  data(){
  return{
   text3 = 233
  }
}
</script>

//子组件abcde
<template>
  <div>
    <button @click="plus">加</button>
    <button @click="minus">减</button>
    <button @click="equal">赋值</button>
  </div>
</template>

<script>
export default {
  props:['value'],
  computed:{
    ccc:{
      get:function(){
        return this.value;
      },
      set:function(v){
        this.$emit('input',v)
      }
    }
  },
  methods:{
    plus(){
      this.ccc++;
    },
    minus(){
      this.ccc--;
    },
    equal(){
      this.ccc = 250
    }
  }
}
</script>

参考：自定义组件的 v-model

[SunXinFei]

Redux vs VUEX 对比分析

store和state是最基本的概念，VUEX没有做出改变。其实VUEX对整个框架思想并没有任何改变，只是某些内容变化了名称或者叫法，通过改名，以图在一些细节概念上有所区分。

• VUEX弱化了dispatch的存在感。VUEX认为状态变更的触发是一次“提交”而已，而调用方式则是框架提供一个提交的commit API接口。
• VUEX取消了Redux中Action的概念。不同于Redux认为状态变更必须是由一次"行为"触发，VUEX仅仅认为在任何时候触发状态变化只需要进行mutation即可。Redux的Action必须是一个对象，而VUEX认为只要传递必要的参数即可，形式不做要求。
• VUEX也弱化了Redux中的reducer的概念。reducer在计算机领域语义应该是"规约"，在这里意思应该是根据旧的state和Action的传入参数，"规约"出新的state。在VUEX中，对应的是mutation，即"转变"，只是根据入参对旧state进行"转变"而已。

总的来说，VUEX通过弱化概念，在任何东西都没做实质性削减的基础上，使得整套框架更易于理解了。

另外VUEX支持getter，运行中是带缓存的，算是对提升性能方面做了些优化工作，言外之意也是鼓励大家多使用getter。

[SunXinFei]

Redux中action重名的问题解决方法

// a.js
export const CLEARDATA= 'CLEARDATA';
// b.js
export const CLEARDATA= 'CLEARDATA';

解决方法
1.可以直接使用ES6的Symbol对象，可以保证全局唯一性。

// a.js
export const CLEARDATA= Symbol('CLEARDATA');
// b.js
export const CLEARDATA= Symbol('CLEARDATA');

2.命名时加入“名空间”限制

// a.js
export const CLEARDATA= 'a/CLEARDATA';
// b.js
export const CLEARDATA= 'b/CLEARDATA';

[SunXinFei]

关于React中的super参数props

constructor() {
    super()
    console.log(this.props)//undefined
    console.log(props)//error
}
constructor(props) {
    super()
    console.log(this.props)//undefined
    console.log(props)//{ icon: 'home', … }
 }
 constructor(props) {
    super(props)
    console.log(this.props)//{ icon: 'home', … }
    console.log(props)//{ icon: 'home', … }
}

所以在子类组件的构造函数constructor和super中加入参数props，就是为了让子类可以访问this.props，
stackoverflow的回答

[SunXinFei]

Vuex原理简述

Vuex作为vue的插件，利用mixin在组件beforCreated时候，挂载vuex实例，并且会进行parent判断，子组件的$store为parent的$store；
Vuex核心是基于vue的computed实现的：
更改数据 mutations->methods
获取数据 getters -> computed
数据 state->data
所以vuex可以说是没有template的vue组件

Vuex模块化，解决不同模块命名冲突的问题

为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名

/*store/modules/Kanban.js */
const state = {
    labelList: []
};

const getters = {
    labelList: state => state.labelList
};

const actions = {
    setLabelList({ commit, state }, data) {
        commit(`SET_LABEL_LIST`, data);
    },
};

const mutations = {
    SET_LABEL_LIST(state, data) {
        state.labelList = data;
    }
};

export default {
    namespaced:true, //只需添加这一句即可，其他代码不变
    state,
    mutations,
    actions,
    getters
}

/*store/modules/index.js */
/**
 * The file enables `@/store/index.js` to import all vuex modules
 * in a one-shot manner. There should not be any reason to edit this file.
 */

const files = require.context('.', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  if (key === './index.js') return
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default modules

/*store/index.js*/
import Vue from 'vue'
import Vuex from 'vuex'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  strict: process.env.NODE_ENV !== 'production'
})

vue中keep-alive原理

• 获取keep-alive下第一个子组件实例对象，通过他来获取组件名
• 通过组件名去匹配include和exclude，判断当前组件是否需要缓存，如果不需要缓存则直接返回当前组件实例的Vnode
• 需要缓存，会判断cache中是否已经存在，如果存在，则将它原来位置上key移除，LRU
• 不存在，则进行max范围判断，消减未使用时间最长的组件key
• 将组件keepAlive设置为true

[SunXinFei]

vue 页面加载完成，input自动获得焦点

需求：当页面加载完毕时，自动获得焦点
1.如果使用的是原生的input,只需在mouned生命函数中添加focus即可

 <input ref="aaa" value="123123"/>

var app = new Vue({
  el: '#app',
  mounted(){
        this.$refs.aaa.focus();
       //这里光标会在文本最前方，需要单独写方法，移动到文本最末尾
      moveToEnd(this.$refs.aaa);
       //选中框内文本
      this.$refs.aaa.select();
  }
})
//控制光标移动到末尾的方法
function moveToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
} 

2.如果使用了非原生的组件，比如iView的Input，就需要在mounted中加入nextTick

<i-input ref="aaa" value="123123"/>

var app = new Vue({
  el: '#app',
  mounted(){
  	this.$nextTick(() => {
        this.$refs.aaa.focus();
       //选中所有的文本,即需要找到dom元素
      this.$refs.aaa.refs.input.select();
    })		
  }
})

[SunXinFei]

vue与react绑定事件

写法基本相同，注意一点是，不要绑定匿名函数、箭头函数
vue的写法：

mounted(){
   window.addEventListener('resize', this.handleLoad)
},
destroyed(){
    window.removeEventListener('resize', this.handleLoad)
}

如果vue的组件是keep-live则不能在mounted和destroyed里面写了，改为activated、deactivated
react的写法：

componentDidMount() {
    window.addEventListener('resize', this.handleLoad);
}
componentWillUnmount() {
    window.removeEventListener('resize', this.handleLoad);
}

[SunXinFei]

vue的按需加载路由配置引发的问题

场景描述：路由中存在动态参数为查询的文本，页面加载完成之后，input框获取url中的参数并显示出来
运行结果：如果是普通的import 路由配置，this.$route.query没有问题可以正确获取url中的参数，但如果是按需加载的路由配置，目前存在这个问题，this.$route.query会在mounted中是空对象，获取url中的参数失败
解决方法：mounted的时候用location.href手动切分字符串或者用正则获取，或者用watch 路由的变化，来给input赋值。
let reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(&|$)");

vue路由守卫

vue的provide

然后获取当前inject 选项中的所有key，然后遍历每一个key，拿到每一个key的from属性记作provideKey，provideKey就是上游父级组件提供的源属性，然后开启一个while循环，从当前组件起，不断的向上游父级组件的_provided属性中（父级组件使用provide选项注入数据时会将注入的数据存入自己的实例的_provided属性中）查找，直到查找到源属性的对应的值，将其存入result中，如下：

for (let i = 0; i < keys.length; i++) {
  const key = keys[i]
  const provideKey = inject[key].from
  let source = vm
  while (source) {
    if (source._provided && hasOwn(source._provided, provideKey)) {
      result[key] = source._provided[provideKey]
      break
    }
    source = source.$parent
  }
}