1、vuex简介
1、定义
在vue项⽬中，每个组件的数据都有其独⽴的作⽤域。当组件间须要跨层级或者同层之间频繁传递的时候，数据交互就会⾮常繁琐。vuex的次要作⽤就是集中管理所有组件的数据和状态以及标准数据批改的⽅式。
官网解释：Vuex 是⼀个专为 Vue.js 应⽤程序开发的状态管理模式。它采⽤集中式存储管理应⽤的所有组件的状态，并以相应的规定保障状态以⼀种可预测的⽅式发⽣变动。
2、应用场景
⼀般来讲，是以项⽬中的数据交互复杂程度来决定的。具体包含以下场景：
项⽬组件间数据交互不频繁，组件数量较少：不使⽤状态治理
项⽬组件间数据交互频繁，但组件数量较少：使⽤eventBus或者vue store解决
项⽬组件间数据交互频繁，组件数量较多：vuex解决
3、外围原理剖析
// a.vue<h1>{{ username }}</h1>// b.vue<h2> {{ username }}</h2>/*** 如果 username 须要在每个组件都获取一次，是不是很麻烦，尽管能够通过独特的父级传入，然而不都是这种现实状况*/复制代码Flux 架构次要思维是利用的状态被集中寄存到一个仓库中，然而仓库中的状态不能被间接批改，必须通过特定的形式能力更新状态。
vuex基于flux思维为vue框架定制，辨别同步和异步，定义两种行为，Actions 用来解决异步状态变更（外部还是调用 Mutations），Mutations 解决同步的状态变更，整个链路应该是一个闭环，单向的，完满符合 FLUX 的思维
「页面 dispatch/commit」-> 「actions/mutations」-> 「状态变更」-> 「页面更新」-> 「页面 dispatch/commit」...
2、vuex五大外围
vue应用繁多状态树，繁多状态树让咱们可能间接地定位任一特定的状态片段，在调试的过程中也能轻易地获得整个以后利用状态的快照。
用一个对象（骨干）就蕴含了全副的（分支）利用层级状态。
每个利用将仅仅蕴含一个 store 实例对象（骨干）。
每一个 Vuex 利用的外围就是 store（仓库）。“store”基本上就是一个容器，它蕴含着你的利用中大部分的状态 (state) 。Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地失去高效更新。
你不能间接扭转 store 中的状态。扭转 store 中的状态的惟一路径就是显式地提交 (commit) mutation。这样使得咱们能够不便地跟踪每一个状态的变动，从而让咱们可能实现一些工具帮忙咱们更好地理解咱们的利用。
1、State
以后应⽤状态，能够了解为组件的data⽅法返回的Object
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }})new Vue({ store, //把store的实例注入所有的子组件，this.$store可拜访 render: h => h(App)}).$mount('#app')复制代码2、Getters
Getter为state的计算属性，当须要反复对某个数据进⾏某种操作的时候能够封装在getter⾥⾯，当state中的数据扭转了当前对应的getter也会相应的扭转。
const store = new Vuex.Store({ state: { date: new Date() }, getters: { // Getter 承受 state 作为其第一个参数 weekDate: (state) => { return moment(state.date).format('dddd'); }, //Getter 还也能够接管 getters 作为第二个参数 dateLength: (state, getters) => { return getters.weekDate.length; }, //Getter自身为一属性，传参需返回一个函数 weekDate: (state) => (fm) => { return moment(state.date).format(fm ? fm : 'dddd'); } }})//属性拜访console.log(store.getters.weekDate)console.log(store.getters.dateLength)//办法拜访，传参console.log(store.getters.weekDate('MM Do YY'))复制代码3、Mutations
更改 Vuex 的 store 中的状态的惟一办法是提交 mutation，必须是同步函数。
Vuex 中的 mutation 十分相似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)。
回调函数就是咱们理论进行状态更改的中央，并且它会承受 state 作为第一个参数，第二个参数为载荷（payload）对象。
const store = new Vuex.Store({ state: { count: 1 }, mutations: { // 事件类型 type 为 increment increment (state) { state.count++ }, // 增加第二个参数 increment1 (state, payload) { state.count += payload.amount } }})//参数调用store.commit('increment')// 1、把载荷和type离开提交store.commit('increment1', { amount: 10})// 2、整个对象都作为载荷传给 mutation 函数store.commit({ type: 'increment1', amount: 10})//----- 批改参数并应用常量，必须遵循vue规定，应用set或者对象解构 -------// mutation-types.jsexport const ADD_MUTATION = 'SOME_MUTATION'// store.jsimport Vuex from 'vuex'import { ADD_MUTATION } from './mutation-types'const store = new Vuex.Store({ state: { student: { name: '小明', sex: '女' } }, mutations: { // 应用 ES2015 格调的计算属性命名性能来应用一个常量作为函数名 [ADD_MUTATION] (state) { Vue.set(state.student, 'age', 18) //增加age属性 // state.student = { ...state.student, age: 18 } } }})//应用import {ADD_PROPERTY} from '@/store/mutation-types'this.$store.commit(ADD_PROPERTY)复制代码4、Actions
Action 相似于 mutation，不同在于：
Action 提交的是 mutation，而不是间接变更状态。
Action 能够蕴含任意异步操作
Action 函数承受一个 context 参数，它与 store 实例有着雷同的办法和属性，能够应用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') }, //应用解构简化 increment ({ commit }) { commit('increment') } }})//散发actionsstore.dispatch('increment')// 以载荷模式散发store.dispatch('incrementAsync', { amount: 10})// 以对象模式散发store.dispatch({ type: 'incrementAsync', amount: 10})复制代码5、Modules
modules的次要性能是为了防⽌state过于庞⼤和冗余，所以对其进⾏模块化分隔
模块外部的 state 是部分的，只属于模块自身所有，所以内部必须通过对应的模块名进行拜访
模块外部的 action、mutation 和 getter 默认可是注册在全局命名空间的，通过增加 namespaced: true 的形式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会主动依据模块注册的门路调整命名。
//无命名空间<script> import {mapState, mapMutations} from 'vuex'; export default { computed: { //state不同 ...mapState({ name: state => (state.moduleA.text + '和' + state.moduleB.text) }), }, methods: { //mutation全局 ...mapMutations(['setText']), modifyNameAction() { this.setText(); } }, }</script>//应用命名空间export default { namespaced: true, // ...}<script> import {mapActions, mapGetters} from 'vuex'; export default { computed: { ...mapState({ name: state => (state.moduleA.text + '和' + state.moduleB.text) }), ...mapGetters({ name: 'moduleA/detail' }), }, methods: { ...mapActions({ call: 'moduleA/callAction' }), /* 另外写法 */ ...mapActions('moduleA', { call: 'callAction' }), ...mapActions('moduleA', ['callAction']), modifyNameAction() { this.call(); } }, }</script>复制代码3、辅助函数
1、mapStates
应用 mapState 辅助函数帮忙咱们生成计算属性，入参为对象
当映射的计算属性的名称与 state 的子节点名称雷同时，咱们也能够给 mapState 传一个字符串数组
// 在独自构建的版本中辅助函数为 Vuex.mapStateimport { mapState } from 'vuex'export default { computed: { ...mapState({ // 箭头函数可使代码更简练 a: state => state.a, // 传字符串参数 'b' // 等同于 `state => state.b` bAlias: 'b', // 为了可能应用 `this` 获取部分状态 // 必须应用惯例函数 cInfo (state) { return state.c + this.info } }), ...mapState([ // 映射 this.a 为 store.state.a 'a', 'b', 'c' ])}复制代码2、mapGetters
import { mapGetters } from 'vuex'export default { // ... computed: { ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]), ...mapGetters({ doneCount: 'doneTodosCount' }) }}复制代码3、mapMutaions
import { mapMutations } from 'vuex'export default { // ... methods: { ...mapMutations([ // 将 `this.increment()` 映射为 // `this.$store.commit('increment')` 'increment', // `mapMutations` 也反对载荷： // 将 `this.incrementBy(amount)` 映射为 // `this.$store.commit('incrementBy', amount)` 'incrementBy' ]), ...mapMutations({ // 将 `this.add()` 映射为 // `this.$store.commit('increment')` add: 'increment' }) }}复制代码4、mapActions
import { mapActions } from 'vuex'export default { // ... methods: { ...mapActions([ // 将 `this.increment()` 映射为 // `this.$store. dispatch('increment')` 'increment', // `mapActions` 也反对载荷： // 将 `this.incrementBy(amount)` 映射为 // `this.$store. dispatch('incrementBy', amount)` 'incrementBy' ]), ...mapActions({ // 将 `this.add()` 映射为 // `this.$store. dispatch('increment')` add: 'increment' }) }}复制代码4、源码解析
1、思路
flux思维
问题：在开发中面临最多的场景是状态反复然而不集中，在不同的组件中依赖了同样的状态，反复就会导致不对等的危险。
思维：基于 FLUX 的思维，咱们设计的状态治理将是中心化的工具，也就是集中式存储管理利用的所有组件的状态，将所有的状态放在一个全局的 Tree 构造中，集中放在一起的益处是能够无效防止反复的问题，也更好的治理，将状态和视图层解耦。
解决：应用全局的store对象治理状态和数据，繁多状态树
状态流转
繁多流转
同步和异步分层：mutations负责同步状态治理、actions负责异步事件（外部通过mutations扭转状态）
与vue集成
通过插件将 vue 集成在一起，通过 mixin 将 $store 这样的快速访问 store 的快捷属性注入到每一个 vue 实例中
响应式
利用vue的data响应式实现
扩大
辅助函数
模块化
插件反对
2、源码解析
1、store注册
/*** store.js - store 注册*/let Vue// vue 插件必须要这个 install 函数export function install(_Vue) { Vue = _Vue // 拿到 Vue 的结构器，存起来 // 通过 mixin 注入到每一个vue实例 https://cn.vuejs.org/v2/guide/mixins.html Vue.mixin({ beforeCreate: vuexInit }) function vuexInit () { const options = this.$options //创建对象入参 // 这样就能够通过 this.$store 拜访到 Vuex 实例，拿到 store 了 if (options.store) { this.$store = typeof options.store === 'function' ? options.store() : options.store } else if (options.parent && options.parent.$store) { this.$store = options.parent.$store } }}复制代码2、store的响应式
/*** store.js - 实现响应式*/export class Store { constructor(options = {}) { resetStoreVM(this, options.state) } get state () { return this._vm._data.$$state }}function resetStoreVM(store, state) { // 因为 vue 实例的 data 是响应式的，正好利用这一点，就能够实现 state 的响应式 store._vm = new Vue({ data: { $$state: state } })}复制代码3、衍生数据
/*** store.js - 衍生数据（getters）*/export class Store { constructor(options = {}) { const state = options.state resetStoreVM(this, state) // 咱们用 getters 来收集衍生数据 computed this.getters = {} // 简略解决一下，衍生不就是计算一下嘛，传人 state _.forEach(this.getters, (name, getterFn) => { Object.defineProperty(this.getters, name, { get: () => getterFn(this.state) }) }) } get state () { return this._vm._data.$$state }}function resetStoreVM(store, state) { store._vm = new Vue({ data: { $$state: state } })}复制代码4、Actions/Mutations
/*** store.js - Actions/Mutations 行为扭转数据*/export class Store { constructor(options = {}) { const state = options.state resetStoreVM(this, state) this.getters = {} _.forEach(options.getters, (name, getterFn) => { Object.defineProperty(this.getters, name, { get: () => getterFn(this.state) }) }) // 定义的行为，别离对应异步和同步行为解决 this.actions = {} this.mutations = {} _.forEach(options.mutations, (name, mutation) => { this.mutations[name] = payload => { // 最终执行的就是 this._vm_data.$$state.xxx = xxx 这种操作 mutation(this.state, payload) } }) _.forEach(options.actions, (name, action) => { this.actions[name] = payload => { // action 专一于解决异步，这里传入 this，这样就能够在异步外面通过 commit 触发 mutation 同步数据变动了 action(this, payload) } }) } // 触发 mutation 的形式固定是 commit commit(type, payload) { this.mutations[type](payload) } // 触发 action 的形式固定是 dispatch dispatch(type, payload) { this.actions[type](payload) } get state () { return this._vm._data.$$state }}function resetStoreVM(store, state) { store._vm = new Vue({ data: { $$state: state } })}复制代码5、分形，拆分出多个 Module
// module 能够对状态模型进行分层，每个 module 又含有本人的 state、getters、actions 等// 定义一个 module 基类class Module { constructor(rawModule) { this.state = rawModule || {} this._rawModule = rawModule this._children = {} } getChild (key) { return this._children[key] } addChild (key, module) { this._children[key] = module }}// module-collection.js 把 module 收集起来class ModuleCollection { constructor(options = {}) { this.register([], options) } register(path, rawModule) { const newModule = new Module(rawModule) if (path.length === 0 ) { // 如果是根模块 将这个模块挂在到根实例上 this.root = newModule } else { const parent = path.slice(0, -1).reduce((module, key) => { return module.getChild(key) }, this.root) parent.addChild(path[path.length - 1], newModule) } // 如果有 modules，开始递归注册一波 if (rawModule.modules) { _.forEach(rawModule.modules, (key, rawChildModule) => { this.register(path.concat(key), rawChildModule) }) } }}// store.js 中export class Store { constructor(options = {}) { // 其余代码... // 所有的 modules 注册进来 this._modules = new ModuleCollection(options) // 然而这些 modules 中的 actions, mutations, getters 都没有注册，所以咱们原来的办法要从新写一下 // 递归的去注册一下就行了，这里抽离一个办法进去实现 installModule(this, this.state, [], this._modules.root); }}function installModule(store, state, path, root) { // getters const getters = root._rawModule.getters if (getters) { _.forEach(getters, (name, getterFn) => { Object.defineProperty(store.getters, name, { get: () => getterFn(root.state) }) }) } // mutations const mutations = root._rawModule.mutations if (mutations) { _.forEach(mutations, (name, mutation) => { let _mutations = store.mutations[name] || (store.mutations[name] = []) _mutations.push(payload => { mutation(root.state, payload) }) store.mutations[name] = _mutations }) } // actions const actions = root._rawModule.actions if (actions) { _.forEach(actions, (name, action) => { let _actions = store.actions[name] || (store.actions[name] = []) _actions.push(payload => { action(store, payload) }) store.actions[name] = _actions }) } // 递归 _.forEach(root._children, (name, childModule) => { installModule(this, this.state, path.concat(name), childModule) })}复制代码6、插件机制
(options.plugins || []).forEach(plugin => plugin(this))复制代码以上只是以最简化的代码实现了 vuex 外围的 state module actions mutations getters 机制，如果对源代码感兴趣，能够看看若川的文章
二、Vue-ssr
参考资料：
1、vue-ssr官网指南
1、模版渲染
1、实例render属性
渲染函数：(createElement: () => VNode, [context]) => VNode
入参：接管一个 createElement 办法作为第一个参数用来创立 VNode
出参：VNode对象
如果组件是一个函数组件，渲染函数还会接管一个额定的 context 参数，为没有实例的函数组件提供上下文信息
Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数，留神：.vue组件中temlate局部会渲染，需去除。
组件树中的所有 VNode 必须是惟一的，须要反复很屡次的元素/组件，你能够应用工厂函数来实现
Vue.component('anchored-heading', { render: function (createElement) { return createElement( 'h' + this.level, // 标签名称 this.$slots.default // 子节点数组 ) }, props: { level: { type: Number, required: true } }})/* 渲染模版如下：<script type="text/x-template" id="anchored-heading-template"> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-else-if="level === 2"> <slot></slot> </h2></script>*///VNode惟一，应用工程函数实现{ render: function(h){ return h('div', Array.apply(null, { length: 20 }).map(function () { return createElement('p', 'hi') }) ) }}复制代码2、createElement函数
通常将 h 作为 createElement 的别名
/** 创立虚构dom函数： * createElement({String | Object | Function}, [object], {string | array}): VNode */createElement( //1、必输：{String | Object | Function} //HTML 标签名、组件选项对象，或者resolve了任何一种的一个async函数 'div', //2、可选 {Object} //与模板中 attribute 对应的数据对象 { // 与 `v-bind:class` 的 API 雷同， // 承受一个字符串、对象或字符串和对象组成的数组 'class': { foo: true, bar: false }, // 与 `v-bind:style` 的 API 雷同， // 承受一个字符串、对象，或对象组成的数组 style: { color: 'red', fontSize: '14px' }, // 一般的 HTML attribute attrs: { id: 'foo' }, // 组件 prop props: { myProp: 'bar' }, // DOM property domProps: { innerHTML: 'baz' }, // 事件监听器在 `on` 内， // 但不再反对如 `v-on:keyup.enter` 这样的润饰器。 // 须要在处理函数中手动查看 keyCode。 on: { click: this.clickHandler }, // 仅用于组件，用于监听原生事件，而不是组件外部应用 // `vm.$emit` 触发的事件。 nativeOn: { click: this.nativeClickHandler }, // 自定义指令。留神，你无奈对 `binding` 中的 `oldValue` // 赋值，因为 Vue 曾经主动为你进行了同步。 directives: [ { name: 'my-custom-directive', value: '2', expression: '1 + 1', arg: 'foo', modifiers: { bar: true } } ], // 作用域插槽的格局为 // { name: props => VNode | Array<VNode> } scopedSlots: { default: props => createElement('span', props.text) }, // 如果组件是其它组件的子组件，需为插槽指定名称 slot: 'name-of-slot', // 其它非凡顶层 property key: 'myKey', ref: 'myRef', // 如果你在渲染函数中给多个元素都利用了雷同的 ref 名， // 那么 `$refs.myRef` 会变成一个数组。 refInFor: true }, //3、可选：{String | Array} //子级虚构节点 (VNodes)，由 `createElement()` 构建而成，也能够应用字符串来生成“文本虚构节点” [ '先写一些文字', createElement('h1', '一则头条'), createElement(MyComponent, { props: { someProp: 'foobar' } }) ])复制代码3、Vnode对象
// VNode对象{ asyncFactory: undefined asyncMeta: undefined children: (2) [VNode, VNode] componentInstance: undefined componentOptions: undefined context: VueComponent {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} data: { attr: { id: 'div-id', name: 'div-name' } }, elm: div fnContext: undefined fnOptions: undefined fnScopeId: undefined isAsyncPlaceholder: false isCloned: false isComment: false isOnce: false isRootInsert: true isStatic: false key: undefined //key属性 ns: undefined parent: VNode {tag: "vue-component-92", data: {…}, children: undefined, text: undefined, elm: div, …} raw: false tag: "div" //组件名 text: undefined child: undefined [[Prototype]]: Object}复制代码4、模版渲染
1、v-if/v-for
应用if和map函数实现
<ul v-if="items.length"> <li v-for="item in items">{{ item.name }}</li></ul><p v-else>No items found.</p><!-- 如下渲染函数实现 --><!--{ render(h){ if(this.items.length){ return h('ul', this.items.map(item => { return h('li', item.name) }) )else{ return h('p', 'No items found.') } }}-->复制代码2、v-model
本人实现相干逻辑
<input v-model="value"></input><!-- 如下渲染函数实现 --><!--{ props:[value], render(h){ let self = this return h('input', { //DOM property domPops:{ value: self.value }, on: { input: function(event){ self.$emit('input', event.target.value) } } }) }}-->复制代码3、事件&按键修饰符
.passive/.capture/.once：提供相应前缀应用
.passive：前缀&.capture：前缀！.once：前缀～.capture.once或.once.capture：前缀～！其余润饰符号能够调用公有办法//.passive .capture .onceon: { '!click': this.doThisInCapturingMode, '~keyup': this.doThisOnce, '~!mouseover': this.doThisOnceInCapturingMode}//其余修饰符on: { keyup: function (event) { //.self // 如果触发事件的元素不是事件绑定的元素 // 则返回 if (event.target !== event.currentTarget) return //.shift | .enter/.13 // 如果按上来的不是 enter 键或者 // 没有同时按下 shift 键 // 则返回 if (!event.shiftKey || event.keyCode !== 13) return //.stop // 阻止 事件冒泡 event.stopPropagation() //.prevent // 阻止该元素默认的 keyup 事件 event.preventDefault() // ... }}复制代码4、插槽
动态插槽：this.$slots
作用域插槽：this.$scopedSlots
组件中传递作用域插槽：scopedSlots属性
<!-- <div><slot></slot></div> -->render: function(createElement){ return createElement('div', this.$slots.default)}<!-- <div><slot :text="message"></slot></div> -->render: function(createELement){ return createElement('div', this.$scopedSlots.default({ text: this.message }))}<!-- <div> <child v-slot="props"> <span>{{props.text}}</span> </child> </div>-->render: function(createElement){ return createElement('div', [ createElement('child', { scopedSlots: { // 在数据对象中传递 `scopedSlots` // 格局为 { name: props => VNode | Array<VNode> } default: function(props){ return createElement('span', props.text) } } }) })} 复制代码5、jsx
应用babel插件，渲染函数应用h
import AnchoredHeading from './AnchoredHeading.vue'new Vue({ el: '#demo', render: function (h) { return ( <AnchoredHeading level={1}> <span>Hello</span> world! </AnchoredHeading> ) }})复制代码2、csr与ssr
首先让咱们看看 CSR 的过程（划重点，浏览器渲染原理根本流程）
1、csr
浏览器渲染原理根本流程
浏览器通过申请失去一个HTML文本
渲染过程解析HTML文本，构建DOM树
解析HTML的同时，如果遇到内联款式或者款式脚本，则下载并构建款式规定（stytle rules），若遇到JavaScript脚本，则会下载执行脚本。
DOM树和款式规定构建实现之后，渲染过程将两者合并成渲染树（render tree）
渲染过程开始对渲染树进行布局，生成布局树（layout tree）
渲染过程对布局树进行绘制，生成绘制记录
渲染过程的对布局树进行分层，别离栅格化每一层，并失去合成帧
渲染过程将合成帧信息发送给GPU过程显示到页面中
流程：加载html文件、下载资源、脚本解析、运行往div中插入元素，渲染页面
特点：不利用seo、首屏加载工夫长（time-to-content）
很容易发现，CSR 的特点就是会在浏览器端的运行时去动静的渲染、更新 DOM 节点，特地是 SPA 利用来说，其模版 HTML 只有一个 DIV，而后是运行时（React，Vue，Svelte 等）动静的往里插入内容，这样的话各种 BaiduSpider 拿不到啥无效信息，天然 SEO 就不好了，我的项目一旦简单起来， bundle 可能超乎寻常的大...这也是一个开销。
2、ssr
服务端实现了渲染过程，将渲染实现的 HTML 字符串或者流返回给浏览器，就少了脚本解析、运行这一环节，实践上 FP 体现的更佳，SEO 同样晋升。毛病：
简单，同构我的项目的代码复杂度直线回升，因为要兼容两种环境
对服务端的开销大，既然 HTML 都是拼接好的，那么传输的数据必定就大多了，同时，拿 Node 举例，在解决 Computed 密集型逻辑的时候是阻塞的，不得不上负载平衡、缓存策略等来晋升
CI/CD 更麻烦了，须要在一个 Server 环境，比方 Node
一般来说，ToB 的业务场景根本不须要 SSR，须要 SSR 的肯定是对首屏或者 SEO 有强诉求的，局部场景可应用预渲染。
CSR 和 SSR ，咱们现今常见的渲染计划有6-7种：
3、同构直出
一份代码，既能够客户端渲染，也能够服务端渲染，采纳水合 hydration 计划，对 FP 有帮忙，然而不能晋升 TTI（可交互工夫）。
1、原理
ssr渲染页面整体构造晋升fp，在此基础上csr中增加事件等操作实现最终可交互的页面。ssr只⽀持beforeCreate、created⽣命周期，csr中反对所有操作倡议搁置在mounted事件后。csr为页面 = 模块 + 数据，利用 = 路由 + 页面，同构就是同构路由、模版、数据。
2、实际
css如何解决：服务端的 webpack 不必关注 CSS，客户端会打包进去的，到时候推 CDN，而后批改 public path 即可
服务端的代码不须要分 chunk，Node 基于内存一次性读取反而更高效
如果有一些办法须要在特定的环境执行，比方客户端环境中上报日志，能够利用 beforeMouted 之后的生命周期都不会在服务端执行这一特点，当然也能够应用 isBrowser 这种判断
CSR 和 SSR 的切换和降级
// 总有一些奇奇怪怪的场景，比方就只须要 CSR，不须要 SSR// 或者在 SSR 渲染的时候出错了，页面最好不要解体啊，能够降级成 CSR 渲染，保障页面可能进去// 相互切换的话，总得有个标识是吧，通知我用 CSR 还是 SSR// search 就不错，/demo?ssr=truemodule.exports = function(req, res) { if(req.query.ssr === 'true'){ const context = { url: req.url } renderer.renderToString(context, (err, html) => { if(err){ res.render('demo') // views 文件下的 demo.html } res.end(html) }) } else { res.render('demo') }}复制代码Axios 封装，至多辨别环境，在客户端环境是须要做代理的
3、Vue-ssr 优化计划
页面级别的缓存，比方 nginx micro-caching
设置 serverCacheKey，如果雷同，将应用缓存，组件级别的缓存
CGI 缓存，通过 memcache 等，将雷同的数据返回缓存一下，留神设置缓存更新机制
流式传输，然而必须在asyncData 之后，否则没有数据，阐明也可能会被 CGI 耗时阻塞（服务端获取数据后，加载至全局，客户端间接应用即可）
分块传输，这样前置的 CGI 实现就会渲染输入
JSC，就是不必 vue-loader，最快的计划
4、代码实战
1、Npm Script
"build": "npm run build:client && npm run build:server","server": "cross-env NODE_ENV=production nodemon ./server/index.js","dev:server": "cross-env NODE_ENV=development nodemon ./server/index.js","build:client": "vue-cli-service build","build:server": "cross-env VUE_ENV=server vue-cli-service build --no-clean","dev:client": "vue-cli-service serve"vue inspect --mode "production" > output.js复制代码2、Project Info
cli: vue-cli @vue/cli 4.5.13
ui: element-ui
state: vuex
router: vue-router hash mode
lang: vue-i18n
http: axios
package manager: npm
unit-test: jest、mocha
动态检查和格式化工具: eslint、prettier
Mock：mockjs
server: koa、koa-mount、koa-router、koa-static、xss
vue plugins: vue-infinite-loading、vue-meta、vue-server-renderer(ssr)
tools: reset-css、cross-env(环境变量配置)
举荐服务端渲染框架：nuxt.js
3、Project Structure
├── mock //mock脚步及数据├── node_modules //模块内容├── public //动态资源文件，不参加webpack打包，蕴含server.html和index.html├── server //web服务器代码，实现ssr├── utils //server和client专用utils工具类├── src //源代码目录│ ├── assets //动态资源，被webpack打包│ ├── components //专用组件地位│ ├── directives //全局指令│ ├── lang //语言文件│ ├── router //router│ ├── store //store│ ├── utils //工具办法，request为axios库文件│ ├── views //依照性能板块划分出的页面│ | └── home //子功能模块│ | ├── store //子功能模块数据│ | ├── router//子功能模块路由│ | ├── i18n //子功能模块语言│ | └── mock //子功能模块mock数据│ ├── App.vue //入口页面│ ├── app.js //利用入口文件，app工程函数│ ├── client-entry.js //客户端入口文件，初始化store、挂载dom│ └── server-entry.js //服务端入口文件，返回promise，解决路由、挂载store├── test //单元测试├── .browserslistrc //browserify配置├── .eslintrc.js //eslint配置├── .babel.config.js //bable配置├── package.json //npm包配置├── nodemon.json //nodemon配置文件，设置node环境变量├── vue.config.js //vue配置，辨别server和client└── README.md //我的项目阐明文件复制代码4、SSR革新步骤
相干插件及库装置，配置打包package.json脚本
server：koa、koa-mount、koa-router、koa-static、xss、nodemon
vue-ssr：vue-server-renderer（应用server-plugin和client-plugin）
环境变量配置：cross-env NODE_ENV=production 或者 nodemon.json
server代码增加：
koa代码启动：监听端口
动态资源：应用koa-static、koa-mount挂载动态服务器
api接口：应用koa-mount挂载api接口，app.use(KoaMount("/api", ApiRequest))
路由挂载：返回ssr渲染页面
应用koa-router启动路由，监听任何根门路，返回promise：router.get('/(.*)', async ctx => {})
应用vue-server-renderer插件，渲染返回最终的ssr渲染页面
应用vue-ssr-server-manifest.json渲染页面，应用vue-ssr-client-manifest.json激活页面
const VueServerRenderer = require("vue-server-renderer"); //插件 const serverBundle = require("../dist/vue-ssr-server-bundle.json"); //服务端bundle const clientManifest = require("../dist/vue-ssr-client-manifest.json");//客户端激活bundle const template = fs.readFileSync( //渲染模版 path.resolve(__dirname, "../dist/server.html"), "utf-8" ); router.get("/(.*)", async (ctx) => { ctx.body = await new Promise((resolve, reject) => { const render = VueServerRenderer.createBundleRenderer(serverBundle, { runInNewContext: false, template, clientManifest, //注入客户端js，script标签 }); //渲染函数入参context，拜访的门路path传入渲染函数中，获取ssr渲染页面 const context = { url: ctx.path }; render.renderToString(context, (err, html) => { if (err) { reject(err); } resolve(html); }); }); });复制代码原client代码革新为同构代码
增加server.html入口模版，用于服务器渲染
拆分webpack入口：server-entry.js、client-entry.js，批改webpack配置
client-entry.js: 挂载dom，同步服务器端store数据
server-entry.js: 返回promise函数，resolve(app)，解决路由和store数据
vue.config.js: 辨别server和client
server：服务端ajax申请必须是是绝对路径，增加DefinePlugin插件
server和client辨别：entry、target、output、server增加server-plugin，client增加client-plugin
server：node端不须要打包node_modules⾥⾯的模块但容许css文件，externals = nodeExternals({allowlist: /.css$/})
其余优化：vue-loader的cache解决、extract-css的bug修复
//server-entry.js export default (context) => { return new Promise((resolve, reject) => { const { app, router, store } = createVueApp(); const meta = app.$meta(); // 依据服务端传入的url，设置以后客户端的url router.push(context.url); // 有可能是异步路由，要期待异步路由和钩子函数解析完 router.onReady(() => { // 期待serverPrefetch中的数据返回收，设置state context.rendered = () => { // After the app is rendered, our store is now // filled with the state from our components. // When we attach the state to the context, and the `template` option // is used for the renderer, the state will automatically be // serialized and injected into the HTML as `window.__INITIAL_STATE__`. context.state = store.state; context.meta = meta; }; resolve(app); }, reject); }); }; //client-entry.js if (window.__INITIAL_STATE__) { store.replaceState(window.__INITIAL_STATE__); } app.$mount("#app");复制代码vue实例拆分：app.js，应用工程函数，拜访服务器屡次申请同实例净化，下同
router实例拆分：应用工厂函数
路由如何解决：server代码中通过context传入url，打包入口server-entry.js中传入router.push(context.url);
异步路由解决：应用router.onReady(() => {resolve(app)}, reject)
store实例拆分：应用工厂函数
view页面数据处理：增加serverPrefetch服务端数据获取函数，可在服务器获取数据，留神：老api为asycndata只能在根组件应用、serverPrefect新api任意组件应用
5、SSR相干问题
如何期待异步申请的数据返回后，再渲染⻚⾯；客户端中的store如何同步服务端的数据？
组件中增加serverPrefetch选项，返回promise
服务端⼊⼝server-entry.js增加context.rendered回调，渲染实现后执⾏，主动序列化注入window.__INITIAL_STATE__变量
设置context.state = store.state
客户端⼊⼝获取window.__INITIAL_STATE__，设置store初始状态
meta、title等标签如何注⼊？
应用vue-meta插件：vue.use(vueMeta)
主组件App.vue，应用metaInfo增加meta和title
子组件中可应用metaInfo函数，笼罩默认的metaInfo
server-entry中拿到meta，并将其传⼊到context中，渲染server.html中的meta信息
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> {{{ meta.inject().title.text() }}} {{{ meta.inject().meta.text() }}} </head> <body> <!--vue-ssr-outlet--> </body></html>复制代码服务端渲染会执⾏的⽣命周期: 只执⾏beforeCreate created,不要在这两个⽣命周期⾥⾯增加定时器或者使⽤window等
服务器本地开发热更新：webpack配置读取在内存中
最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163互相学习，咱们会有业余的技术答疑解惑
如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点star:http://github.crmeb.net/u/defu不胜感激 ！
PHP学习手册：https://doc.crmeb.com
技术交换论坛：https://q.crmeb.com