新增：哈哈，近来又推出了 vue 的文章，在这里放个链接~
手把手教你从零写一个简朴的 VUE

谢谢有人看我扯手艺，这篇文章重要引见近来异常火的vue2前端框架的特征和vue2+vuex2+webpack2种种2的前后端同构衬着架构搭建流程，末了会附上代码，文章想到啥写啥，假如存在毛病，或许人人有什么意见发起，迎接人人指出来

Vue2 和 Vue1 的对比

vue2出来以后，基础上逛论坛逛手艺群都能看到种种文章，种种议论 ，一时候人人都在进修vue2了 ，我今年年初就最先打仗vue，最初也是在react ，angular，vue 当中对比挑选，终究挑选了vue，因为其对前端比较友爱（运用一般的模板，而不是JSX）、观点及进修本钱相对简朴(关于团队开辟，引入手艺必需要斟酌其进修本钱)，下面引见下我明白的vue2和vue1的差异之处 ，若有不足，迎接补充:

1.引入了virtual Dom

在vue1中，数据和视图的绑定流程是经由过程 Object.defineProperty将数据转化为getter/setter,getter/setter中到场watcher，当对数据举行操纵的时刻，setter的watch被触发从新盘算，然后更新和这个数据有关联的dom元素，这就是vue1的数据驱动视图道理
在vue2中，数据的绑定和触发和vue1雷同，基础道理都是经由过程Object.defineProperty对数据到场’钩子’，以便在数据发生变化的时刻得以响应，而在响应以后，不像vue1一样直接更新dom元素，而是放入virtual Dom中，举行比对盘算，然后对dom元素做响应的处置惩罚。下面是vue1和vue2的响应流程对比

vue:

vue2:

关于virtual Dom: 假造dom最初是在react上面熟悉的，实在做的事变就是在js内存中竖立好dom的构造，然后再更新假造dom时做差异比对，将差异的处所真正更新到页面中，做到最小化页面的衬着。固然，也不是说关于一切情形，假造dom的机能都是最好的，毕竟比起直接操纵dom元素，他照样须要在内存中举行盘算，因而关于少许的元素更新，可以其机能比起直接操纵dom元素要差。固然假造dom的引入，不只是在机能方面的斟酌，假造dom可以带来编程的变化，比方你可以运用render要领直接竖立新的节点,假造dom也是vue2可以举行效劳端衬着的症结，因为假造dom是在内存重点，vue2的ssr可以将假造dom直接天生html的字符串，从而完成ssr。除此之外，vue2 从模板到 virtuel-DOM 的编译阶段运用了一些高阶优化：

(1). 它会检测出静态的 class 名和 attributes 如许它们在初始化衬着以后就永久都不会再被比对。
(2). 它会检测出最大静态子树 (就是不须要动态性的子树) 而且从衬着函数中萃取出来。如许在每次重衬着的时刻，它就会直接重用完全雷同的 virtual nodes 同时跳过比对。
这些高阶优化一般只会在运用 JSX 时经由过程 Babel plugin 来做，然则 vue2 纵然在运用浏览器内的编译器时也能做到。

2.组件事宜通报机制的转变，组件数据双向绑定的去除

vue2组件废除了$dispath/$broadcast父子组件的事宜流传体式格局，废除了过滤器，props参数等的数据双向绑定以及处置惩罚功用，申明作者愿望运用者经由过程竖立全局的状况治理，事宜治理机制，经由过程运用事宜中间，许可组件自在交换，不管组件处于组件树的哪一层，将状况治理集合在一起处置惩罚，官方供应的vuex就是用来几种治理状况的。

3.效劳端衬着 ssr:server-side-render

因为virtual dom的引入，使得vue的效劳端衬着成为了可以，下面是官方 vue-server-renderer供应的衬着流程图:

可以看出vue的server-side-render有三部份构成，一部份是页面的源码（source），另有node层的衬着部份和浏览器端的衬着部份。

source分为两种entry point,一个是前端页面的进口client entry,重如果实例化Vue对象，将其挂载到页面中；别的一个是后端衬着效劳进口server entry,重如果控效劳端衬着模块回调，返回一个Promise对象，终究返回一个Vue对象（经由测试，直接返回Vue对象也是可以的）;

前面的source部份就是营业开辟的代码，开辟完成以后经由过程 webpack 举行构建，天生对应的bundle，这里不再赘述client bundle,就是一个可在浏览器端实行的打包文件；这里说下server bundle, vue2供应 vue-server-renderer模块，模块可以供应两种render: rendererer/bundleRenderer ,下面离别引见下这两种render。

renderer吸收一个vue对象 ，然后举行衬着，这类关于简朴的vue对象,可以这么去做，然则关于庞杂的项目，假如运用这类直接require一个vue对象，这个关于效劳端代码的构造和逻辑都不太友爱，起首模块的状况会一向连续在每一个请求衬着请求，我们须要去治理和防止此次衬着请求的状况影响到背面的请求,因而vue-server-renderer供应了别的一种衬着形式，经由过程一个 bundleRenderer去做衬着。

