Vuex数据流管理及Vue.js服务端渲染(SSR)

状态管理

• state：驱动应用的数据源
• view：以声明方式将state映射到视图
• actions：响应在view上的用户输入导致的状态变化

组件间通信方式

• 父组件给子组件传值
  • 父组件给子组件通过相应属性传值
  • 子组件通过props接受数据
• 子组件给父组件传值

// children
this.$emit('handle', 1)
// parent
<children @handle="myFunc"></children>
// $event—— 行内写法可以通过$event获得传入的值，在事件处理函数中不能这么使用
<children @handle="fontSize + $event"></children>
export default {
    data() {
        return {
            fontSize: 0
        }
    },
    methods: {
        myFunc (size) {
            this.fontSize += size
        }
    }
}

• 不相关组件之间传值

// eventBus
import Vue from 'vue'
export defatul new Vue()
// borther1
import bus from './eventBus'
methods: {
    add() {
        bus.$emit('myFunc', 1)
    }
}
// borther2
import bus from './eventBus'
data() {
    return {
        msg: ''
    }
}
created() {
    bus.$on('myFunc', value => {
        this.msg = value
    })
}

其他常用的组件间通信方式

可以通过parent、refs这些属性实现组件间的通信，但是这些都是不被推荐的方式，只有项目非常小，或开发自定义组件时才会使用到

• ref
  • 在普通HTML标签上使用ref获取的是DOM
  • 在组建标签上使用ref，获取到的是组件实例

// children
<template>
    <input ref="input">
</template>
<script>
export default {
    data () {
        return {
            value: ''
        }
    },
    methods: {
        myFunc () {
            this.$refs.input.focus()
        }
    }
}
</script>
// parent
<template>
    <children ref="myChildren"></children>
</template>
<script>
export default {
    mounted () {
        // 想要拿到子组件需要等到子组件渲染完毕，所以放在mounted中
        this.$refs.myChildren.focus()
        this.$refs.myChildren.value = 'test'
    }
}
</script>

Vuex

Vuex是专门为Vue设计的状态管理库，采用集中式的方式存储需要共享的状态，
Vuex的作用是进行状态管理，解决复杂组件通信，数据共享，Vuex集成到了devtools中，提供了time-travel时光旅行历史回滚功能

什么情况下使用Vuex

• 非必要的情况下不要使用Vuex(项目不大，组件间共享状态不多)
• 大型的单页应用
  • 多个视图依赖同一状态
  • 来自不同视图的行为需要变更同一状态

Vuex严格模式

严格模式会检查在mutation外修改的state，并会抛出错误，不要在生产模式下开启严格模式，严格模式会深度检查状态树，检查不合规的状态改变，会影响性能，所以可以在开发模式开启严格模式，生产环境下关闭严格模式
// store/index.js

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

Vuex插件

Vuex插件就是一个函数，该函数接受一个store参数

// 因为插件需要在store中注册，所以插件需要在创建store之前来创建，
const myPlugin = store => {
    // 当stor初始化后调用
    store.subscribe((mutation, state) => {
        // 每次mutation之后调用
        // mutation的格式为{type, payload}
        // type的结构为 命名空间/mutation的名字cart/addToCart
    })
}
// 注册
const store = new Vuex.Store({
    ...
    plugins: [myPlugin]
})

服务端渲染

SPA单页应用

• 优点
  • 用户体验好
  • 开发效率高
  • 渲染性能好
  • 可维护性好
• 缺点
  • 首屏渲染时间过长
  • 不利于SEO
    • 当搜索引擎爬取HTML文件时，单页的HTML是没有内容的。因为单页应用需要客户端JS解析执行完才能生成内容，
      而目前主流的搜索引擎对这一部分的抓取还不是很好

为了解决这两个缺陷，借鉴了传统的服务端渲染，在服务器端执行前端代码来生成网页内容，将渲染好的网页内容返回给客户端，客户端只负责展示，
为了获得更好的用户体验以及页面内容交互，会在客户端将服务端返回的内容激活为一个SPA应用

• 通过服务端渲染首屏直出，解决SPA应用首屏渲染慢，不利于SEO的问题
• 通过客户端渲染接管页面内容交互得到更好的用户体验
  这种方式通常称为现代化的服务端渲染，也叫同构渲染，这种应用也叫服务端渲染应用或同构应用

渲染

把数据和模板拼接到一起

传统的服务端渲染

早期的web页面渲染都是在服务端完成的

• 前后端代码完全耦合在一起，不利于开发和维护
• 前段没有足够发挥空间
• 服务端压力大
• 用户体验一般

现代化服务端渲染（同构渲染）

• 基于React、Vue等框架，客户端渲染和服务器渲染的结合
  • 在服务器执行一次，用于实现服务器渲染（首屏直出）
  • 再客户端在执行一次，用于接管页面交互
• 核心解决SEO和首屏渲染慢的问题
• 拥有传统服务端渲染的优点，也有客户端渲染的优点

同构渲染应用的问题

• 开发条件所限
  • 浏览器特定的代码只能在某些生命周期钩子函数中使用
  • 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
  • 不能在服务端渲染应用期间操作DOM
  • 某些代码操作需要区分运行环境
• 涉及构建设置和部署的更多要求
  • 客户端渲染仅构建客户端应用即可，可以部署在任意Web服务器中
  • 同步渲染需要构建两个端，只能部署在Node.js Server中
• 更多的服务器端负载
  • 在Node中渲染完整的应用程序，相比仅提供静态文件的服务器需要大量占用CPU资源
  • 如果应用在高流量环境下使用，需要准备相应的服务器负载
  • 需要更多的服务端渲染优化工作处理

Nuxt.js

• 基于Vue生态的第三方开源服务端渲染应用框架
• 可以使用Vue.js技术栈构建同构应用