前言
我最一开始是先学的react，然后也就前段时间开始学习vue，一开始给我的感受是两者很相似，react给我的感觉是灵活，vue是一种死板的感觉。为什么有这种感觉呢，react有一种很强烈的欲望，all in js只要能够用够js写的，就全用js写，所以一切都很灵活，jsx很酷，高阶组件牛逼，es7的装饰器也是可以玩的飞起。反观vue，搞的.vue单文件还是尽量保留原来前端开发的模式，留下了template、script、style三个最基本的东西，其实内部运作应该还是和react类似。
react
react看的各种道听途说的文章，这玩意大概是怎么玩的呢？简单的说jsx被解析成createElement的方法，里面传到参数啊什么的就是告诉react怎么渲染之类，然后方法返回一个虚拟dom,大概是这么搞的，具体细节我也不是太懂。
vue
vue一开始让我挺晕的，官网的学习教程和一般写的项目不太一样，官网教程的例子没有单文件，全是在选项对象中加入一个template属性，一般的项目开发的都是用的.vue的单文件。一开始我是没太理解.vue这文件到底是怎么玩，只是按着这样写，不理解原理好像也能够基本完成自己想要的效果。
最近看了一些文章以及看了好几遍官网的api，官网的api还是很有必要每一个都看一遍的，之前大致看一遍感觉好多东西都没有见到过，别人代码看多了，发现很多没用的api还是很强的。下面讲讲我对vue的一些理解。
vue是怎么玩的呢？每一个vue组件都是一个Vue实例，这样说也不是很准确，应该每一个自己写的组件都是通过调用Vue.extend继承Vue后扩展出来的新的类的实例，想一想怎么定义一个vue组件，就是调用了Vue.component方法，
// 注册组件，传入一个扩展过的构造器 Vue.component('my-component',Vue.extend({ /* ... */ })) // 注册组件，传入一个选项对象 (自动调用 Vue.extend) Vue.component('my-component',{ /* ... */ }) // 获取注册的组件 (始终返回构造器) var MyComponent = Vue.component('my-component')
一般情况下我们写的.vue单文件暴露出来的就是一个选项对象，这个方法的内部自动调用了Vue.extend。所以.vue单文件本质上是vue-loader去把<template></template>里的内容转成字符串形式，塞到<scirpt></script>里面的export default {}的对象里面的template去，当然了，这还没有完，template属性里面的字符串也可以说是一种糖，vue内部是要调用Vue.compile去做一次转换，最终把template的值转换成render，这个属性的值是一个方法，这里就和react统一了，用是有个同名的函数createElement去生成Vnode。所以在选项对象中，可以不给出template属性而是给出render属性，同时存在template和render的时候会忽视template。
var getChildrenTextContent = function (children) {
return children.map(function (node) {
return node.children
? getChildrenTextContent(node.children)
: node.text
}).join('')
}
Vue.component('anchored-heading',{
render: function (createElement) {
// create kebabCase id
var headingId = getChildrenTextContent(this.$slots.default)
.toLowerCase()
.replace(/\W+/g,'-')
.replace(/(^\-|\-$)/g,'')
return createElement(
'h' + this.level,[
createElement('a',{
attrs: {
name: headingId,href: '#' + headingId
}
},this.$slots.default)
]
)
},props: {
level: {
type: Number,required: true
}
}
})
看的出来这种直接写render比起template要麻烦的多，所以为了简化这种写法就搞出来了一个jsx写法，这里又和react又统一了。
jsx用法:
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',render: function (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})
一个需求引发的思考
通常我们写react和vue都是一个写一个组件customComp，然后在别的组件要用的时候都是直接<customComp/>写进去的，但是有的组件就不能这么做了，比如一个提醒的message组件，我希望在react中是这样调用，像是一个工具类函数一般使用：
import message from 'message.js'
import React from 'react'
class XXXcomponent extends React.Component{
...
componentDidMount(){
message.info({
type:'success',text:'hello react!'
})
}
}
在vue中我希望是这样的调用的：
{
mounted(){
this.$message({
type:'success',text:"hello vue!"
})
}
}
在看了一些三方库的这种组件的实现方式，来回折腾了一段时间，对react和vue理解的更深了一些。
vue的实现
先拿vue说，先写一个message.vue的组件文件，然后在index.js文件中把这个message.vue文件import进来，你可以试着打印下这个vue文件长得什么样，其实前面也分析过了，其实引进来的就是一个选项对象，而且<template></template>标签的内容也被弄成了render属性了，前面也铺垫过了vue.extend，这里把引入的选项对象传入vue.extend中就返回了一个扩展过的Vue类了,然后我们手动去new一个message的组件实例出来，可以传入一个propsData就能把数据传给到组件内部的prop中去，打印下实例就会发现定义在.vue文件中的data、prop之类的都有，这个时候我们只是实例化了一个实例，其实在document上是找不到这个节点的，只需要最后在实例上调用$mount(el)，就能把实例挂载到document上去了。直接修改实例上data里面定义的值，会发现也是响应的，至此这个message组件我们能够手动去控制这个组件了，具体细节该怎么暴露出api来个外部调用就不说了。
//伪代码 import message from 'message.vue' import Vue from 'vue' const Constructor = Vue.extend(message) //扩展出一个新的类 const options = { innerProps:"inner props" } const instance = new Constructor({propsData:options}) //创建一个实例，也可以传给一个props instance.$mount(document.body) //组件挂在body下 //如果组件内部methods有方法，实例就能直接调用 // instance.innerFunction()
react实现
大体上是和vue类似，有几个地方有变化，引进来的组件，因为是用class extends React.Component的形式写的，看的出来已经是扩展过react后组件类了，直接去new就能拿到实例了,或者是用React.createElement传入组件拿到虚拟dom。和vue不同的事，vue有个$mount方法帮助挂载组件到指定的位置，在react中要用到react-dom里面的render方法，传入前面拿到的虚拟dom以及要挂载的位置，这个方法会返回这个组件实例，这个时候就可以调用组件实例的setState方法去做一些事情了。
总结
react、vue随便用用带还是挺简单的，我的观点是api文档只能教会你70%的东西，但是你有了这70%的功力，大部分的东西基本都没什么问题，但是文档之外的30%，往往是最难学的，可能需要剥开vue、react简单易用的外表，来回看官方文档，每次都能有新的体会，翻看第三方优秀的组件库是最佳学习的方案，深入地去理解内部原理才能真正的掌握。
这种组件函数式用法在我的fantastic-carnival(一个博客系统)中有体现：
其中有一个loadingBar组件是一个加载条的组件，参考的是iview组件库中的vue实现，同时我用react也实现了一遍。