bundleRenderer是较为庞杂项目举行效劳端衬着官方引荐的体式格局，经由过程webpack以server entry根据肯定的请求打包天生一个 server-bundle,它相当于一个可以给效劳端用的app的打包紧缩文件，每一次挪用都邑从新初始化 vue对象，保证了每次请求都是自力的，关于开辟者来讲，只须要专注于当前营业就可以，不必为效劳端衬着开辟更多的逻辑代码。
renderer天生完成以后，都存在两个接口，离别是renderToString和renderToStream，一个是一次性将页面衬着成字符串文件，别的一个是流式衬着，适用于支撑流的web效劳器，可以是请求效劳的速率更快

4.除了上面说的那些差异，vue2在生命周期治理，动画机制等处所都与vue有些差异，详细请浏览migration

Vuex2 和 Vuex 、Webpack2 和 Webpack 的差异之处

vuex

相关于 vue2和vue 较大修正，vue的状况治理工具 vuex的修正不是很大，底层修正因为时候关联还没有来得及细究，然则在运用方面多了几个 Helper，运用ES6的睁开函数可以越发轻易的运用state,getters,mutations,actions。下面简朴引见下vuex各个部份的观点

• state是一个全局的状况存储，数据会存储在个中，vue组件可以直接接见个中的值，然则只可以读，不可以举行写操纵
• getter,有些时刻我们须要对猎取的数据举行加工，而不是直接猎取state中的数据，这时刻可以经由过程getter定义函数，返回对应的数据
• mutations是vuex中唯一一个可以修正数据的处所，mutations可以定义事宜函数，在vue组件中可以经由过程commit发射事宜，挪用函数。须要注重的是，mutations中的操纵必需是同步的，不可以存在异步操纵的状况。
• actions和 mutation比较类似，差异的是actions中不直接修正state，而是经由过程commit挪用mutations修正数据，而且actions中可以存在异步处置惩罚逻辑

webpack

webpack2 和 webpack对比，有以下的新特征:

1. ES6 Modules : webpack 2 已支撑原生的 ES6 的模块加载器了，这意味着 webpack 2 可以明白和处置惩罚 import和export了，而不必把他们转化成 CommonJS 来处置惩罚了。
2. 用 ES6 来做代码拆分 : ES6 的模块加载器定义了System.import这一个要领，System.import可以在运转时动态加载 ES6 模块。
3. 夹杂运用 ES6 和 AMD 和 CommonJS (Mixing ES6 with AMD and CommonJS)

越发详细的新特征可以浏览链接地点

从零最先搭项目

好了，前面扯了那末多东西，预计没什么人看，我们照样回归题目，最先敲代码吧，哈哈，接下来我会运用vue2 + vuex2 + webpack2 搭建一个简朴的 ssr项目，可以直出页面，还可以保留成静态文件。虽然官方页面响应的实例vue-hackernews-2.0，然则假如一最先把代码下下来，照样不太轻易明白的，所以我参考其例子，从零最先搭建项目,源码在文章的末了

起首固然是运用npm init新建一个项目
然后往package.json中写入以下依靠

然后运转 npm i ,然后去上个茅厕，喝杯茶也行，等一切的依靠装置终了
引见下一些模块的作用 vue，vuex 为vue项目运用的基础框架，express,vue-server-renderer,serialize-javascript为效劳端衬着运用的模块，babel-*为ES6转换成ES5模块，其他的webpack*,*-loader为webpack构建所须要的模块，假如须要项目进修webpack的运用，可以浏览官方文档

装置阶段完成了，下面进入兴奋的编码阶段了，实在根据流程应当是编码同时搞定打包、开辟环境设置等事情的，为了文章的结果，就离开说了

制造的页面是一个没有什么营业情形的页面(请原谅我，想到什么就写什么代码了)，重如果为了演示组件的援用流程，vuex状况治理以及援用，状况转变以后的视图更新，异步操纵的视图更新，所以，当你下了源码，也许页面，你会看到下面这个奇奇怪怪的东西：

好了不要在乎这些细节了，我们来看看这个怪怪的东西是怎样出来的，先展现下项目终究的目次构造：

个中index.html就是页面终究天生页的模板页，内里有简朴的头部信息和占位符，可以在效劳端衬着后举行内容替代
app.js就是页面的逻辑进口文件，Vue对象在这里实例化，个中运用的store，route可以在实例化中传入

可以看到app.js援用了App.vue组件,.vue是vue官方推出的单文件开辟体式格局，合营webpack的vue-loader可以轻易的完成模块化开辟，.vue文件在打包的时刻会被编译成为一个js对象，内里包括一个render要领，用于衬着页面，下面是App.vue文件

