随记 VUE（实战）

01、go语言处理高并发能力很好

02、key的作用

当给组件使用v-for遍历的时候，一定要加上:key属性避免让vue帮我们计算DOM（key是节点的唯一标识，可以高效的渲染DOM）

03、watch监听路由之导航钩子

04、路由钩子函数

001、导航完成之前获取数据 beforeRouteEnter（路由守卫之路由进入之前）

作用：在切换导航前（路由离开前）提示用户保存数据~

该钩子函数不能获取组件实例 this（因为当守卫执行之前，组件实例还没被创建）

在路由进入之前，不能获取组件实例。但是可以通过next() 将数据更新到页面上

002、路由守卫之路由更新 beforeRouteUpdate

路由更新之前，获取参数渲染页面，记得放行 next()

当复用同一个组件的时候，可以使用路由更新钩子函数来更新数据到页面上

003、路由守卫之路由离开之前 beforeRouteLeave()

当用户离开当前组件的时候，若用户没有保存用户信息，则提示用户去保存用户信息

004、路由应用和总结

可利用组件路由守卫中的路由进入之前、路由更新动态的匹配路由

路由守卫之路由进入之前：获取参数渲染页面

路由进入之前，路由更新之前，路由离开之前的使用场景如下

05、总结

vue-cli3.0 傻瓜式的搭建项目

vue-cli2.0 通过脚手架生成结构化的项目

1. 先检查node版本和 npm版本

node -v 建议使用 v8.11.2 版本 (8.6版本以上)

npm -v 建议使用 v6.1.0版本（建议升级v6）

2. 生成结构化项目

vue init webpack demo

3. 项目依赖和开发环境的依赖

dependencies 项目依赖

devDependencies 开发环境的依赖

06. 两个存储静态资源文件夹的区别

src文件夹比较重要

src文件夹中的 assets 文件夹中的静态资源可以存图片资源，webpack是通过模块的方式打包编译，并嵌入到编译之后的文件中去。一般使用模块化的方式去编译静态资源~

static文件中的静态资源，当执行npm run build，默认会自动将文件夹中的图片打包到dist文件夹中去

若要使用asset文件夹中的静态资源

必须使用模块化的方式引入，不然图片显示不出来~

在main.js中引入全局的样式

若要使用static文件夹中的资源

可以直接使用 相对路径 的方式引入

07. 基本配置文件

@相等于相等于相对路径src

例子：

08. vue路由

Vue.use(Router) 该语句就相当于 => vue.prototype.$router = Router

这样子使用之后，在项目中直接可以使用 this.$router 查询路由

09、使用mint-ui搭建项目框架

底部 tab 的切换（闭坑）

实现切换底部tab的时候，保留当前tab的样式（闭坑）

loadmore属性注意点

10、发送网络请求

使用插件axios ：引入=>配置

使用：

this.$axios.get('url').then(res => {}).catch(err => {} )

11、路由激活

添加激活路由的样式 linkActiveClass

12、时间处理工具：moment.js

引入：

import Moment from 'moment'

自定义moment 全局过滤器：Vue.filter() 注册全局过滤器

使用：

如果使用普通函数声明，当前this为undefined ，建议使用箭头函数

13、图片预览器 vue-preview

https://gitee.com/duans/vue-preview

安装：

npm i vue-preview -S

使用：

14、自定义控制字数的显示的过滤器

15、路由组件传参

16、进入、离开过渡效果的js钩子函数

17、购物车加入商品，如何传值？

在没有vuex的情况下。可以使用 bus总线

1、实例化bus对象

2、将bus对象挂载在vue的原型上

3、使用公交车对象注册监听事件

4、触发对应的事件

18、购物车中计算总件数和总价格

一般用计算属性

19、响应式操作原理

