轻松玩转VUE 2.0及常用组件

轻松玩转VUE 2.0及常用组件

一、vue
1.vue生命周期
Ⅰ、created =>
作用：编译模板,把data里面的数据和模板成html
应用场景：此时可以提交ajax请求来初始化页面数据，仅仅只是初始化数据，不能操作dom（$refs获取不到值）

Ⅱ、mounted =>
作用：挂载完成，也就是模板中的html渲染到了html页面中，此时一般可以做一些ajax操作，mounted只会执行一次！！！
应用场景：ajax请求初始化页面数据，且可以做一些dom操作

Ⅲ、updated =>
作用：页面任意一处改变时，这个钩子会被触发
应用场景：页面数据或者结构变化时，要执行一些判断和DOM操作时使用

2. 计算属性
   Ⅰ、computed =>
   作用: 封装计算数据的函数（有缓存）
   应用场景: 假设我们有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A。应用在methods中

Ⅱ、methods =>
作用: 封装计算数据的函数（无缓存）
应用场景: 与computed相反, 当不需要缓存时使用此方法, 应用在html代码中

1.png

3.ref指令
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例:

2.png

4.Mixin混合对象
混合是一种灵活的分布式复用Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

3.png

使用场景: 举个栗子，用户登录判断，一个网站有些页面或者功能(发帖)必须要用户登录后才能进入，这时写一个通用的Mixin对象（用户跳转到登录页面）注入到这些页面或者功能中，被注入的组件就具有了这个功能。

二、vue-router
用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。

1. 基本用法
   创建Router对象，传入routes对象，routes对应的是一个路由数组。然后把这个对象注入到Vue的入口文件中，所有的子组件中通过标签来实现路由跳转，或者也可以使用router对象的push、replace、go方法来跳转(像这样this.$router.push())。
   

   一、
   

   4.png
   二、
   

   5.png
   三、
   

   6.png

2. 导航钩子
   正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。

Ⅰ、常用钩子

7.png

三、vuex
这是vue开发中比较难的一部分。可以看做是一个全局状态管理容器，把需要共享的状态数据存在vuex中（比如最常见的用户信息），当然你也可以把每一个组件的状态都存到这里面，虽然更利于维护（这样就会创建一个状态树，结构清晰明了），但是会大幅度增加开发时间。

8.png

9.png

Ⅰ、state的作用就是状态数据存储
Ⅱ、mutations里面的方法是用来改变state，可以使用commit('mutations里指定的方法名','数据')的形式来触发mutations里的方法
Ⅲ、actions主要用来发送ajax请求，因为mutations是一个同步事件,你不能在里面写ajax请求,所以这时引入了actions这个概念. 可以使用dispatch('actions里指定的方法名','数据')的形式来触发actions里的方法,

注意事项：如果项目使用了vuex，官方建议是把所有的ajax异步请求都写入actions
常见问题 ： 主要就是异步的问题,例如

11.png

解决方案：设置300ms左右的定时器或者放入actions中组合成一个promise队列