可以看到页面包括三个部份template 、script 、style，个中template为组件运用的模板，如今vue2除了运用template，还可以运用JSX和js模板，然则相对其他两种，template关于前端开辟者来讲照样比较直观的，script为组件的逻辑部份，运用es6的举行模块化，构建的时刻会运用Vue.extend天生一个组件，style为页面的款式部份，可以指定lang来声明运用的款式语法范例，可以用原生的css，也可以用stylus，sass等等，只需设置差异的webpack loader举行举行编译就好了，别的可以指定 scoped,使得组件中的款式只对组件见效，不会影响其他组件，不必忧郁定名反复的题目，其道理是在天生的时刻为标签天生一段随机数(没研讨过天生数的算法)，而且为挑选器加上对应随机数的属性挑选器。

可以看到组件import别的一个List.vue组件，而且在components中举行了援用，template中举行了援用，这就完成了组件的嵌套和复用，下面是List.vue文件

这个文件运用了vuex治理的数据，在此前的版本的vuex中，在组件运用数据须要写许多的computed,methods,在新版本的可以合营ES6的睁开函数和vuex的helper，简写许多函数，组件部份内容就说到这里了，可以有人会说啥是computed，啥是methods，这些统统本身看文档，
总的来讲，写一个组件须要相识下面几点:

1. 模板指令，比方v-for，v-bind,v-on等
2. 数据运用设置属性data,computed,props，watch等
3. 组件的生命周期属性created,mounted等
4. 全局要领Vue.set,Vue.nextTick等
5. 进阶开辟: 动画结果，自定义指令，自定义插件，夹杂组件开辟

下面说下用vuex做状况治理，下面是store/index.js文件

可以看到运用vuex须要在Vue.use中引入，然后实例化一个Vuex.Store对象就可以了,对象中须要定义state,actions,mutations,getters等内容，如许子就可以竖立一个全局的状况治理机制，可以从运用的顶端去处置惩罚数据，各个组件中对数据举行操纵也是经由过程事宜直接通报到Vuex中举行数据更新，然后再举行响应到其他运用同个数据的组件中，举行视图更新。

项目的逻辑代码已完成了，然则对比上面ssr的观点，会发明还少了两个webpack的entry point，一个是前端代码的进口，可以是供效劳端衬着的进口,下面是前端client-entry.js文件

文件引入了app.js,推断假如在效劳端衬着时已写入状况，则将vuex的状况举行替代，使得效劳端衬着的html和vuex治理的数据是同步的。然后将vue实例挂载到html指定的节点中。

下面是server-entry.js文件

这内里效劳端会传过来一个context对象，可以从猎取信息，也可以写入信息，可以看到将现有的vuex state赋值给context，给效劳端衬着运用，末了返回vue对象(文档中写着须要返回一个Promise对象，对象中再返回一个vue对象，经由试验直接返回也是可以的，假如运用中存在异步操纵会影响视图和vuex数据状况，那末应当返回一个Promise对象，使得效劳端获得的vue对象是末了数据和视图同步一致的)

代码撸完了，下面要让他跑起来了，设置分为两部份，一个是webpack打包的设置，一个是效劳端衬着效劳器的搭建，这里运用express举行效劳器的简朴搭建，不触及任何负载平衡和机能优化题目，下面离别说说这两个部份 :

• webpack打包：webpack打包重要有三个文件webpack.base.config.js,webpack.client.config.js,webpack.server.cofnig.js,个中base重要设置了对应文件范例的loader，另有指定了entry的切割点，将营业代码和库，client指定了client-entry.js作为entry point ，还将库文件和营业文件举行离别打包，另有一些图片处置惩罚，代码紧缩的事情。server指定了server-entry.js作为entry point,而且指定了打包了范例标准是commonjs2，供效劳端衬着模块运用。
• 而在开辟过程当中，可以运用webpack-hot-middleware/client,webpack-hot-middleware去完成代码的watch和从新构建双端的代码的流程，是得开辟越发便利，详细设置在setup-dev-server.js中
• 末了说一下效劳端衬着的效劳器设置，效劳端部份运用vue-server-renderer模块的createBundleRenderer经由过程传入适才webpack天生的server-bundler去天生一个bundleRenderer,就可以挪用renderToStream或许renderToString衬着页面了，详细设置在server.js中

详细怎样跑起项目可以看下package.json的scripts属性，个中dev是开辟用，start是正式环境动态天生页面用，build可以直接天生client-bundler和server-bundler

基础上比较完全的vue2 前段端同构衬着已引见完了，下面说下我对框架的意见，前端框架这个东西基础上就是一时火一个，我们在进修新东西的同时也应当不忘成本，要有本身的手艺栈和事情流，就像《人月神话》中的一句话说的好，没有解决任何事变的银弹，关于差异的项目，差异的营业情形，应当采用差异的框架，运用最合适的开辟架构去开辟。

附上代码 点我点我，给个star呗~

末了也没啥好说的了，要不给人人拜个从前吧，祝人人代码没bug，哈哈