Object.defineProperty(this,'shopCart',{set:function(){// 判断元素是否有属性}
})

如果数据不完整的情况下需要添加属性，就要手动通知vue完成响应式 =》双向数据绑定

第一个是被添加的值(父亲)，第二个是名字key，第三个是值value

this.$set(shop,'num',num)
this.$set(shop,'isSeleted',true)

20、vuex

官方文档：

https://vuex.vuejs.org/zh/

定义：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

利用Vue.js的数据响应机制来进行高效的状态更新

使用场景：

Vuex的五大将：

必选：State、Mutation、Action

可选：Getter（获取状态中存储的值）、Module

修改State的唯一方法是提交Mutation，但是mutation中的方法是同步的。

如果想做一些异步操作，必须提交action。

通过dispatch分发action中声明的方法。action中可以提交mutation

21、vuex的使用

初始化项目

1、安装vuex

npm install vuex -S

2、引入vuex，挂载store实例到全局

使用vuex中的数据

使用计算属性，获取store中的数据

this.$store.state.count

mapState

辅助函数

用于解决一个组件需要获取多个状态的时候，避免声明重复和冗余，可以使用 mapState 辅助函数帮助我们生成计算属性

如何获取 store 中静态的数据呢？

方法1：普通获取store中的状态

  computed:{count(){return this.$store.state.count}}

方法2：使用辅助函数获取store中的状态

  computed:mapState({// 箭头函数count:state => state.count,msg:state => state.msg,// 传字符串参数 'count'等同于state => state.countcountAlisa:'count', // 取个别名// 内部计算countLocal(state){return state.count + this.num}}),

方法3：运用对象的拓展运算使用辅助函数

  computed:{...mapState({count: state => state.count,msg: state => state.msg,countAlisa: 'count',countLocal(state) {return state.count + this.num}})},

方法4：更加简便的方法。当state中的key值与当前计算属性方法相同时

  computed:{...mapState(['count','msg'])}

getters 获取state中的数据

简单使用：

可动态传入参数

mutations

修改状态的唯一方法是提交mutation

最简单的使用方法

以对象的方式提交

不要在mutation中进行异步操作哦

因为页面响应到了，但是状态并没有更新到最新的state值

actions

用于异步数据的获取，例如网络请求回来的数据

用户点击按钮，通过dispatch分发actions, 然后在actions中提交 mutation 中声明的方法，然后在mutation中定义该方法

modules 分模块化

好处是：当状态管理器很庞大的时候，分模块化更容易管理和使用

使用上的区别：

只有在使用state中的数据有区别，其他的引入都一样

mutation需要遵守Vue的响应规则

既然Vuex 的 store 中的状态是响应式的，那么当我们变更状态的时候，监视状态的 vue 组件最好提前在你的 store 中初始化好所有所需的属性；当需要在对象上添加新属性时，你应该这样子做

需要手动设置给state中的状态添加属性

22、vuex在项目中如何使用

最简单的用法

新建文件store.js ==> 引入Vue 和 Vuex ==> 导出当前store ==> 将sore挂载在实例化对象中（main.js中引入并挂载）==> 在页面中即可使用store中的数据

store中引入五大将:state getters mutations actions

23、加速打包（减小体积）的方法

不要打包map文件，加快打包速度，减少打包体积

打包之后生成的文件：

按需引入所需的框架（比如按需引入mint-ui）

这样配置的前提是需要后端人员在服务器上链接vue和moment的cdn文件（即cdn引入）

链接cdn的资源（比如vue）

24、如何启用本地服务器（上线）

在dist文件夹下，跑本地服务

25、路由懒加载

为什么要进行路由懒加载？

因为运用webpack打包后的文件会非常的大，会造成进入首页时，需要加载的内容过多导致首页加载过慢，不利用用户体验。

路由懒加载将不同路由路由对应的组件分隔成不同的代码块，然后当路由访问的时候才加载对应的组件，这样访问就更加高效，提高用户的体验

26、vue的自定义指令

实现案例：

自定义指令:

Vue.directive('指令的名字',{})

字面量方式创建，包含声明周期的函数，其中：

bind()只会执行一次

update() 更新数据的时候会被调用

在每个生命周期中，el绑定的是dom节点，binding存储的是一堆对象

binding属性中的参数：

arg：v-tack:arg

value：传递的值

27、局部自定义指令

完成功能：当前组件自动聚焦

inserted：被插入的元素插入到父节点会被调用

28、滚动行为

默认是哈希模式，路径中带有#，切换路由不会对后端发起请求，也就是不会重载页面

要想将页面滚动到指定的位置，必须为 history 模式

若希望切换页面的时候，页面回到顶部。而当返回的时候，页面滚动到原来查看的位置。

实现方法是调用 scrollBehavior 方法，如果滚动条的位置存在，则返回滚动条的位置；若不存在，则返回顶部

29、HTML5 的 History 模式

去除了 # 的hash模式，基于h5中的 history.pushState() 函数来添加历史记录

部署到服务器上的时候，当重新复制地址打开的时候，会报错丢失404

则需要在服务端配置资源：在本地配置node服务

启动命令：

node node_server.js

然后在浏览器打开就可以了

30、vue-router简单实现原理

31、骨架屏

主要用于提升用户体验，解决首页加载慢的白屏效果

主要针对于首屏加载（也就是页面的第一次加载）

实现原理：使用骨架屏插件，配置文件，当加载页面时，先加载骨架屏文件，再正常加载main.js

(最好将骨架屏图片用base64在线转换工具转换为base64，再赋值给图片路径。因为图片大小小于webpack配置limit中的最小值时，建议转为base64，这样子就可以减少一次图片的网络请求) base64不走请求

可以提升性能

github地址：https://github.com/lavas-project/vue-skeleton-webpack-plugin

01、配置单页的骨架屏

安装骨架屏：

npm install vue-skeleton-webpack-plugin

配置骨架屏：（开发环境和生产环境都需要配置）

// 骨架屏
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
function resolve (dir) {return path.join(__dirname, '..', dir)
}

plugins: [new SkeletonWebpackPlugin({webpackConfig: {entry: {app: resolve('./src/entry-skeleton.js')}}})
]

骨架屏入口文件：

实现效果：

先加载骨架屏页面再加载首页

02、配置多页的骨架屏

与单页的骨架屏差不多，不同的地方在于修改配置

配置骨架屏：

（开发环境和生产环境都需要配置）必须在history模式下

32、为何要做服务器渲染和预渲染？

因为打包之后的首页是这样子的：

打包之后的资源不能直接进行seo操作和爬虫，所以需要做预渲染和ssr

33、什么是预渲染？

预渲染：用于改善少数营销页面的SEO，即浏览器一搜索就能搜索到指定页面中的内容

预渲染就是把前端的页面作为静态的站点，去渲染出来！

而不是使用服务器去把我们对应的html渲染到前端

有时候需要考虑是否做单页面，就是第一次发请求时就能搜索到seo的页面，渲染出来

34、如何配置预渲染？

https://github.com/chrisvfritz/prerender-spa-plugin

下载插件：

npm install prerender-spa-plugin

引入并配置：

引入并调用渲染器 ( 注意路由模式必须是history模式 )

配置重要的信息：

在项目的入口文件main.js中写入

进行编译运行 npm run build

编译之后的效果

在浏览器上运行看看

hs -o -p 999

在network上看下运行的页面中div是否有可seo的内容出现

35、什么是服务器渲染

文档：https://ssr.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr

将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器

https://ssr.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr-%EF%BC%9F

服务器端渲染的核心

创建服务端的渲染器，通过vue-server-renderer插件中的renderToString()方法，将Vue实例转换为字符串，通过模板语法插入到html文档中

我们使用服务器端渲染是为了弥补单页面应用SEO能力的不足！！

下载对应的包

npm install express vue-server-renderer

server.js

用node server起一下服务，能够看到浏览器把#app中的所有内容都渲染回来了，那样子搜索引擎就可以拿取到内容

有利于seo

项目目录文件展示：

以上是服务端渲染，下面讲的就是客户端渲染。客户端渲染就是我们平常所熟悉的单页面应用